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">&</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>
