[JS]直感的な操作性がたのしい、画像ギャラリーのスクリプト -Fotorama

デスクトップだけでなく、iPhoneをはじめとするスマートフォンなど、さまざまなデバイスに対応した画像ギャラリーを実装するjQueryのプラグインを紹介します。

Fotorama

[ad#ad-2]

• Fotoramaの主な特徴
• Fotoramaのデモ
• Fotoramaの実装

Fotoramaの主な特徴

Fotoramaはセットアップも簡単で、直感的な操作性が楽しい画像ギャラリーのスクリプトです。

メインの画像をスライドするにはいくつかの方法が用意されています。

• 矢印ボタンでメイン画像をスライド
• ドラッグ操作でメイン画像をスライド
• ナビゲーションでメイン画像をスライド
• サムネイルでメイン画像をスライド

サムネイルもドラッグでスライドすることができます。

サムネイルもドラッグでスライド

サムネイルのボーダーはアニメーションで動作し、読み込み時のエフェクトも用意されています。

Fotoramaのデモ

Fotoramaのオプションページでは、さまざまな実装例を見ることができます。

Fotoramaのデモ：サムネイル無し、ナビゲーション有り

Fotoramaのデモ：ドラッグ操作無し

Fotoramaのデモ：デザイン変更
背景・矢印のカラー、サムネイルのサイズ・カラーなど

Fotoramaの実装

外部ファイル

「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして指定します。

    <script src="jquery-1.7.min.js" type="text/javascript"></script>
    <link href="fotorama.css" type="text/css" rel="stylesheet">
    <script src="fotorama.js" type="text/javascript"></script>

[ad#ad-2]

HTML

画像をimg要素で配置し、div要素で内包します。

<div id="fotorama">
	<img src="1.jpg">
	<img src="2.jpg">
	<img src="3.jpg">
</div>

JavaScript

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

<script type="text/javascript">
$(function() {
	$('#fotorama').fotorama();
});
</script>

スクリプトのオプション

Fotoramaのギャラリーのサイズは最初の画像のサイズに依存します。サイズを指定する場合は、オプションで指定します。

$('#fotorama').fotorama({
  width: 700,
  height: 464
});

サムネイル用の小さい画像を用意しておくと、パフォーマンスがよくなります。
サムネイル画像を用意する場合は、下記のように配置します。

<div id="fotorama">
  <a href="1.jpg"><img src="1_preview.jpg"></a>
  <a href="2.jpg"><img src="2_preview.jpg"></a>
  <a href="3.jpg"><img src="3_preview.jpg"></a>
</div>

オプションでは他にも、最初に表示する画像の指定、操作方法、デザインなど、さまざまな設定が行えます。
詳しくは、オプションページをご覧ください。

• Fotoramaのオプション