Center/Crop Images - Responsive Slideshow using Cycle2 plugin

Question

I'm working on a solution to crop and center images in a cycle2 slideshow.

I'm resizing and centering the image in the slideshow to the parent using this plugin.

Problem I'm having is that I'm centring the image after it transitions, but this causes each slide to 'jump' into place. I can't seem to find a way to center all images on slide init, and resize.

function cropSlideImage() {
    $('.cycle-slideshow img').resizeToParent({parent: '.slide'});
}

$( document ).ready(function() {
    cropSlideImage();

   $( '.cycle-slideshow' ).on( 'cycle-update-view', function( event, optionHash, slideOptionsHash, currentSlideEl ) {
      cropSlideImage();
  });
});

http://jsfiddle.net/mwHk4/1/

Answer 1

The resizeToParent plugin will not work if the image parents are set to display:none. Because the resizeToParent plugin waits for images to be cached it will not run until after most of the slides are already set to display:none.

Initiate the slideshow programmatically using $('.slideshow').cycle() after running resizeToParent and everything seems to work as desired.

function cropSlideImage() {
    $('.slideshow img').resizeToParent();
}

$(document).ready(function() {
    cropSlideImage();
    $('.slideshow').cycle();
});

Fiddle!