내 사용자 정의 jQuery 갤러리에 다른 매개 변수 추가

Question

내 웹 사이트는 현재 내가 개발 한 사용자 정의 jQuery 갤러리 시스템을 사용합니다 ... 잘 작동하지만 알아낼 수없는 기능 하나를 추가하고 싶습니다. 각 축소판을 클릭하지 않고 전체 이미지를 클릭하여 갤러리에서 전진 할 수 있기를 바랍니다. 갤러리를 작업 여기에 있습니다 :

$('.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 요소에 대한 클릭 이벤트를 처리 할 필요가 다음과 같이 http://www.studioimbrue.com

코드는 다음을 보여주십시오. 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(); 
});