开发者

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')
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜