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

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

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

関連記事

no image

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

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

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

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

商用利用フリー Lightbox プラグイン

商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ

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

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

シンプルにモーダルウィンドウを実装できる「leanModal」

「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま

no image

クリックするとテキストボックスにかわるラベルを実装

Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです

no image

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

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

Wysiwygエディタ用プラグイン「CKEditor」

「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

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

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

Comment

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

Message

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑