最高のjQueryは何ですか＆＃8220;サムネイルをクリックしてメイン画像を変更します＆＃8221;モジュール？

StackOverflow https://stackoverflow.com/questions/612575

  •  03-07-2019
  •  | 
  •  

質問

ここに私が持っているものがあります（それが違いを生むなら、すべて動的に生成されます）：

  • 画像のリスト
  • 各画像のキャプション
  • 各画像のサムネイル

ページには、1つのフルサイズ画像とすべてのサムネイルが読み込まれます。ユーザーがサムネイルをクリックすると、フルサイズの画像にその新しい画像とキャプションが表示されます。別のサムネイルをクリックすると、画像（およびキャプション）が再び変更されます。

それほど複雑ではありません。私は数か月前にソリューションを一緒にハックしましたが、もう一度それをする必要があり、このくだらないコードを見て、より良い方法が必要だと考えていますそれも）。

考え？リンク？

ありがとう！

役に立ちましたか？

解決

これはjQueryで作成された、見栄えの良いものです。写真スライダー

そして、もう1つ、もう少し気に入っています。 ガレリア

他のヒント

ここでの答えのほとんどは、キヤノンでハエを撃つようなものです!! 

$('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});

これで必要なのは.. 4行のコードです。

こちらをご覧ください： gallery-in-4-lines

彼がここにリンクしたkrembo99の回答を基に、共有したいクライアントがこのような機能を要求したときにすでに何百枚もの写真をアップロードしていたので、私のソリューション。それを念頭に置いて、提供されたコードに数行追加することで、パラメーターに合ったソリューションを得ることができました。

私も小さな画像を扱っていたので、小さな＆amp;を作成する必要はありませんでした。同じファイルの大きなバージョン。 

$('.thumbnails img').click(function(){

 // Grab img.thumb class src attribute
 // NOTE: ALL img tags must have use this class, 
 // otherwise you can't click back to the first image.

 var thumbSrc = $('.thumb').attr('src');

 // Grab img#largeImage src attribute
 var largeSrc = $('#largeImage').attr('src');

  // Use variables to replace src instead of relying on file names.
  $('#largeImage').attr('src',$(this).attr('src').replace(thumbSrc,largeSrc));
  $('#description').html($(this).attr('alt'));

});

これが私のHTMLの外観です。

    <img src="path/to/file1.jpg" id="largeImage" class="thumb">
    <div id="description">1st image Description</div>

    <div class="thumbnails">

     <img src="path/to/file1.jpg" class="thumb" alt="1st image description">
     <img src="path/to/file2.jpg" class="thumb"alt="2nd image description">
     <img src="path/to/file3.jpg" class="thumb" alt="3rd image description">
     <img src="path/to/file4.jpg" class="thumb" alt="4th image description">
     <img src="path/to/file5.jpg" class="thumb" alt="5th image description">

    </div>

http://bradblogging.com/jquery/ 9-jquery-slideshow-applications-you-cannot-miss /

すぐに使用できるjQueryの9種類の写真スライドショーのあるページ

ガレリアの実装を確認してください：ガーデンデザインランドスケープエセックスギャラリーで

Galleriffic を試してください。必要なものがすべて揃っています。

これらのスクリプトの多くは時代遅れであり、私にとってはうまくいかず、サムネイルに異なる画像のセットが必要です。私は深刻な狩りをしていたので、jqueryを必要としないプレーンなjsである非常に軽いものを見つけました。

<html>
<head>
<style>
* {margin:0; padding:0; border:0; outline:0; box-sizing:border-box;}
.image, .thumb {width:100%; height:100%;}
#product-image-wrap {position:relative; float:left; width:250px; height:325px; margin:50px 0 50px 50px;}
#product-image {position:relative; float:left; width:250px; height:250px; border:1px solid #d0d0d0; padding:20px; cursor:pointer; display:inline-block; transition:0.9s;}
#product-image:hover {opacity:0.7;}
.product-image-thumbnail {position:relative; float:left; width:55px; height:55px; border:1px solid #d0d0d0; margin-top:20px; padding:10px; cursor:pointer; display:inline-block; transition:0.9s;}
.product-image-thumbnail:hover {opacity:0.7;}
.product-image-thumbnail-spacer {position:relative; float:left; width:10px; height:130px;}
</style>

</head>
<body>

<div id='product-image-wrap'>

<!-- Main -->
<div id='product-image'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='0' class='image' alt='image 0'></div>

<!-- Thumbs -->
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='1' class='thumb' onclick='preview(this)' alt='image 0'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_02_large.jpg' id='2' class='thumb' onclick='preview(this)' alt='image 2'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_03_large.jpg' id='3' class='thumb' onclick='preview(this)' alt='image 3'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_04_large.jpg' id='4' class='thumb' onclick='preview(this)' alt='image 4'></div>

</div>

<!-- Javascript -->
<script>
var lastImg = 1;
document.getElementById(lastImg).className = "thumb selected";
function preview(img) {
document.getElementById(lastImg).className = "thumb";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id;
}
</script>

</body>
</html>

https://jsfiddle.net/uo6js5v7/

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top