jQuery: multiple photo galleries on same page
I'm trying to figure out how to use a jQuery photo gallery multiple times on one page. Most, if not all jQuery galleries out there user an ID to target the main gallery image and replace the attribute.
How can I construct a gallery and only replace the related main gallery image?
<div class="gallery">
<div class="main_view">
<img src="092519.jpg" alt="Some Image" />
</div>
<ul class="thumb">
<li><a href="092519.jpg"><img src="092519.jpg" alt="" /></a></li>
<li><a href="092520.jpg"><img src="092520.jpg" alt="" /></a></li>
<li><开发者_如何学JAVAa href="092521.jpg"><img src="092521.jpg" alt="" /></a></li>
<li><a href="092522.jpg"><img src="092522.jpg" alt="" /></a></li>
<li><a href="092523.jpg"><img src="092523.jpg" alt="" /></a></li>
<li><a href="092524.jpg"><img src="092524.jpg" alt="" /></a></li>
<li><a href="092525.jpg"><img src="092525.jpg" alt="" /></a></li>
<li><a href="092526.jpg"><img src="092526.jpg" alt="" /></a></li>
</ul>
</div>
jQuery:
$("ul.thumb li a").click(function () {
var mainImage = $(this).attr("href"); // Find Image Name
//$(".main_view img").attr({ src: mainImage });
$(this).closest("div.main_view").hide(); // doesn't work
return false;
});
It's easiest to go to the group parent, then find the element you want.
$(this).parents('.gallery').find('.main_view');
That is a simple jQuery selector assuming that this
is one of the clicked a
tags:
$(this).closest('div.main_view')
精彩评论