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

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

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

関連記事

レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

no image

ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

no image

バリデーション プラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

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

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

no image

日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot

no image

時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2)

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 目次 実装方法 モダール形式 Datepicker

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

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

テキストに動きをつけるプラグイン

テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit

表示パターン豊富なスライダー「flexslider 2」

「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示

no image

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

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

Comment

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

Message

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

*

PAGE TOP ↑