jQuery Cycle 2 Responsive mit Centered Slides

Question

Ich versuche eine Responsive Bildergalerie mit dem exzellenten Cycle 2 jQuery Plugin zu erstellen. Die Galerie enthält sowohl Hoch- als auch Querformatbilder.

Ich bin mit der Centered Slides Option (CYCLE2 Zentrum Plugin: http://jquery.malsup.com/cycle2/demo/center.php) und das scheint Probleme in Webkit-Browsern zu verursachen (versuchen Sie Ihre Browser-Fenster Größe ändern, wenn dies zunächst nicht offensichtlich ist!)

http://goo.gl/NFFZk

Der grüne Hintergrund repräsentiert den Zyklus Container.

Ohne die Center-Optionen hinzugefügt (Daten-Zyklus-center-horz = true Daten-Zyklus-center-vert = true) die ganze Sache gut funktioniert, finden Sie unter:

http://goo.gl/p76wi

Ich kann nicht arbeiten heraus, was die Probleme mit der zentrierten Version verursacht.

Der CSS-Code auf die Bilder ist ziemlich minimal:

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

Die CSS ist enthalten Element hier

für jede Hilfe

.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%; 
    } 

Vielen Dank im Voraus!

Answer 1

Nach der Überprüfung Ihres Beispiels, das nicht kooperiert, scheint es, als ob die Inline-Stile, was Sie einige Kopfschmerzen verursachen könnte. Hier ist der HTML-Code für das zweite Bild verwiesen (die Koy Fische):

<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"> 

Die Sache hier zu anmerken würde die margin-left Eigenschaft sein, die auf 205px gesetzt. Um dynamische oder reaktive Bilder zentriert darzustellen, ist ein wenig Mathematik erforderlich. Sie müssen Offsets verwenden, um dies zu erreichen. Wenn Sie das Bild auf left: 50% einstellen, wird die linke Seite des Bildes auf die Mitte des Containers ausgerichtet. Sobald Sie dort sind, werden Sie ein negatives margin-left von halber Breite verwenden, um das Bild in das wahre Zentrum zu bringen. (ZB wenn die Bildbreite 80px ist, dann würden Sie die CSS left: 50%; margin-left: -40px; verwenden

Answer 2

Holen Sie sich das nicht komprimierte Version des Zyklus-Plugin. http://malsup.github.io/jquery.cycle2.center.js

Ändern Sie Zeile 17 (add Last in die Liste der Ereignisse dass löst die Größe):

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

Das wird seltsam zufällige Zentrierung Probleme auf webkit-Browsern beheben

I op. Ened an issue für diese auf der Malsup Github. Hoffentlich wird dies bald in die veröffentlichte Version passen.

Answer 3

Hier ist eine weitere Option.

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