画像ギャラリーを実装できる「Galleria」
![](http://kwski.net/blog/wp-content/uploads/2013/05/n__1002-552x270.jpg)
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など、色々ずらしていってもできます。
強引にやってみましたが、いい方法をご存知の方がいらっしゃればご教授いただければと思います。
関連記事
-
-
jqPlot - Legend(凡例) オプション
jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト
-
-
画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」
「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ
-
-
バリデーション プラグイン
Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2
-
-
マウスオーバーでキャプション表示してくれる プラグイン
画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
-
テキストに装飾効果を付けるプラグイン
Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa
-
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
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を使っている部分の写真の表示のしかた(横と縦の写真)のようにするにはどうしたらいいですか?
コメントありがとうございます。
ご質問の内容ですが、
画像をクリックすると別ウィンドウを開きその中で画像ギャラリーを展開する という部分でよろしいでしょうか?