画像ギャラリーを実装できる「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など、色々ずらしていってもできます。

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

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

関連記事

タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768

ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」

「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート

カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト

no image

スワイプ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b

開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち

様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)

Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際

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

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

no image

テーブル・リスト要素を便利にしてくれるプラグイン

レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変

「jqPlot」を使って円グラフを作成

Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更

iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」

「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装

Comment

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

Message

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

*

PAGE TOP ↑