jQuery Cycle 2 Responsive w/Centered Slides

Question

Próbuję skonfigurować galerię obrazów responsywnych za pomocą doskonałej wtyczki jQuery Cycle 2. Galeria będzie zawierała zarówno zdjęcia pionowe, jak i krajobrazowe.

Używam Centered opcję Slajdy (pracy2 w Centrum wtyczki: http://jquery.malsup.com/cycle2/demo/center.php) i wydaje się to być przyczyną problemów w przeglądarkach WebKit (próby zmiany rozmiaru okna przeglądarki, jeśli nie jest to widoczne na pierwszy!)

http://goo.gl/NFFZk

Zielone tło przedstawia kontener cyklu.

Bez opcji dodanych Center (data-cykl-center-horz = true danych cykl-center-vert = true) całość działa dobrze, patrz:

http://goo.gl/p76wi

nie mogę pracować co powoduje problemy z wyśrodkowaną wersją.

kod CSS na obrazach jest dość minimalne: CSS

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

zawierający elementu jest tutaj

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

Wiele z góry dzięki za wszelką pomoc!

Answer 1

Po przejrzeniu przykładu, który nie współpracuje, wygląda na to, że style inline mogą powodować pewne bóle głowy. Oto HTML odwołuje się do drugiego obrazu (ryba 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"> 

Chodzi tu zauważyć byłby własnością margin-left który jest ustawiony na 205px. Aby wyśrodkować dynamiczne lub czułe obrazy, wymagana jest odrobina matematyki. Aby to osiągnąć, musisz użyć wartości , które można odliczyć. Ustawienie obrazu na left: 50% spowoduje wyrównanie lewej strony obrazu do środka kontenera. Kiedy już tam będziesz używał ujemnej wartości margin-left o połowie szerokości, aby umieścić obraz w prawdziwym środku. (Np, jeśli szerokość obrazem jest 80px, to użyłby CSS left: 50%; margin-left: -40px;

Answer 2

Pobierz nieskompresowanego wersję wtyczki cyklu. http://malsup.github.io/jquery.cycle2.center.js

Zmiana linii 17 (dodaj obciążenie do listy wydarzeń który wyzwala zmianę rozmiaru):

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

To będzie naprawić dziwne problemy przypadkowy, skupiając się na przeglądarkach WebKit

ja op. ened an issue do tego na github malsup. Mam nadzieję, że wkrótce pojawi się to w opublikowanej wersji.

Answer 3

Oto kolejna opcja.

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