[jQuery] Cycle plugin: using the addSlide option for multiple slideshows on the page?
I have a page that has 9 tabs of content, with each tab having its own
slideshow of about 8 images each. I was hoping to reduce the load
time of the page by only starting with two images per slideshow, and
then using the addSlide option to add the rest.
A few questions:
1. Is this the best way to go about speeding up the page load?
2. Is there an example somewhere of how to make this work? I used the
code from the demo on the http://jquery.malsup.com/cycle/add.html
page, and inserted some code of my own, but I obviously haven't
wrapped the correct functions with my code because I get *all* of the
images added to the first slideshow instead of to their own respective
slideshows. Here is my code with some of the redundant sections
removed:
$(function(){
$('.slideshowbox div[id]').cycle({ // 9 matches found
width: 539,
height: 225,
timeout: 5000,
speed: 1000,
before: onBefore
});
var slidesAdded = false;
function onBefore(curr, next, opts) {
// make sure we don't call addSlide before it is defined
if (!opts.addSlide || slidesAdded) return;
$('.slideshowbox div').each(function() { // for each slideshow on
the page
var i = $(this).attr('id');
if(i == "slideshow1") {
opts.addSlide('<img src="/storage/images/practical-3.jpg" alt=""
width="223" height="225" />');
opts.addSlide('<img src="/storage/images/practical-4.jpg" alt=""
width="234" height="225" />');
opts.addSlide('<img src="/storage/images/practical-5.jpg" alt=""
width="193" height="225" />');
opts.addSlide('<img src="/storage/images/practical-6.jpg" alt=""
width="246" height="225" />');
opts.addSlide('<img src="/storage/images/practical-7.jpg" alt=""
width="257" height="225" />');
}
else if(i == "slideshow2") {
opts.addSlide('<img src="/storage/images/sensorial-3.jpg" alt=""
width="229" height="225" />');
opts.addSlide('<img src="/storage/images/sensorial-4.jpg" alt=""
width="231" height="225" />');
opts.addSlide('<img src="/storage/images/sensorial-5.jpg" alt=""
width="267" height="225" />');
opts.addSlide('<img src="/storage/images/sensorial-6.jpg" alt=""
width="279" height="225" />');
opts.addSlide('<img src="/storage/images/sensorial-7.jpg" alt=""
width="338" height="225" />');
}
etc...
else if(i == "slideshow9") {
opts.addSlide('<img src="/storage/images/peace-3.jpg" alt=""
width="281" height="225" />');
opts.addSlide('<img src="/storage/images/peace-4.jpg" alt=""
width="287" height="225" />');
opts.addSlide('<img src="/storage/images/peace-5.jpg" alt=""
width="300" height="225" />');
opts.addSlide('<img src="/storage/images/peace-6.jpg" alt=""
width="319" height="225" />');
opts.addSlide('<img src="/storage/images/peace-7.jpg" alt=""
width="366" height="225" />');
}
});
slidesAdded = true;
};
});
Any advice would be helpful as I am a javascript/jquery novice.
Thanks!
-David