2013/03/06
今までで一番高機能かもしれないjQueryプラグインのスライドショー「camera」
タイトル通り、今まで見てきた中で、一番高機能なスライドショーかもしれません。
機能が豊富で、その設定もそこまで難しくないということで、
使いやすいプラグインです。
レスポンシブにも対応しており、
動画を組み込んだり、フルスクリーンにもできたりします。
簡単に特徴をあげると、
・スライドアニメーションのエフェクトが豊富
・スキン(カラー)が豊富にある
・サムネイル、ナビゲーション、ページング等の設定がいろんなパターンに対応
・レスポンシブ対応
・スライドのローダーが付いている
・キャプションが付けられる
といったところでしょうか。
ローダーが付いているのは、今までにほとんど見たことなかったので、
けっこういいですね。
ただ、html5なので、ieはそこまで対応していないかもしれません。
（いけてie8くらいまでかな）
デモを作成したので、ぜひ見てみてください。
サムネイルは自分で作成しなきゃいけないのがちとめんどくさいですね・・・
それでは、使い方ご説明します。
cameraの使い方
まず、head内にjQueryとcssを読み込みます。
|
1 2 3 4 5 | <link type="text/css" href="css/camera.css" rel="stylesheet" media="all" /> <script src="js/jquery.min.js"></script> <script src='js/jquery.easing.1.3.js'></script> <script src='js/jquery.mobile.customized.min.js'></script> <script src="js/camera.js"></script> |
jQueryの設定は、
|
1 2 3 4 5 | <script type="text/javascript"> jQuery(function(){ jQuery('#slide').camera();//任意のセレクタですが、今回は#slideにしています }); </script> |
でOKです。
jQueryの部分は$ではダメみたいです。
html
あとはhtmlを
|
1 2 3 4 5 6 | <div class="camera_wrap" id="slide"> <div data-src="sample1.jpg"></div> <div data-src="sample2.jpg"></div> <div data-src="sample3.jpg"></div> <div data-src="sample4.jpg"></div> </div> |
camera.cssに33種類のスキンが用意されていてそれを設定するには、
|
1 2 3 4 5 6 | <div class="camera_wrap camera_blue_skin" id="slide"> <div data-src="sample1.jpg"></div> <div data-src="sample2.jpg"></div> <div data-src="sample3.jpg"></div> <div data-src="sample4.jpg"></div> </div> |
classを設定するだけでOKです。
他には下記のものがあります。
|
1 2 3 4 5 6 7 8 9 10 11 | camera_amber_skin | camera_ash_skin | camera_azure_skin camera_beige_skin | camera_black_skin | camera_blue_skincamera_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 |
これだけでOKです！
そしてこのスライダーの魅力のオプションが以下になります。
cameraのオプション
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | alignment: 'center' //写真を表示する位置 topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight autoAdvance: true //スライドアニメーションの自動スタート mobileAutoAdvance: true //スライドの自動スタートモバイル版 barDirection: 'leftToRight' //ローダーのバーの進行方向 'leftToRight', 'rightToLeft', 'topToBottom', 'bottomToTop' barPosition: 'bottom' //ローダーのバーの位置 cols: 6 //エフェクト効果の列の数 easing: 'easeInOutExpo' //イージングの変更 fx: 'random' //スライドアニメーションのエフェクト いっぱいあるので割愛します・・・ gridDifference: 250 height: '50%' hover: true //スライドにホバーするとアニメーションストップ imagePath: 'images/' //プラグイン関係の画像のパス loader: 'pie' //ローダーのタイプ pie, bar, none loaderColor: '#eeeeee' ローダーの色 loaderBgColor: '#222222' ローダーの背景の色 loaderOpacity: .8 //ローダーの透過度 loaderPadding: 2 //ローダーのパディング loaderStroke: 7 //ローダーの線の太さ minHeight: '200px' //最小高さ navigation: true //次へ、前へのリンク有無 navigationHover: true //ホバーでナビゲーションを表示、非表示 mobileNavHover: true opacityOnGrid: false overlayer: true pagination: true //スライドのページネーションの有無 playPause: true //ストップボタンの有無 pauseOnClick: true //スライドをクリックするとスライドショーを止める pieDiameter: 38 //ローダーの円のサイズ piePosition: 'rightTop' //ローダーの円の位置 portrait: false // rows: 4 //エフェクト効果の行の数 slicedCols: 12 //エフェクト効果スライスの列の数 slicedRows: 8 //エフェクト効果スライスの行の数 slideOn: 'random' thumbnails: false //サムネイルの有無 time: 7000 //スライドの表示時間 transPeriod: 1500 //スライドアニメーションの時間 |
プラグインのダウンロードは下記からどうぞ！
サンプルのソースも載せておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link type="text/css" href="css/camera.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type='text/javascript' src='js/jquery.easing.1.3.js'></script> <script type='text/javascript' src='js/jquery.mobile.customized.min.js'></script> <script type="text/javascript" src="js/camera.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('#slide1').camera(); jQuery('#slide2').camera({ loader: 'bar', thumbnails: true, hover:false }); jQuery('#slide3').camera({ loader: 'bar', thumbnails: true, pagination: false, barPosition: 'top', hover: false, navigation: false, playPause: false }); }); </script> </head> <body class="DIRNAME" id="FILENAME"> <h3>通常のタイプ</h3> <div class="camera_wrap camera_blue_skin" id="slide1"> <div data-src="sample1.jpg" data-thumb="sample1-min.jpg"></div> <div data-src="sample2.jpg" data-thumb="sample2-min.jpg"></div> <div data-src="sample3.jpg" data-thumb="sample3-min.jpg"></div> <div data-src="sample4.jpg" data-thumb="sample4-min.jpg"></div> </div> <h3>サムネイル有り、ローダー違うver、キャプション有り</h3> <div class="camera_wrap camera_lime_skin" id="slide2"> <div data-src="sample1.jpg" data-thumb="sample1-min.jpg"> <div class="camera_caption fadeFromBottom"> キャプションがここに入ります。classで設定変更できます。 </div> </div> <div data-src="sample2.jpg" data-thumb="sample2-min.jpg"> <div class="camera_caption fadeFromTop"> キャプションがここに入ります。classで設定変更できます。 </div> </div> <div data-src="sample3.jpg" data-thumb="sample3-min.jpg"> <div class="camera_caption fadeFromLeft"> キャプションがここに入ります。classで設定変更できます。 </div> </div> <div data-src="sample4.jpg" data-thumb="sample4-min.jpg"> <div class="camera_caption fadeFromRight"> キャプションがここに入ります。classで設定変更できます。 </div> </div> </div> <h3>サムネイル表示、ローダーの位置を上に、ナビゲーション無し、ホバー無効</h3> <div class="camera_wrap camera_orange_skin" id="slide3"> <div data-src="sample1.jpg" data-thumb="sample1-min.jpg"></div> <div data-src="sample2.jpg" data-thumb="sample2-min.jpg"></div> <div data-src="sample3.jpg" data-thumb="sample3-min.jpg"></div> <div data-src="sample4.jpg" data-thumb="sample4-min.jpg"></div> </div> </body> </html> |
Author Profile
スターフィールド編集部
SHARE
