画像ギャラリーを実装できる「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など、色々ずらしていってもできます。
強引にやってみましたが、いい方法をご存知の方がいらっしゃればご教授いただければと思います。
関連記事
-
-
テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」
「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」
「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン
-
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
-
-
iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」
「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装
-
-
Wysiwygエディタ用プラグイン「CKEditor」
「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表
-
-
スワイプ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b
-
-
Lightboxプラグイン「Boxer」
「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ
-
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
-
-
バリデーション プラグイン
Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2
Comment
jqueryの手引き1
こう言うやつにしたいのよ 画像ギャラリーを実装できる「Galleria」 http://t.co/9c6mupg20u
“jQuery: 画像ギャラリーを実装できる「Galleria」 | Think deeply, Do less, More effective” http://htn.to/eAhEVx
初めましてお訪ねしたいのですが
http://www.craftdesign.co.jp/reform_mansion_1.html
のgalleriaを使っている部分の写真の表示のしかた(横と縦の写真)のようにするにはどうしたらいいですか?
コメントありがとうございます。
ご質問の内容ですが、
画像をクリックすると別ウィンドウを開きその中で画像ギャラリーを展開する という部分でよろしいでしょうか?