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
