1

次のコードを使用する複数の画像ギャラリーがあります（次のリンクでデモを表示するだけです）。

ただし、1つのギャラリーのサムネイルをクリックして大きな画像のプレビューを変更すると、すべてのギャラリーも自動的にその大きなプレビューに変わります。

要するに、問題は次のとおりです。

「各ギャラリーを互いに分離して、ユーザーが特定のギャラリーのサムネイルをクリックすると、そのギャラリーの大きな画像プレビューが変更され、他のギャラリーは変更されないようにするにはどうすればよいですか？」

JavaScript：

$("ul.thumb li a", $(".item")).click(function() {
    var mainImage = $(this).attr("href"); //Find Image Name
    $("#main_view img", $(".item")).attr({ src: mainImage });
    return false;       
});

}）;

HTML：

<div class="item">
   <h2>The Money Growing Door</h2>
   <div id="main_view">
     <img src="images/1.jpg" class="uks" alt="#" />
   </div>
   <ul class="thumb">
     <li><a href="images/1.jpg"><img src="images/colours/sinine.png" alt="#" /></a></li>
     <li><a href="images/3.jpg"><img src="images/colours/must.png" alt="#" /></a></li>
     <li><a href="images/1.jpg"><img src="images/colours/valge.png" alt="#" /></a></li>
   </ul>
</div>

基本的に、私は次のコードに見られるのと同じHTMLとJavascriptを繰り返します：http： //www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/ 私だけが同じ上に複数のギャラリーを持っていますページ。

4

1 に答える 1

0

基本的に、次のコードで見られるのと同じ HTML と Javascript を繰り返します : http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/ページ。

だから私はあなたがたくさん持っていると思います<ul class="thumb">??

もしそうなら、試してみてください

$("ul.thumb li a").click(function() {
    var mainImage = $(this).attr("href"); //Find Image Name
    $(this).closest('.item').find("#main_view img").attr({ src: mainImage });
    return false;       
});

クイックデモ

于 2010-05-14T08:09:03.577 に答える