木曜日, 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の部分には、すでに用意されている33種類のスキンを使用することができます。CSSファイルを 編集してオリジナルのスキンを作ることも可能です。

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

camera_amber_skin | camera_ash_skin | camera_azure_skin | camera_beige_skin | camera_black_skin | camera_blue_skin | camera_brown_skin | camera_burgundy_skin | camera_charcoal_skin | camera_chocolate_skin | camera_coffee_skin | camera_cyan_skin | camera_fuchsia_skin | camera_gold_skin | camera_green_skin | camera_grey_skin | camera_indigo_skin | camera_khaki_skin | camera_lime_skin | camera_magenta_skin | camera_maroon_skin | camera_orange_skin | camera_olive_skin | camera_pink_skin | camera_pistachio_skin | camera_pink_skin | camera_red_skin | camera_tangerine_skin | camera_turquoise_skin | camera_violet_skin | camera_white_skin | camera_yellow_skin

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


  • 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.
    • drop.スワロフスキー マーキス ピアス (クリスタルパラダイスシャイン)
    • drop.ファーキャッチピアス
    • drop.スワロフスキー ドロップ ピアス
    • drop.スワロフスキー ドロップ ピアス
    • drop.スワロフスキー ドロップ ピアス
    • drop.スワロフスキー ドロップ ピアス
    • drop.スワロフスキー ドロップ フック ピアス
    • drop.スワロフスキー ドロップ フック ピアス
    • drop.スワロフスキー ドロップ フック ピアス
    • drop.チェコガラス ドロップ チェーン ピアス
    • drop.チェコガラス ドロップ チェーン ピアス
    • drop.フレッシュバナナピアス
    • drop.ピアス アリス 三月うさぎ (うさぎ×シルクハット)
    • drop.スエード ブレスレット
    • drop.スエード ブレスレット