jQuery Cycle 2 Responsive w/Centered Slides

Question

Sto tentando di impostare una galleria di immagini reattiva usando l'eccellente plugin jQuery di Cycle 2. La galleria mostrerà sia le immagini verticali che quelle orizzontali.

Sto usando l'opzione Slides Centrato (Centro dei plugin di Cycle2: http://jquery.malsup.com/cycle2/demo/center.php) e questo sembra essere la causa dei problemi nei browser Webkit (provare a ridimensionare la finestra del browser, se questo non è evidente a prima!)

http://goo.gl/NFFZk

Lo sfondo verde rappresenta il contenitore del ciclo.

Senza le opzioni Centro aggiunto (-ciclo di dati-centro-HORZ = true dati-ciclo-centro-vert = true) il tutto funziona bene, vedi:

http://goo.gl/p76wi

non riesco a lavorare fuori ciò che sta causando i problemi con la versione centrata.

Il codice CSS sulle immagini è piuttosto minimale: CSS

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

del elemento che contiene è qui

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

Molte grazie in anticipo per qualsiasi aiuto!

Answer 1

Dopo aver esaminato l'esempio che non sta collaborando, sembra che gli stili in linea siano ciò che potrebbe causare alcuni mal di testa. Ecco il codice HTML di riferimento per la seconda immagine (il pesce koy):

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

La cosa da notare qui sarebbe la proprietà margin-left che è impostato su 205px. Per mostrare immagini dinamiche o reattive centrate, è necessario un po 'di matematica. Per fare ciò è necessario utilizzare gli offset . L'impostazione dell'immagine su left: 50% allineerà il lato sinistro dell'immagine al centro del contenitore. Una volta lì, utilizzerai uno margin-left negativo di metà della larghezza per mettere l'immagine nel vero centro. (Ad esempio, se la larghezza dell'immagine è 80px, allora si può usare il CSS left: 50%; margin-left: -40px;

Answer 2

Prendi la versione non compressa del plugin ciclo:. http://malsup.github.io/jquery.cycle2.center.js

Change linea 17 (aggiungere carico alla lista degli eventi che innesca ridimensionare):

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

questo risolverà i problemi di centratura casuale strani sul browser WebKit

I op. ened an issue per questo sul github di malsup. Spero che questo si faccia presto strada nella versione pubblicata.

Answer 3

Ecco un'altra opzione.

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