title: Adding Another Parameter to my Custom jQuery Gallery
body: <p>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: <a href="http://www.studioimbrue.com" rel="nofollow noreferrer">http://www.studioimbrue.com</a></p>
  
  <p>The code is as follows:</p>
  
  <pre><code>$('.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();
  });
  
  });
  </code></pre>
  
  <p>and the gallery HTML markup is as follows:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="captions" id="usbdrive"&gt;
       &lt;ul&gt;
           &lt;li style="display:block"&gt;
                  &lt;img src="images/portfolio/usbdrive/1.jpg" /&gt;
                  &lt;div class="caption"&gt;
                   &lt;span class='projecttitle'&gt;Super Talent USB Drive Package.&lt;/span&gt;
       A fancy, lavish package designed for Super Talent's specialty USB drive. It was known as the world's smallest flash drive &lt;span class="amp"&gt;&amp;amp;&lt;/span&gt; it is dipped in gold!
                  &lt;/div&gt;
              &lt;/li&gt;
           &lt;li&gt;
               &lt;img src="images/portfolio/usbdrive/2.jpg" /&gt;
              &lt;/li&gt;
           &lt;li&gt;
                  &lt;img src="images/portfolio/usbdrive/3.jpg" /&gt;
              &lt;/li&gt;
           &lt;li&gt;
                  &lt;img src="images/portfolio/usbdrive/4.jpg" /&gt;
              &lt;/li&gt;
           &lt;li&gt;
                  &lt;img src="images/portfolio/usbdrive/5.jpg" /&gt;
              &lt;/li&gt;   
          &lt;/ul&gt;
  &lt;/div&gt;
  
      &lt;div class="thumbscontainer verticalthumbs"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="javascript:void(0);" name="usbdrive1"&gt;&lt;img src="images/portfolio/usbdrive/1.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0);" name="usbdrive2"&gt;&lt;img src="images/portfolio/usbdrive/2.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0);" name="usbdrive3"&gt;&lt;img src="images/portfolio/usbdrive/3.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0);" name="usbdrive4"&gt;&lt;img src="images/portfolio/usbdrive/4.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0);" name="usbdrive5"&gt;&lt;img src="images/portfolio/usbdrive/5.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>