添加另一個參數到我的自定義jQuery圖庫

Question

我的網站目前使用我開發的自定義jQuery圖庫系統...它運行良好，但我想添加一個功能，我似乎無法弄清楚。我希望用戶不必單擊每個縮略圖，也可以單擊完整圖像本身以在圖庫中前進。工作畫廊是在這裏：http://www.studioimbrue.com

的代碼如下：

$('.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(); 
}); 

}); 

與畫廊的HTML標記如下：

<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

您需要處理的li元素的click事件並顯示下一個li。

例如：

$('.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(); 
});