木曜日, 4月 18, 2013

「Camera slideshow」高機能 jQueryスライドショー

高機能過ぎるjQueryスライドショー「Camera slideshow」

The text you need

「Camera slideshow」は細かいところまであらゆる設定ができる高機能のjQueryスライドショーです。

デフォルトの状態でも十分に機能しますが、スキンやエフェクト、メーターの種類やナビゲーション、画像別に見せる時間を変えるなど様々な設定が可能です。

また、レスポンシブ対応しています。設定によってはフルスクリーンでのスライドショーを背景に設定することもできます。動画を組み込むことも可能です。

サンプルを作ってみました。　→　高機能過ぎるjQueryスライドショー「Camera slideshow」サンプル

軽くて使いやすいですので、どの画像ギャラリースライダーを使おうか迷った時の選択肢のひとつに良いと思います。

【使用方法】
まずはこちらのCameraのサイトからファイル一式ダウンロードします。デモを含むZIPファイルを利用するとわかりやすいと思います。

＜head＞部分にcssとJavaScriptを指定します。

   <link rel='stylesheet' id='camera-css' href='css/camera.css' type='text/css' media='all'>
   <script type='text/javascript' src='scripts/jquery.min.js'></script>
   <script type='text/javascript' src='scripts/jquery.mobile.customized.min.js'></script>
   <script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script>
   <script type='text/javascript' src='scripts/camera.min.js'></script>
   <script>
jQuery(function(){
    jQuery('#camera_wrap_test').camera({
    height: '50%',
    });
});
</script>

＜body＞部分にスライドさせる画像を設定します。

<div class="camera_wrap camera_chocolate_skin" id="camera_wrap_test">
   <div data-src="images/image_1.jpg"></div>
   <div data-src="images/image_2.jpg"></div>
   <div data-src="images/image_3.jpg"><div class="camera_caption">The text of your caption</div></div>
</div>

上のソースのcamera_chocolate_skinの部分には、すでに用意されている３３種類のスキンを使用することができます。CSSファイルを編集してオリジナルのスキンを作ることも可能です。

用意されているスキンは以下の通りです。

オプションを設定することで様々なカスタマイズが可能になっています。

alignment: ‘center’ ・・・　topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight

autoAdvance: true　・・・　true, false

mobileAutoAdvance: true　・・・　true, false. Auto-advancing for mobile devices

fx: ‘random’　・・・　’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’

height: ’50%’　・・・　ピクセル,％

loaderColor: ‘#eeeeee’

loaderBgColor: ‘#222222′

loaderOpacity: .8

loader: ‘bar’

※さらに詳しいカスタマイズは元サイト内のoptionsを参考。

最後にサンプルのソースを書いておきますので、どうぞご参考まで。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>高機能過ぎるjQueryスライドショー「Camera slideshow」サンプル</title>
    <link rel='stylesheet' id='camera-css' href='css/camera.css' type='text/css' media='all'>
    <style>
            .fluid_container {
            margin: 0 auto;
            max-width: 1000px;
            width: 90%;
        }
    </style>

    <script type='text/javascript' src='scripts/jquery.min.js'></script>
    <script type='text/javascript' src='scripts/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script>
    <script type='text/javascript' src='scripts/camera.min.js'></script>

    <script>
        jQuery(function(){

            jQuery('#camera_wrap_test').camera({
            height: '50%',
            });

        });
    </script>
</head>

<body>
<div class="fluid_container">

    <div class="camera_wrap camera_chocolate_skin" id="camera_wrap_test">
       <div data-src="images/image_1.jpg"></div>
       <div data-src="images/image_2.jpg"></div>
       <div data-src="images/image_3.jpg"><div class="camera_caption">The text of your caption</div></div>
    </div>
</div>
</body>
</html>

Photo:Michał Halczewski

【jQuery】かっこいいスライドショーまとめ

original handmade accessary drop.