jQueryスライドショー「Camera」

【サンプルデモンストレーション】

レシポンシブ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スライドショープラグインがあるようなので、のぞいてみます。

【参考サイト】
http://www.pixedelic.com/plugins/camera/

Yokohamaya Blog