NextGEN GalleryとWP jQuery Lightboxを併用してレスポンシブ対応のギャラリーをつくる | 低価格で作成!充実サポートで安心運用!WordPressに実績のある奈良のホームページ制作会社ウェブエントリーズ

NextGEN GalleryとWP jQuery Lightboxを併用してレスポンシブ対応のギャラリーをつくる

2014年1月31日

NextGEN Gallery自体はデフォルトではレスポンシブに対応していませんから、
横並び1列の画像数は表示カラム数を指定せず、「Gallery Settings」の「NextGEN Basic Thumbnails」にある、
「Number of columns to display」の値は0にしておいて、CSSのwidthを適切な%で設定しましょう。

NextGEN GalleryのAjaxによる拡大表示はデフォルトではFancyBoxですが、Lightboxに切り替えが出来ます。
しかし、レスポンシブデザインでは、拡大画像はそれぞれのデバイスモニタのサイズ以内でないと困りますよね。

プラグイン「WP jQuery Lightbox」なら、デバイスモニタにあわせて拡大画像を表示する設定ができます。

このWP jQuery Lightboxの機能をNextGEN Galleryで有効にするには、
「Other Options」の「Lightbox Effects」で、「Lightox」に切り替えたうえで、
codeを「class=’ngg_lightbox’」から「rel=”lightbox”」に書き換えて、
「Stylesheet URL」と「Javascript URL」の記述を全部削除してセーブすれば、
拡大画像はデバイスモニタに応じたを表示になります。

この設定はそれぞれのプラグインをインストールしてとくに何も触っていない状態で、
かつ干渉を受けるような他のプラグインがない状態で可能になりましたので、
何か手を入れられている場合は同様の結果になるかの保証はありませんので、あしからず。

投稿時のプラグインのバージョン
NextGEN Gallery 2.0.40
WP jQuery Lightbox 1.4.5

ページトップへ