동적 정렬 요소를 사용하는 포트폴리오 스크립트를 작성 중입니다. 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 스크립트를 다시 설정하여 새 이미지 목록을 기반으로 슬라이드 쇼를 만드는 것입니다. 희망이 의미가 있습니다. 도움/제안에 미리 감사드립니다.
여기에 대한 링크는 http://slidesjs.com/입니다. 플러그인을 다시 호출하려고하면 목록을 대체하는 대신 목록에 추가됩니다. 다른 슬라이더를 찾아야 할 수도 있습니다. –
흠, 정확히 당신이 원하는 것을 이해하기가 약간 어렵습니다. 우리가 볼 수있는 데모를 가지고 있다면 좋을 것입니다. – JohnP
그래, 나는 생각했다. 내가 뭔가를 설정할 수 있는지 보자. –