2

JQueryサイクルプラグインを使用して一連の画像を循環させたいと考えています。すべての画像はサイズが異なり、デフォルトの左上ではなく、コンテナの「スライドショー」DIV内の中央に配置し、「フェード」トランジションを使用するようにします。

次のコードを使用して、ロードする前にオブジェクトの上部と左側を設定する「Before」コールバックを追加しました。

function onBeforeGallerySlide(){
  //Get image size
  var imgHeight = $(this).height();
  var imgWidth = $(this).width();

  //Get container size
  var slider = $(this).parent();
  var containerHeight = slider.height();
  var containerWidth = slider.width();

  var top = Math.floor((containerHeight / 2) - (imgHeight / 2));
  var left = Math.floor((containerWidth / 2) - (imgWidth / 2));

  $(this).css({"top" : top,"left" : left});
}

これは最初の画像を中央に配置するように機能しますが、その後は画像が表示されません。これは、「フェード」遷移でbeforeCSSプロパティを使用して、遷移前にTopとLeftを0に設定するためだと思います。プラグインコードをいじることなく、このbeforeCSSを適切な値でオーバーライドすることは可能ですか？

beforeCSSプロパティを手動で設定することはできますが、値が画像ごとに異なるため、これがどのように機能するかがわかりません。

助言がありますか？

4

2 に答える 2

2

img要素ではなくdivを使用し、background-imageプロパティを設定することで、画像を簡単に中央に配置できます...

<div id="slider">
    <div style="background-image: url(image1.jpg)"></div>
    <div style="background-image: url(image2.jpg)"></div>
    <div style="background-image: url(image3.jpg)"></div>
</div>

...そしてこのシンプルなスタイルを適用する

#slider { width: 800px; height: 600px; }
#slider div { width: 800px; height: 600px; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; }

それが役立つことを願っています（少なくとも新参者;-)）

于 2010-11-11T18:35:48.203 に答える
1

サイクルプラグインの作成者からの、要求しているもののサンプル。http://jquery.malsup.com/cycle/test/nov20.html彼はあなたがしているのと同様のテクニックを使用していますが、topプロパティとleftプロパティの代わりにmargin-leftプロパティとmargin-topプロパティを設定しています...それはあなたにとってどのようにうまくいきますか？

于 2009-06-28T14:22:36.540 に答える