jquery cycle2 초기화 스크립트 실패

div 내에서 필요한 모든 옵션 인라인을 사용하여 jq cycle2 fine을 사용할 수 있습니다. 이제 선호되는 스타일이되었습니다. 하지만 이전의 작동 방법과 마찬가지로 초기화 스크립트를 대신 사용하고 싶습니다. 가능한 한 갤러리 옵션을 마크 업과 외부 .js 파일에 보관하는 것을 선호합니다.jquery cycle2 초기화 스크립트 실패

필자는 '인라인'메서드로 완벽하게 작동하는 모든 옵션을 사용하여 스크립트를 만들었지 만 올바르게 연결되어 있지만 자동으로 실패하고 슬라이드 쇼가 기본 설정 인 페이드로 되돌아갑니다. 반면 scrollHorz를 지정합니다.

또한 이전/다음 버튼과 애니메이션 된 양이온을 사용합니다. 캡션은 작동하지만 애니메이션이 없으면 이전/다음 버튼이 표시되지만 완전히 실패합니다.

내 스크립트는 'functionality.js'라는 파일에 있으며 사용자 지정 초기화 스크립트 ''의 지침을 따른 것으로 판단됩니다. 나는 'plugins.js'라는 파일에 모든 관련 플러그인을 가지고 있는데,이 플러그인은 잘 링크되어 있으며 아래의 consolegrab 콘솔에서 참조되는 것을 볼 수 있습니다.

<a href="#"><span class="prevControl">Prev</span></a> 
<a href="#"><span class="nextControl">Next</span></a> 

<div class="cycle-slideshow"> 
<img src="http://malsup.github.com/images/p1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens"/> 
<img src="http://malsup.github.com/images/p2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument"/> 
<img src="http://malsup.github.com/images/p3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay"/> 
<img src="http://malsup.github.com/images/p4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park"/> 

<div class="cycle-caption"></div> 
<div class="cycle-overlay"></div> 

</div>

링크 된 스크립트 :

다음과 같은 마크 업/스크립트 (이 단순위한 cycle2 예 직선 사본의)와 콘솔 screengrab에 대한 링크를 참조하시기 바랍니다

$('.cycle-slideshow').cycle({ 
fx: scrollHorz, 
timeout: 2000, 
speed: 700, 
prev: ".prevControl", 
next: ".nextControl", 
caption-plugin: caption2, 
overlay-fx-sel: "div" 
});

을 그리고 a screengrab of the console error

누군가가 조언을 해줄 수 있다면 나는 그것을 매우 간단하다고 확신 할 수 있습니다. 오류! 이 페이지에서 캡션 플러그인에 대한 참조를 포함해야한다

출처

2013-04-05 redplanet

있다 자바 스크립트에서주기가 실패하는 몇 가지 간단한 실수. 프로그래밍 방식으로 슬라이드 쇼를 초기화 할 때 매개 변수는 데이터 속성을 사용하여 지정 될 때 하이픈을 사용하는 대신 camelCase 여야합니다. 문자열 기반 매개 변수 값을 따옴표로 묶어야합니다. 그렇지 않으면 스크립트가 변수라고 생각할 것입니다.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Cycle2 Example</title> 
</head> 
<body> 
    <a href="#"><span class="prevControl">Prev</span></a> 
    <a href="#"><span class="nextControl">Next</span></a> 

    <div class="slides"> 
     <img src="http://malsup.github.com/images/p1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens"/> 
     <img src="http://malsup.github.com/images/p2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument"/> 
     <img src="http://malsup.github.com/images/p3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay"/> 
     <img src="http://malsup.github.com/images/p4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park"/> 

     <div class="cycle-caption"></div> 
     <div class="cycle-overlay"></div> 
    </div> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script src="http://malsup.github.io/jquery.cycle2.js"></script> 
    <script> 
     $('.slides').cycle({ 
      fx: "scrollHorz", 
      timeout: 2000, 
      speed: 700, 
      prev: ".prevControl", 
      next: ".nextControl", 
      captionPlugin: "caption2", 
      overlayFxSel: "div" 
     }); 
    </script> 
</body> 
</html>

는 사이클 플러그인 초기화 자동되지 않도록 프로그래밍 방식으로 슬라이드 쇼를 설정할 때 나는 또한 아마 ID 또는 cycle-slideshow 이외의 클래스를 사용하십시오 : 여기에 작동 귀하의 예제의 업데이트 버전입니다.

출처

2013-07-10 10:05:57 Dylan

많은 감사합니다 @ 딜란 이것은 완벽하게 작동합니다. 당신이 만든 포인트를보고, 정말 도움을 주셔서 감사합니다. – redplanet

안녕하세요. – Dylan