0

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><a 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;
});
dcolumbus
  • 9,596
  • 26
  • 100
  • 165

2 Answers2

0

That is a simple jQuery selector assuming that this is one of the clicked a tags:

$(this).closest('div.main_view')
Marcus Whybrow
  • 19,578
  • 9
  • 70
  • 90
  • I think you misunderstood the question. I am using classes... what I'm asking is how to target the "main_view" class of the current clicked thumb. – dcolumbus Nov 17 '10 at 19:46
0

It's easiest to go to the group parent, then find the element you want.

$(this).parents('.gallery').find('.main_view');
Orbling
  • 20,413
  • 3
  • 53
  • 64
  • Yes! This is was I was looking for. For some reason, I wasn't using the "parents" function properly. Thank you, Orbling! – dcolumbus Nov 17 '10 at 21:52