2

最近、プロジェクトで Camers スライドショーを作成しました。すべての機能が正常に動作しています。しかし、固定の高さと幅でスライド div の外にキャプションを表示したい。私を助けてください。以下は私のコードです。

<script type="text/javascript">
    jQuery(function () {
        jQuery('#camera_wrap_3').camera({
            height: '56%',
            hover: true,
            time: 1000,
            fx: 'scrollLeft',
            pagination: false,
            thumbnails: true,
            imagePath: '../images/'
        });

    });
</script>

<div class="fluid_container">
        <p>Videos, HTML elements and data- attributes</p>
        <div class="camera_wrap camera_emboss" id="camera_wrap_3" style="height: 180px !important;">
            <div data-thumb="AutoSlider/Images/big_bunny_fake.jpg" data-src="AutoSlider/Images/SmallThumbs/big_bunny_fake.jpg">
                <div style="position: absolute; top: 5%; left: 5%; background: #000; color: #fff; padding: 5px; width: 25%" class="fadeIn camera_effected">
                    Content1
                </div>
            </div>
            <div data-thumb="AutoSlider/Images/leaf.jpg" data-src="AutoSlider/Images/SmallThumbs/leaf.jpg">
                <div style="position: absolute; top: 5%; left: 5%; background: #000; color: #fff; padding: 5px; width: 25%" class="fadeIn camera_effected">
                    Content2
                </div>
            </div>
            <div data-thumb="AutoSlider/Images/road.jpg" data-src="AutoSlider/Images/SmallThumbs/road.jpg" data-time="1500" data-trasperiod="4000" data-link="http://www.google.com/" data-target="_blank">
                <div class="camera_caption fadeFromBottom">
                    Content3

                </div>
            </div>
        </div>
    </div>
4

2 に答える 2

0

私はパーティーに少し遅れていることを知っていますが...

このプラグインを使用してすぐに使用できる簡単な方法はないため、スライドが変更されるたびに内容を div に変更するだけで済みます。

http://www.pixedelic.com/plugins/camera/によると:

Camera 1.3.0 以降、次の方法でコールバックを使用して現在のスライダーのインデックスを取得できます。

onLoaded: function(){
  var ind = t.find('.camera_target .cameraSlide.cameranext').index();
}

onLoadedまたは関数ではonStartTransition、遷移先のスライドに基づいて、ページ上の好きな場所に配置した div のテキストを設定するだけです。

このようなことを行う方法を示すためにjsFiddleを作成しましたが、

基本的に、コード ロジックは次のようになります。

$('#camera_wrap_3').camera({

    // camera setup here

    onLoaded: function(){
      var slide = $('.camera_target .cameraSlide.cameranext').index();
        if(slide == 1){
            $('#textbox').text('1980');
        } else if (slide == 2){
            $('#textbox').text('2008');
        } else if(slide == 3) {
            $('#textbox').text('2009');
        }
    }        
});

うまくいけば、将来これに出くわした人に役立ちます！

于 2014-04-15T05:34:09.953 に答える