画像ギャラリーを実装できる「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にアップデートされたため刷

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

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

Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」

「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン

no image

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

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

no image

[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」

「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト

no image

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

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

レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready

Bootstrap Modal + 拡張機能が実装できるプラグイン

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。

レスポンシブ対応の画像スライダー・ギャラリー用プラグイン

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

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

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

Comment

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

Message

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

*

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

    PAGE TOP ↑