画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。

ダウンロードはこちらから(バージョン:1.4.2)
CDNを使用する場合はこちらから使用できます。(cdnjs)

スクリプト

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="galleria-1.4.2.min.js"></script>

実装

画像表示は通常通りでid('#gallery')を付与する

<div id="gallery">
    <img alt="海員閣" src="5080/6914709574_defcfa39d1_n.jpg">
    <img alt="中華街" src="5467/7060789027_8e000d5a12_n.jpg">
    <img alt="高徳院" src="5272/6914696188_79dc0d4387_n.jpg">
</div>

ギャラリー作成

<script type="text/javascript">
// テーマをロード
Galleria.loadTheme( 'themes/classic/galleria.classic.min.js');

// オプション
option = {
    width:  700,              // 幅
    height: 467,              // 高さ
    imageCrop: true,          // 画像のクロップ有無
    // true:width/heightにフィットさせるように画像を切り取って表示
    // false:画像を全体表示させるように縮小
    transition: 'fade',       // 画像の遷移イフェクト
    _toggleInfo: false,       // imgのalt属性を取得してキャプションとして表示
    // true:キャプションの非表示 
    // false:キャプションの表示
}

// ギャラリー作成
Galleria.run( '#gallery', option);
</script>
  • Galleria.loadTheme
    ギャラリーのテーマ(galleria.classic.min.js)を読み込みます。**スクリプトのパスは適宜置き換えて下さい。テーマは色々と用意されているみたいです。(classic以外は有料)
  • option
    オプションを指定します。ギャラリーのサイズとなるwidthとheightは最低限指定して下さい。
  • Galleria.run('#div', option);
    おまじないです

デモ

こちら
IE7+, FF3+, Opera 11+, Chrome 9+, Safar 4+ and Mobile Safari

また、"Fatal error: Could not extract a stage height from the CSS. Traced height: 0px." というエラーがでていたのですが、いつの間にかでなくなりました。どんなときにでるのだろうか。。。

オプション・カスタマイズ

レスポンシブ化

Galleriaはデフォルトでレスポンシブ対応していて、設定は必要ありません。ギャラリーの幅を指定する場合は、divのstyleにwidthをパーセンテージで指定して下さい。デモ

option = {
    height: 0.5,        // ギャラリー全体の縦横比 (横1に対して縦の比率を設定)
    maxScaleRatio: 1,   // 画像のスケールアップ度を設定(1に設定するとオリジナルより伸張させない)
    _toggleInfo: false, // キャプションの表示(false:表示)
}

画像とサムネイルの間にキャプションを表示

デモ (+コード)
JSの変更部分は、実際にギャラリー内の各骨組み部分を生成する部分で、キャプションの部分である'info'(.galleria-info)を'thumbnails-container'(.galleria-thumbnails-container)内に入れ込みます。Galleria DOM Structureを参照

CSSの変更部分は、.galleria-stage(画像表示部分)のbottomをキャプション挿入(.galleria-info)分上げます。その分、.galleria-thumbnails-containerの高さを上げます。そして、.galleria-infoのpositionのabsoluteをはずしてください。

画像のインラインにキャプションを表示

デモ (+コード)
キャプションの各要素であるgalleria-info-text, galleria-info-text, galleria-info-descriptionなど、色々ずらしていってもできます。

強引にやってみましたが、いい方法をご存知の方がいらっしゃればご教授いただければと思います。

  • このエントリーをはてなブックマークに追加

関連記事

ページ内のフォントサイズを変更してくれる「Text Resizer」

「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j

画像ズーム プラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。

マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト

カウントダウン プラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ

no image

シンプルな画像スライダー/ギャラリー用プラグイン

スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン

ページの画像を非同期で読み込んでくれる「Lazy Load」

「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN

わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」

サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし

Comment

    • コメントありがとうございます。
      ご質問の内容ですが、
      画像をクリックすると別ウィンドウを開きその中で画像ギャラリーを展開する という部分でよろしいでしょうか?

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

PAGE TOP ↑