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

2013年4月18日木曜日

「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】かっこいいスライドショーまとめ

    0 件のコメント :

    コメントを投稿