0

Fancybox プラグインで jQuery Cycle プラグインを使用しようとしています。この時点でほとんどすべてが機能しています。fancybox が開き、コンテンツが表示され、コンテンツが循環します。私が直面している問題は、コンテナーが画像に合わせて自動的にサイズ変更されないことです。私が持っているコード:

<script type="text/javascript" src="/assets/scripts/jquery.cycle.lite.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#launcher").fancybox({
        autoScale: true
    });
})
$(function(){
    $('#slides').cycle({ 
    timeout:    8000,
    speed:      1000,
    pause: true,
    containerResize: 1,
    fit: 1
    });
});
</script>

   <div id="launcher">
      <div id="slides">
          <img src="/assets/images/VideoSlides/slide1.png">
          <img src="/assets/images/VideoSlides/slide2.png">
          <img src="/assets/images/VideoSlides/slide3.png">
      </div>
   </div>

ご覧のとおり、さまざまな属性を関数に追加して強制的に自動サイズ調整しようとしましたが、効果はありませんでした。いずれかの div のスタイルを設定すると、それに応じてフレームのサイズが変更されますが、フレームを固定サイズにしたくないです。誰かが前にこのようなことをしましたか?

4

1 に答える 1

1

Cycleが次の画像を変更する前にfancyBoxのサイズが変更されるように、これら2つのプラグインを組み合わせる簡単な解決策はないと思います。

しかし、fancyBox2にはすでにスライドショーが組み込まれているので、代わりにそれを使用してみませんか？「autoPlay」オプションを使用して開始時にアクティブにし、「playSpeed」を使用して速度を変更できます。簡単な例：

$("#launcher").click(function() {

    $.fancybox.open( $("#slides img"), {
        autoPlay   : true,
        playSpeed  : 2000,
        prevEffect : 'fade',
        nextEffect : 'fade'
    });

    return false;
});

参照-http：//jsfiddle.net/3SQt4/

于 2012-11-02T23:01:03.017 に答える