Question

My website currently uses a custom jQuery gallery system that I’ve developed… it works well, but I want to add one capability that I can’t seem to figure out. I want the user to, instead of having to click each thumbnail, also be able to click the full image itself to advance in the gallery. Working gallery is here: http://www.studioimbrue.com

The code is as follows:

$('.thumbscontainer ul li a').click(function() {
var li_index = $(this).parents('ul').children('li').index($(this).parent("li"));

    $(this).parents('.thumbscontainer').parent().find('.captions ul li').fadeOut();
 $(this).parents('.thumbscontainer').parent().find('.captions ul li:eq('+li_index+')').fadeIn();
});

});

and the gallery HTML markup is as follows:

<div class="container">
    <div class="captions" id="usbdrive">
     <ul>
         <li style="display:block">
                <img src="images/portfolio/usbdrive/1.jpg" />
                <div class="caption">
                 <span class='projecttitle'>Super Talent USB Drive Package.</span>
     A fancy, lavish package designed for Super Talent's specialty USB drive. It was known as the world's smallest flash drive <span class="amp">&amp;</span> it is dipped in gold!
                </div>
            </li>
         <li>
             <img src="images/portfolio/usbdrive/2.jpg" />
            </li>
         <li>
                <img src="images/portfolio/usbdrive/3.jpg" />
            </li>
         <li>
                <img src="images/portfolio/usbdrive/4.jpg" />
            </li>
         <li>
                <img src="images/portfolio/usbdrive/5.jpg" />
            </li>   
        </ul>
</div>

    <div class="thumbscontainer verticalthumbs">
        <ul>
            <li><a href="javascript:void(0);" name="usbdrive1"><img src="images/portfolio/usbdrive/1.jpg" /></a></li>
            <li><a href="javascript:void(0);" name="usbdrive2"><img src="images/portfolio/usbdrive/2.jpg" /></a></li>
            <li><a href="javascript:void(0);" name="usbdrive3"><img src="images/portfolio/usbdrive/3.jpg" /></a></li>
            <li><a href="javascript:void(0);" name="usbdrive4"><img src="images/portfolio/usbdrive/4.jpg" /></a></li>
            <li><a href="javascript:void(0);" name="usbdrive5"><img src="images/portfolio/usbdrive/5.jpg" /></a></li>
        </ul>
    </div>
</div>

Answer 1

You need to handle the click event for the li elements and show the next li.

For example:

$('.container .captions li').click(function() {
    var nextLi = $(this).fadeOut().next().fadeIn();

    if (nextLi.length === 0)  //If we're the last one,
        nextLi = $(this).siblings(':first-child').fadeIn();
});