Как иметь несколько галерей обмена изображениями jQuery на одной странице? - PullRequest
Новая
       36

Как иметь несколько галерей обмена изображениями jQuery на одной странице?

1 голос
/ 14 мая 2010

У меня есть несколько галерей изображений, которые используют следующий код (просто посмотрите демонстрацию по следующей ссылке).

Однако, когда вы нажимаете на миниатюры одной галереи, чтобы изменить предварительный просмотр большого изображения - все галереи автоматически изменяются и на этот большой предварительный просмотр.

Короче, вопрос такой:

«Как отделить каждую галерею друг от друга, чтобы, когда пользователь щелкает по эскизам одной конкретной галереи, предварительный просмотр большого изображения этой галереи изменяется, а не какой-либо другой?»

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/ Только у меня есть несколько галерей на одной странице.

1 Ответ

0 голосов
/ 14 мая 2010

По сути, я повторяю тот же 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;       
});

быстрое демо

...