0

cycle2 スライドショーで画像をトリミングして中央に配置するソリューションに取り組んでいます。

このプラグインを使用して、スライドショーの画像のサイズを変更し、親に中央揃えしています。

私が抱えている問題は、トランジション後に画像を中央に配置していることですが、これにより各スライドが所定の位置に「ジャンプ」します。すべての画像をスライド初期化の中央に配置してサイズを変更する方法が見つからないようです。

function cropSlideImage() {
    $('.cycle-slideshow img').resizeToParent({parent: '.slide'});
}

$( document ).ready(function() {
    cropSlideImage();

   $( '.cycle-slideshow' ).on( 'cycle-update-view', function( event, optionHash, slideOptionsHash, currentSlideEl ) {
      cropSlideImage();
  });
});

http://jsfiddle.net/mwHk4/1/

4

1 に答える 1

1

イメージの親が display:none に設定されている場合、resizeToParent プラグインは機能しません。resizeToParent プラグインは画像がキャッシュされるのを待つため、ほとんどのスライドがすでに display:none に設定されるまで実行されません。

resizeToParent を実行した後、 $('.slideshow').cycle() を使用してプログラムでスライドショーを開始すると、すべてが期待どおりに機能するようです。

function cropSlideImage() {
    $('.slideshow img').resizeToParent();
}

$(document).ready(function() {
    cropSlideImage();
    $('.slideshow').cycle();
});

フィドル！

于 2014-01-16T20:57:32.477 に答える