ポップアップ可能な写真のギャラリーを設置する際のアクシデントいろいろ

LINEで送る
Pocket

のブログで扱う画像が多くなってきたので、ギャラリーを設置することにしました。

使うことにしたプラグインは、とても有名な、NextGEN Galleryです。こちらのページを参考に、ギャラリーを作ってみました。日本語化から丁寧に書いてあるので、わかりやすかったです。

NextGEN Galleryプラグイン(画像ギャラリーの設置) - WordPressプラグインの一覧NextGEN Galleryプラグイン(画像ギャラリーの設置) - WordPressプラグインの一覧はてなブックマーク - NextGEN Galleryプラグイン(画像ギャラリーの設置) - WordPressプラグインの一覧

 

スポンサーリンク

 

NextGEN Galleryで画像が表示されない

しかし、ギャラリーを作ったのに、サムネイル画像が表示されないという困ったことになってしまいました。そこで辿り着いたのがこの質問。

WordPress › フォーラム » NextGEN Galleryでギャラリーを作るが、画像が表示されない。WordPress › フォーラム » NextGEN Galleryでギャラリーを作るが、画像が表示されない。

この質問は解決済みであり、ギャラリー名前を日本語から半角英数字に変える必要がある、ということでした。わたしもそのようにして、作成済みのギャラリーの名前を変えてみましたが、うまくいきません。

どうやら、画像のパスにギャラリー名である長い日本語が含まれているのがよくないようでしたが、その部分は、あとからギャラリー名を英語に変えても修正されません。

そこで新しくギャラリーを作り直し、最初から英数字でギャラリー名をつけました。すると、無事画像が表示されるようになりました。要するに、後からギャラリーの名前を英語に変えてもダメだ、ということです。

lightboxが使えない

次に問題となったのは、ライトボックスが使えないことでした。ライトボックスとは、画像をクリックした時にポップアップされる効果のことをいいます。

デフォルトではNextGEN Galleryにはライトボックスの効果はついていません。画像をクリックすると、その画像のURLの別ページに飛んでしまい、ブラウザの戻るボタンを押さないと戻れません。

そこでライトボックスを導入するプラグインを試すことにしましたが、どのブラグインを導入しても一向に動作する気配がありません。

試して動かなかったlightbox系プラグインは以下のものです。

Lightbox plus colorbox

Easy Fancybox

NextGEN Gallery ColorBoxer

Slimbox

jQueryを使った、lightbox系プラグインは動作しにくく、他のプラグインと干渉して動かないことも多いという話もあるので、このブログでは無理なのか…と諦めかけました。

しかしダメ元で、jQuery Colorboxをインストールして、以下のページに基づき設定したところ、見事ライトボックスが動作しました。

画像を自動的にlightBox風に表示するプラグイン / jQuery Colorbox | WordPress(ワードプレス)とプラグイン画像を自動的にlightBox風に表示するプラグイン / jQuery Colorbox | WordPress(ワードプレス)とプラグイン

どれを使ってもライトボックスが動かない場合でも、lightbox系プラグインはかなり多くあるので、あきらめずに試し続けることが大切だと思いました。

動作しないということで調べると、jQueryの設定など、素人には意味の分からない情報がざくざく出てきますが、結局そうした難しい問題ではなく、単なるプラグインの相性でした。テーマのfunction.phpを書き換えたりしなくてよかったです。

少なくとも、以下のページにある8つを順に試してみると良いと思います。

Lightbox系のWordPressプラグイン8選 - 簡単に利用できるプラグインを超厳選! | ネタワンLightbox系のWordPressプラグイン8選 - 簡単に利用できるプラグインを超厳選! | ネタワンはてなブックマーク - Lightbox系のWordPressプラグイン8選 - 簡単に利用できるプラグインを超厳選! | ネタワン

ところで、NextGEN Galleryのオプション(Other Options)にも「Lightbox Effects」という項目があって、What effect would you like to use?というところで、lightboxを選択できます。ここも関係があるかもしれないと思い、一応デフォルトのtrickboxからlightboxに変えておきました。

jQuery Colorboxで文字が重なる

jQuery Colorboxのライトボックスで、スマートフォンで見ると、ページ数の表記と画像のタイトル表記が重なる問題が出ました。それについては、以下のサイトで解説されています。

jQuery Colorbox で表示させた画像から 1 of ○ images を消す方法 | くにぽん’ず★きちめきパラダイスjQuery Colorbox で表示させた画像から 1 of ○ images を消す方法 | くにぽん’ず★きちめきパラダイス

しかしこの問題については、上記のサイトの手法ではなく、jQuery Colorboxのライトボックスのスタイルを変えることで解決しました。jQuery Colorboxのライトボックスには10位上のスタイルが用意されており、設定から変更できます。スタイルの中には、タイトルとページ数を離して表示するものが複数ありました。

 

 

このようにして、なんとか見栄えのするギャラリーを作ることができました。

実はほかにも、NextGEN Galleryのアルバム機能がうまく動作しないという問題もあったのですが、それは今のところ未解決です。

素人がWordPressで何かをやろうとするのは、毎回本当に大変で一日仕事です。

スポンサーリンク
LINEで送る
Pocket

▼こちらの記事もおすすめです


スポンサーリンク