jQuery Cycle with anchors and thumbnails

jQuery Cycle 플러그인을 사용하여 기본 이미지가 앵커에 래핑되고 축소판 탐색 기능이 포함 된 슬라이드 쇼를 만듭니다. 기본적으로 jQuery Cycle의 demo page과 동일한 코드가 있습니다. 링크에서 이미지를 감 으면 축소 이미지가 부러졌습니다. $('#slideshow img).attr('src')에 대해 "slide.src"를 삭제하려고 시도했지만 아직 정의되지 않은 상태로 되돌아옵니다.jQuery Cycle with anchors and thumbnails

$('#slideshow').before('<ul id="slideshow-nav">').cycle({ 
fx: 'fade', 
speed: 'slow', 
timeout: 0, 
pager: '#slideshow-nav', 

pagerAnchorBuilder: function(idx, slide){ 
return '<li class="thumbnail"><a href="#"><img class="rounded" src="' + slide.src + '" width="137" height="129" /></a><span class="highlight"></span><span class="gloss"></span></li>'; 
} 
});

그리고 내 html은이 부분입니다.

<div id="slideshow"> 
<a href="#"><img src="images/gyro.jpg" alt="Gyro"></a> 
<a href="#"><img src="images/gyro.jpg" alt="Gyro"></a> 
<a href="#"><img src="images/gyro.jpg" alt="Gyro"></a> 
<a href="#"><img src="images/gyro.jpg" alt="Gyro"></a> 
</div>

출처

2010-12-01 Chad

$.before()에 유효한 HTML 단편을 제공해야합니다. 현재 </ul> 태그가 닫히지 않았습니다. 당신이 웹킷 브라우저에서 방화범 또는 개발자 도구를 사용하는 경우

$('#slideshow').before('<ul id="slideshow-nav" />').cycle({ ...

당신은 항상 JQuery와에 console.log($("#slideshow-nav")); 또는 console.log($(slide));를 작성하여 찾는 어떤 요소를 볼 수 있습니다 :이 작업을 수행하는 가장 깨끗한 방법은 자기 가까이 태그입니다 콜백 함수.

출처

2010-12-01 15:47:11 quis

그래, 나는 그것들을 기록했고 그들은 단지 정의되지 않은 상태로 돌아왔다. 이것은 앵커에 #slideshow 이미지를 래핑 한 후에 발생했습니다. 그 전에 그것은 효과가있었습니다. – Chad

''을 추가하면 플러그인에서 사용하는 선택기가 깨질 수 있습니다. 미리보기 이미지를 롤오버 할 때 핸드 커서를 얻으 려한다면, 대신 CSS에서'cursor : pointer;'를 사용하십시오. – quis

이미지를 깨뜨린 이유 때문에 축소판을 수정하는 중 스크립트의 다른 부분에서 오류를 발견하지 못했습니다.

출처

2010-12-01 16:07:12 Chad

jQuery Cycle with anchors and thumbnails

답변

관련 문제