[jQuery] Re: Cycle plugin: centering images of variable width?

[David Collins]

Thanks for the reply, Mike.  It never occurred to me to cycle
something other than the actual image.  I will take a look at this
approach.

-David

[jQuery] Cycle plugin: using the addSlide option for multiple slideshows on the page?

[David Collins]

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

[jQuery] Cycle plugin: centering images of variable width?

[David Collins]

I didn't see this as an option, so I decided to give it a try on my
own.  I was able to add some lines of code (shown with the  in the
margin below) to the jquery.cycle.js script to read in the width of
each image and center the slide within the slideshow container

// set position and zIndex on all the slides

// read in each image's width and center it wrt the slideshow width
   $slides.each(function(i){
   var imgwidth = $(this).attr(width);
   $(this).css('left', (opts.width-imgwidth)/2);
   });


$slides.css({position: 'absolute', top:0}).hide().each(function(i)
{  // removed the top value since it is being defined above
var z = first ? i = first ? els.length - (i-first) : first-i :
els.length-i;
$(this).css('z-index', z)
});


This works great for images that are pre-defined in the markup, but
when I use the addSlide option, the newly added slides do not get
modified in the above code.  Any suggestions on where I can put this
chunk of code so that it gets run *after* the slides are added to the
slideshow?  Should I get the img width and define the left position
for each slide during the actual cycle function, or maybe during the
// reset common props before the next transition section?

Any help would be appreciated.

Thanks,

-David