jQueryサイクル2レスポンシブ/センタスライド

Question

優れたCycle 2 jQueryプラグインを使用してレスポンシブな画像ギャラリーを設定しようとしています。ギャラリーには、ポートレートと風景の両方の画像が表示されます。

私が中心のスライドオプション（CYCLE2のセンタープラグイン：http://jquery.malsup.com/cycle2/demo/center.php）を使用しています（これが最初では明らかでない場合は、ブラウザのウィンドウをリサイズしてみてください！）、これはWebkitのブラウザで問題を引き起こしているように思わ

http://goo.gl/NFFZk

緑の背景はサイクルコンテナを表します。追加中央のオプションなし

（データ・サイクルセンター - HORZ =真のデータ・サイクル・センター・ヴェール=真）全部がうまく機能している、次を参照してください。

http://goo.gl/p76wi

私は働くことができません中心に置かれたバージョンの問題の原因を突き止める。

画像上のCSSコードはかなり最小限です：

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

含む要素のCSSは、ここでは任意の助けを事前に

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

感謝です！

Answer 1

協力していないあなたの例を見直した後、インラインスタイルが頭痛を引き起こす可能性があるように見えます。ここでは第二の画像（koy魚）のために参照HTMLは次のとおりです。

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

ここで注意すべき事は205pxに設定されているmargin-leftプロパティになります。ダイナミックまたは反応性のある画像を中央に表示するには、少しの計算が必要です。これを達成するには、オフセットを使用する必要があります。画像をleft: 50%に設定すると、画像の左側がコンテナの中央に揃えられます。一旦そこに入ると、幅の半分の負のmargin-leftを使用して、イメージを真の中心に置くでしょう。画像の幅が80pxある場合（例えば、あなたはCSS left: 50%; margin-left: -40px;を使用することになり

Answer 2

をサイクルプラグインの非圧縮バージョンを取得：。 http://malsup.github.io/jquery.cycle2.center.js

変更ライン17を（イベントのリストに負荷を追加しますそれは）サイズを変更トリガ：

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

これは、WebKitのブラウザで奇妙なランダムなセンタリングの問題を修正します

I OP。マッシュアップギターでこのためにan issueをenedしてください。うまくいけば、これはすぐに公開されたバージョンに向かうだろう。

Answer 3

別のオプションがあります。

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