jQuery cycle plugin, centering image in div

Question

Hi,

I'm looking to use the JQuery cycle plugin to cycle through a set of images. All of the images are different sizes and I'd like them to all be centered inside the container "slideshow" DIV and use the "Fade" transition, rather than the default top left.

I have added a 'Before' callback, where I set the Top and Left of the object before loading, using the following code:

function onBeforeGallerySlide(){
  //Get image size
  var imgHeight = $(this).height();
  var imgWidth = $(this).width();

  //Get container size
  var slider = $(this).parent();
  var containerHeight = slider.height();
  var containerWidth = slider.width();

  var top = Math.floor((containerHeight / 2) - (imgHeight / 2));
  var left = Math.floor((containerWidth / 2) - (imgWidth / 2));

  $(this).css({"top" : top,"left" : left});
}

This works to centre the first image but no images after that, I think this is because the "Fade" transition uses the beforeCSS property to set Top and Left to 0 before transitioning. Without messing about with the plugin code is it possible to override this beforeCSS with the appropriate values?

I could manually set the beforeCSS property but I can't see how this would work as the value would be different for each image.

Any suggestions?

Answer 1

Sample of what you're requesting, from the cycle-plugin's author. http://jquery.malsup.com/cycle/test/nov20.html He uses a similar technique to what you're doing, but sets the margin-left and margin-top properties instead of the top and left properties... How does that work out for you?