JQuery Cycle updateActivePagerLink 옵션을 수정해야합니다.

Question

간단한 3 이미지 슬라이드 쇼를 만들고 있는데 Jquery와 Cycle에 익숙합니다. 슬라이드 쇼는 3 개의 호출기 링크로 작동합니다.

내가 수행해야하는 유일한 작업은 현재 선택된 호출기 이미지에 "activeSlide"기능을 추가하는 것입니다. 현재 활성 페이징의 CSS를 변경할 수 없기 때문에 activeSlide 클래스를 사용하면됩니다. 이미지 소스 ... 기본적으로 단순한 텍스트 숫자라면 activeSlide 클래스를 스타일링합니다.

본질적으로 필자는 활성 슬라이드 호출기에 도달했을 때 test-select-off.jpg를 test-select-on.jpg로 교체하려고합니다.

주기 코드 :

$(function() { 
    $('#testimonial-features').cycle({ 
     speed: 800, 
      timeout: '6500', 
      pause: 'true', 
      pager: '#testimonial-switcher', 
      pagerAnchorBuilder: function(idx, slide) { 
      return '#testimonial-switcher li:eq(' + idx + ') a';  
      } 
    }); 
}); 

HTML 코드 :

<div id="testimonial-switcher"> 
<ul> 
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li> 
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li> 
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li> 
</ul> 

내가 어떻게 할 수 있습니까? 내가 http://www.malsup.com/jquery/cycle/pager7.html에서 촬영 updateActivePagerLink 기능, 수정하여 updateActivePagerLink 옵션에 뭔가를해야 할 것입니다 가정 :

$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
    $(pager).find('li').removeClass('activeLI') 
     .filter('li:eq('+currSlideIndex+')').addClass('activeLI'); 
}; 

하지만 내가 말했듯이, 난 아직이 구문을 배우고을, 그래서 어떤 도움을 크게 감상 할 수있다 !

Answer 1

편집 : 분명히, 나는 플러그인에 익숙하지 않았기 때문에, 내 원래의 대답은 작동하지 않았다. 그러나 부분적으로 도움이되는 것을 발견 했으므로 여기서는 완전히 작동해야하는 솔루션으로 답변을 업데이트하겠습니다. 당신이 발견 한 것에 덧붙여서해야 할 일은 그 기능의 시작 부분에 모든 것을 '꺼짐'(1 행)으로 변경 한 다음 활성 상태를 '켜기'(추가 한 내용)로 변경하는 것입니다.

$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
    $(pager).find('img').attr('src','images/layout/test-select-on.jpg'); 
    $(pager).find('li').removeClass('activeLI') 
      .filter('li:eq('+currSlideIndex+')').addClass('activeLI') 
      .find('img').attr('src','images/layout/test-select-on.jpg'); 
}; 

내가 작동하는지 알려주세요.

---

원래 오답 당신이 ( li가 after 콜백 함수 내에서 클래스 .activeLI을 가지고 중 내 img의 src을 대체 할 수처럼
것 같습니다 (그것을 떠나 그래서 코멘트 감각하게) 내가 천국하지만 Cycle Plugin을 사용했는데, 단지 gleaning that last bit from the docs입니다.)

그래서에주기 코드를 변경 :

$(function() { 
    $('#testimonial-features').cycle({ 
     speed: 800, 
     timeout: '6500', 
     pause: 'true', 
     pager: '#testimonial-switcher', 
     pagerAnchorBuilder: function(idx, slide) { 
     return '#testimonial-switcher li:eq(' + idx + ') a';  
     }, 
     after: function(curr, next, opts) { 
     $(curr).find('img').attr('src','images/layout/test-select-on.jpg'); 
     } 
    }); 
}); 

그리고 나 그 작동하는지 알려주세요! (참고 :이 작동하지 않는다면 after: function()에있는 curr에서 $()의 래핑을 시도하십시오 ... 전에 말했듯이이 플러그인을 사용하지 않았습니다)