I'm working on a portfolio script which uses dynamic sorting of elements. I have a list of items on the page which can be sorted with jquery. When the user clicks on one of those elements, a large image loads in a specific div on the page. There is a default image loaded at first. What I'd like to do is use slides.js by Nathan Searles to create a slideshow of 2 to 3 images. The issue I'm having is re-calling the script after a new set of images have been loaded into the div. Here's the base code which loads the items in the div.
<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();
So, based on this example of code (I may have missed some pieces but hopefully you'll get the idea), The initial div loads up the sli开发者_StackOverflow社区des.js script to create a nice slideshow. Whe the user clicks on one of the items in the ul.webbies, a new set of images is loaded into #slidesTarget. What I need to do is re-set the slides.js script to create the slideshow based on the new list of images. Hope this makes sense. Thanks in advance for any help/suggestions.
Well, this depends on the plugin your're using and what kind of hooks they allow. jquery Cycle, which I use a lot, allows you to dynamically add slides once it's initialized. Can you give a link to the plugin you're using?
jquery Cycle : http://jquery.malsup.com/cycle/
EDIT Ok noticed the plugin.
Can't you just reinitialize the plugin on the container after you've added the slides to slides_container? Just call $("#slidesTarget").slides();
精彩评论