jQuery Camera 画像スライドショー

ここではjQuery 画像スライドショーを簡単に実装するCameraプラグインの紹介をしていきます。

camera

デモはこちら
http://office-goto.info/demo/camera/

ダウンロードはこちら
http://www.pixedelic.com/plugins/camera/

headで読み込み

<link href="camera/css/camera.css" rel="stylesheet" type="text/css">
<script src="camera/scripts/jquery.min.js"></script>
<script src="camera/scripts/jquery.mobile.customized.min.js"></script>
<script src="camera/scripts/jquery.easing.1.3.js"></script>
<script src="camera/scripts/camera.min.js"></script>

パラメーターの設定

jQuery(function(){
    jQuery('.camera_wrap').camera({
        autoAdvance: true,        // スライド
        fx: 'simpleFade',         // エフェクト
        loader: 'none',           // ローダータイプ
        loaderColor: '#eeeeee',   // 色
        loaderBgColor: '#222222', // 背景色
        loaderOpacity: .5,        // 透明度
        loaderStroke: 5,          // ストローク
        navigation: false,        // ←→画像
        pagination: true,         // ページネーション
        playPause: false,         // 再生停止切り替え
        time: 3000                // 画像切り替え秒数
    });
});

body

<div class="camera_wrap">
    <div data-src="images1.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption1</em>
        </div>
    </div>
    <div data-src="images2.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption2</em>
        </div>
    </div>
    <div data-src="images3.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption3</em>
        </div>
    </div>
    <div data-src="images4.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption4</em>
        </div>
    </div>
</div>

画像の読み込みにはdata-src=”images1.jpg”を指定して
キャプションを表示させる際はclass=”camera_caption fadeFromBottom”で囲んでください。

fx
‘random’,’simpleFade’, ‘curtainTopLeft’, ‘curtainTopRight’, ‘curtainBottomLeft’, ‘curtainBottomRight’, ‘curtainSliceLeft’, ‘curtainSliceRight’, ‘blindCurtainTopLeft’, ‘blindCurtainTopRight’, ‘blindCurtainBottomLeft’, ‘blindCurtainBottomRight’, ‘blindCurtainSliceBottom’, ‘blindCurtainSliceTop’, ‘stampede’, ‘mosaic’, ‘mosaicReverse’, ‘mosaicRandom’, ‘mosaicSpiral’, ‘mosaicSpiralReverse’, ‘topLeftBottomRight’, ‘bottomRightTopLeft’, ‘bottomLeftTopRight’, ‘bottomLeftTopRight’, ‘scrollLeft’, ‘scrollRight’, ‘scrollHorz’, ‘scrollBottom’, ‘scrollTop’
沢山のエフェクトがあるのでいろいろ試してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*