[JS]表示サイズにあわせて最適なレイアウトを提供する高性能なスライドショーのスクリプト -Camera

表示サイズに合わせて、スライドショー自体のサイズやサムネイルなどを最適な状態で提供するスライドショーを実装するjQueryのプラグインを紹介します。

もうすぐ始まるIEの自動アップデートのIE8にも対応しています。

Camera | a free jQuery slideshow by Pixedelic

[ad#ad-2]

• Cameraのデモ
• Cameraの使い方

Cameraのデモ

デモは上記のトップにあるものと、他に3種類のスライドショーがあります。
トップのものが一番シンプルで、Cameraの基本性能を楽しめます。

画像の切り替えには、美しいアニメーションが採用されています。

トップのデモでは自動・手動再生が可です。
下部のページネーションは、アニメーションでふわりとサムネイルが表示されます。

[ad#ad-2]

トップ以外の3種類のデモもご紹介。

デモ：Basic

ベーシックなタイプとサムネイル付きのスライドショー。

デモ：Features

動画、HTML5の独自属性で実装したスライドショー。

デモ：Fullscreen

フルスクリーンタイプのスライドショー。

Cameraの使い方

Cameraで使用する基本的なHTMLの構造から。

HTML

div要素にHTML5の独自属性で「data-src」を使い、画像を配置します。

<div class="camera_wrap">
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_2.jpg"></div>
</div>

外部ファイル

「jquery.js」をはじめ下記のスクリプトを外部ファイルとして記述します。
※全スクリプトはダウンロードファイルに含まれています。

<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>

JavaScript

jQueryのセレクタで画像を内包するdiv要素を指定します。

jQuery('#camera_wrap').camera({});

オプションを使用する場合は、下記のようになります。
例：高さ：400px、ローダー：バー、ページネーション：有り、サムネイル：有り

jQuery('#camera_wrap').camera({
	height: '400px',
	loader: 'bar',
	pagination: false,
	thumbnails: true
});

CSS

用意されている「camera.css」には33種類のスキンが用意されており、アイコンに異なるカラーを与えます。
自分専用のスキンもこのスタイルシートを編集することで簡単にできます。