2011-02-23 6 views
0

동적 정렬 요소를 사용하는 포트폴리오 스크립트를 작성 중입니다. jquery로 정렬 할 수있는 페이지의 항목 목록이 있습니다. 사용자가 해당 요소 중 하나를 클릭하면 큰 이미지가 페이지의 특정 div에로드됩니다. 처음에는 기본 이미지가로드됩니다. 내가 원하는 것은 Nathan Searles의 slides.js를 사용하여 2 ~ 3 개의 이미지 슬라이드 쇼를 만드는 것입니다. 내가 가지고있는 문제는 새로운 이미지 집합이 div에로드 된 후 스크립트를 다시 호출하는 것입니다. div의 항목을로드하는 기본 코드는 다음과 같습니다. 멋진 슬라이드 쇼를 만들 수있는 slides.js 스크립트를 초기 DIV 부하를dom 조작 후 jquery 플러그인 다시 호출

<div class="slides_container" id="slidesTarget"> 
<img src="../javascript/img/slide-1.jpg" width="570" height="270" alt="Slide 1"> 
<img src="../javascript/img/slide-2.jpg" width="570" height="270" alt="Slide 2"> 
</div> 

<ul class="webbies"> 
<li data-id="ab"><a href="#"><img src="/Portfolio/temp/webby-andy-clarke.png" width="110" height="110" alt="" /></a> 
div class="clickContent">List of images go here</div> 
</li> 

<li data-id="ac"><a href="#"><img src="/Portfolio/temp/webby-andy-clarke.png" width="110" height="110" alt="" /></a> 
div class="clickContent">List of images go here</div>   
</li> 
</ul> 

$("ul.webbies li a").click(function(e) { 
e.preventDefault(); 
var content = $(this).next('.clickContent').html(); 
if(content) $("#slidesTarget").html(content); 
}); 
$("#slides").slides(); 

그래서, 코드의 예에 따라 (나는 일부 조각을 놓칠 수도 있지만 잘하면 당신은 아이디어가 생각 날 것이다). 사용자가 ul.webbies의 항목 중 하나를 클릭하면 새 이미지 집합이 #slidesTarget에로드됩니다. 필자가해야 할 일은 slides.js 스크립트를 다시 설정하여 새 이미지 목록을 기반으로 슬라이드 쇼를 만드는 것입니다. 희망이 의미가 있습니다. 도움/제안에 미리 감사드립니다.

답변

0

글쎄,이 플러그인은 사용중인 플러그인과 사용 가능한 후크 유형에 따라 다릅니다. 내가 많이 사용하는 jquery Cycle은 초기화 된 슬라이드를 동적으로 추가 할 수있게 해준다. 사용중인 플러그인에 대한 링크를 제공 할 수 있습니까?

JQuery와주기 : http://jquery.malsup.com/cycle/

편집 확인 플러그인을 발견했습니다.

슬라이드를 slides_container에 추가 한 후에 컨테이너의 플러그인을 다시 초기화 할 수는 없습니까? $ ("# slidesTarget")을 호출하면됩니다. slides();

+0

여기에 대한 링크는 http://slidesjs.com/입니다. 플러그인을 다시 호출하려고하면 목록을 대체하는 대신 목록에 추가됩니다. 다른 슬라이더를 찾아야 할 수도 있습니다. –

+0

흠, 정확히 당신이 원하는 것을 이해하기가 약간 어렵습니다. 우리가 볼 수있는 데모를 가지고 있다면 좋을 것입니다. – JohnP

+0

그래, 나는 생각했다. 내가 뭔가를 설정할 수 있는지 보자. –

관련 문제