jQuery Cycle 2 Responsive w/ Centered Slides

Question

I'm attempting to set up a responsive image gallery using the excellent Cycle 2 jQuery plugin. The gallery will feature both portrait and landscape images.

I am using the Centered Slides option (Cycle2's Center plugin: http://jquery.malsup.com/cycle2/demo/center.php) and this seems to be causing problems in Webkit browsers (try resizing your browser window if this isn't apparent at first!)

http://goo.gl/NFFZk

The green background represents the cycle container.

Without the center options added ( data-cycle-center-horz=true data-cycle-center-vert=true ) the whole thing is working well, see:

http://goo.gl/p76wi

I cannot work out what is causing the problems with the centered version.

The CSS code on the images is pretty minimal:

.cycle-slideshow img {
    max-height: 100%;
    max-width: 100%;
}

The containing element's CSS is here

.cycle-slideshow {
    background: green;
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin:20px auto;
    padding:0;
    width:80%;
    }

Many thanks in advance for any help!

Herophilus

I don't think you're supposed to use centering with images that are larger than the container. Probably the problem is that the slideshow is starting before all the (very large) images are loaded. Try wrapping your code in $(window).on('load',function(){...}) to circumvent this. – Thoroughbred

Answer 1

Here's another option.

$('.cycle-slideshow').on('cycle-initialized', function( event, opts ) {                
    $(window).trigger('resize');
});

Bleach

Answer 2

After reviewing your example which is not cooperating, it appears as if the inline-styles are what could be causing you some headaches. Here is the HTML referenced for the second image (the koy fish):

<img src="http://www.freeimageslive.com/galleries/nature/animals/pics/nishikigoi.jpg" style="position: absolute; top: 0px; left: 0px; z-index: 99; display: block; margin-left: 205px; opacity: 1;" class="cycle-slide cycle-slide-active">

The thing to note here would be the margin-left property which is set to 205px. To show dynamic or responsive images centered, a bit of math is required. You will need to use offsets to accomplish this. Setting the image to left: 50% will align the left-hand-side of the image to the middle of the container. Once there, you will use a negative margin-left of half the width to put the image into the true center. (E.g., if the image's width is 80px, then you would use the CSS left: 50%; margin-left: -40px;.

Suspicious

Answer 3

Get the uncompressed version of the cycle plugin: http://malsup.github.io/jquery.cycle2.center.js

Change line 17 (add load to the list of events that triggers resize):

$(window).on( 'resize orientationchange load', resize );

This will fix weird random centering issues on webkit browsers.

I opened an issue for this on the malsup github. Hopefully this will work its way into the published version soon.

Starla