Geek Answers Handbook

JQuery Cycle 2 Responsive with Centered Slides

I am trying to set up a responsive image gallery using the excellent jQuery plugin of cycle 2. Both portrait and landscape images will be presented in the gallery.

I am using the Centered Slides parameter (Cycle2 Center plugin: http://jquery.malsup.com/cycle2/demo/center.php ) and this seems to cause problems in Webkit browsers (try resizing the browser window if this is not obvious at first!)

http://goo.gl/NFFZk

The green background is a loop container.

Without adding additional center parameters (data-cycle-center-horz = true data-cycle-center-vert = true) everything works fine, see

http://goo.gl/p76wi

I cannot decide what causes 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 CSS element 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%; }

Thanks so much for any help!

+6
source share
3 answers

Here is another option.

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

After looking at your example that does not interact, it seems that inline styles are something that can cause you some headaches. Here is the HTML link for the second image (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 margin-left property, which is set to 205px should be noted 205px . It takes a little math to show dynamic or sensitive images centered. You will need to use offsets for this. Setting the image to left: 50% will align the left side of the image to the middle of the container. After that, you will use a negative margin-left with half width to place the image in the real center. (For example, if the image width is 80px , then you should use CSS left: 50%; margin-left: -40px;

0
source

Get the uncompressed version of the loop plugin: http://malsup.imtqy.com/jquery.cycle2.center.js

Change line 17 (add load to the list of events that cause resizing):

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

This will fix strange random centering issues in webkit browsers.

I opened the problem for this in malsup github. Hopefully this will work soon in the published version.

0
source

More articles:


All Articles