レシポンシブWebデザインに対応しているスライドショーjQueryプラグインを探してみました。
(必要に迫られて・・・)
「Camera」にたどり着きました。
jQueryの知識がないのですが、コレ、挑戦してみることに!
まず、「Camera」でDownloadさせてもらいました。初心者なので、Demo付きのものを。
サンプルを作ってみることに!
Downloadしたcssとscriptsの各フォルダを全てアップ。
images > slides フォルダ内に、
- yoko1.png
- yoko2.png
- yoko3.png
- yoko4.png
- yoko5.png
の5画像を入れてアップ。
demoフォルダの中にsample.htmlファイルを作成。
</head> の直前に、
<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_sample').camera({ time: 2000, transPeriod: 1500 }); }); </script>
で、
body内に、
<div class="camera_wrap camera_coffee_skin" id="camera_wrap_sample"> <div data-src="../images/slides/yoko1.png"> <div class="camera_caption fadeFromBottom"> ヨコハマちゃん </div> </div> <div data-src="../images/slides/yoko2.png"> <div class="camera_caption fadeFromBottom"> ヨコハマちゃんご機嫌斜め </div> </div> <div data-src="../images/slides/yoko3.png"> <div class="camera_caption fadeFromBottom"> ヨコハマヤちゃん溶ける </div> </div> <div data-src="../images/slides/yoko4.png"> <div class="camera_caption fadeFromBottom"> 溶ける </div> </div> <div data-src="../images/slides/yoko5.png"> <div class="camera_caption fadeFromBottom"> ヨコハマ君 </div> </div> </div>
そして、
出来たのがこちら。
バンザイ!!
(^-^)
スライドショーの左右の矢印や一時停止アイコンの色は33種類用意されてるようでして、「茶色」がよかったので、今回は「camera_coffee_skin」を呼び出してみました。
キャプション(caption)表示のdiv要素に「fadeFromBottom」と記述すると、下からふわっと黒帯が出てくるようになりました。
至れり尽くせりのプラグインでした。
感謝。
< !DOCTYPE html> <!-- Sample --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Sample</title> <meta name="description" content="sample"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel='stylesheet' id='camera-css' href='../css/camera.css' type='text/css' media='all'/> <style> body { margin: 0; padding: 0; } .content { max-width: 1000px; width: 90%; margin-top: 20px; margin-right: auto; margin-bottom: 0; margin-left: auto; } </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_sample').camera({ time: 2000, transPeriod: 1500 }); }); </script> </head> <body> <div class="content"> <div class="camera_wrap camera_coffee_skin" id="camera_wrap_sample"> <div data-src="../images/slides/yoko1.png"> <div class="camera_caption fadeFromBottom"> ヨコハマちゃん </div> </div> <div data-src="../images/slides/yoko2.png"> <div class="camera_caption fadeFromBottom"> ヨコハマちゃんご機嫌斜め </div> </div> <div data-src="../images/slides/yoko3.png"> <div class="camera_caption fadeFromBottom"> ヨコハマヤちゃん溶ける </div> </div> <div data-src="../images/slides/yoko4.png"> <div class="camera_caption fadeFromBottom"> 溶ける </div> </div> <div data-src="../images/slides/yoko5.png"> <div class="camera_caption fadeFromBottom"> ヨコハマ君 </div> </div> </div> </div> </body> </html>
ちなみに今回設定したオプション(options)は、以下の2種類だけですが、
time: 2000 // 1枚のイメージの表示時間 transPeriod: 1500 // 次のイメージに切り替わる時間
他にもたくさんあるようです。
例えば、スライドのエフェクトがランダムじゃない方が良い場合、
fx: 'random' // ここ
ここに、希望のエフェクトを指定すると良いようです。
単純にフェードアウトとフェードインの切り替わりのみで良い場合は、
fx: 'simpleFade' // 希望のエフェクト
(^_^)b
他にもたくさんのjQueryスライドショープラグインがあるようなので、のぞいてみます。