【備忘録】NucleusでColorBoxを使う
- カテゴリ: NucleusCMS
- 投稿日時: 2014/05/25(日) 23:10:33
ここ最近、サイトの見た目をいろいろいじってます。その一環で、久しぶりにLightBox系プラグインを導入しようとしてはまったので備忘録として書いておきます。
LightBoxっていうのは、メインのWebページにサムネイル画像を表示しておいて、これをクリックすることで同一画面上に画像を上乗せ表示するためのJavaScriptですな。いまやこれを使っていないサイトのほうが少ないんじゃないかっていうくらい普及してます。
当サイトでも導入していた時期がありましたが、ここしばらくは使ってませんでした。スマートフォンで同じHTMLを開くと、拡大表示した画像の挙動がよろしくなかったというのがその理由。大きくなりすぎて、閉じるための「×」も押せなくなっちゃうんですね。
でまあ、NP_ChgSkin2SPをつくったのでPCとスマホで完全にスキンを分けることができるようになり、じゃあPCサイトだけにまたLightbox導入してもよいかなと。
さて、このサイトでLightBoxを無効にした時、そうはいっても将来また復活させるかもしれないと、コアなファイルは消さずに残しておいたまではよかったのですが、はて、設置方法がさっぱりわからない。プラグインで実現したのだっけ? それともただJavaScriptをおいたんだっけと、さっぱり忘れてしまっていました。ははっ。
確か当時、LightBox2をいれて、そのあと軽くするためにColorBoxに入れ替えたような…
まずはプラグインをあたってみることにしました。
保存してあったバックアップから「NP_LightBoxEX」をまずインストール。うーん、うまく動かない。
続いて「NP_LightBox2」。これもだめ。そんなはずはないのでよく考えます。
サムネイルを生成すること、サムネイルをクリックしたらJavaScriptを起動することの二つの機能をプラグインで実現しなけりゃならないはずで、そうするとまずサムネイルをつくるインターフェイスがあるはず。
現状の当サイトは別のプラグインでサムネイルを生成して、それをクリックしたら別窓で拡大表示させているわけで、プラグイン同士が当たってるんじゃないかという予想が立ちました。
プラグインの優先順位をNP_CustomThumbnailより上位に上げてみました。ビンゴ。
LightBox2はやっぱりなんとなくもっさりしているので、ColorBoxを探します。案の定、NP_ColorBoxというプラグインを発見。ただしNucleus本家サイト(英語)でした。作者はNP_LightBox2と同じ方。日本語Wikiには登録されてないのですね。
NP_ColorBoxをインストール。だけどなんだか動きが変です。
LightBox系のスクリプトは、画像サムネイルをクリックすると同一ページでに暗い背景を重ねて、みょーんって縦横に伸びる感じで画像が拡大表示されるわけですが、NP_ColorBoxをただインストールしただけではこの「みょーん」がなくてぱっと表示されてしまいました。
プラグインのオプション編集画面を見ても、それらしい設定はなし。スキンへの記述時に何か指定するのかとヘルプを見ても特になし。んー、困った。
出力されたhtmlを覗いてみると、サムネイル画像のaタグに設定されているのはありがちな"rel=lightbox"ではなく"rel=cb_none"。なんじゃこりゃと思ったら、NP_ColorBoxはこのrel属性で画像の表示のされ方をいろいろ変えられるようにしているみたい。cb_noneはそのままなにも効果なしで表示ってことらしいです。
他の機能は使う予定もないので、NP_ColorBox.phpのソースを調べて、「cb_none」と出力しているところをを「cb_elastic」に変更。これで期待している動作をするようになりました。
さて、ローカルのxammpで確認できたので、DBを書き出して公開サイト用に変換、公開サイトでDBのインポートを行いました。
…あやや、動かない。
プラグインのオプション編集をよくよくみると、mediaディレクトリへのパスを絶対パスで記述しなけりゃならないところがありました。「C:\xampp\htdocs\toyrc\media」を「media/」に修正してOK。
だけどねぇ。
これだとうちみたいな「ローカルで確認して本番サーバに移植」ってな運用してるととても使いづらいんですよね。書き直さないといけないところが増えれば増えるほど、間違いやすくなる。
あと、<head> </head> 内に記述する<%ColorBox%> 、実際に展開されるとIE用のコードとかいらないものがたくさんあってヤな感じ。
ってことで、NP_ColorBoxはアンインストール。JSファイル類が入ってるフォルダはそのまま残して利用することにします。
NP_ColorBoxがhead内に吐き出すコードを簡単にしてそのままincファイルに記述。
あとNP_CostomThumbnailのオプションで
「Style for linking to original image.」を「Simulate"< %popuplink%> "」から「Simple」に変更し、
「Additional HTML attributes to linking.」に「rel="lightbox"」と書きました。
これで期待通りの動きになりました。
つまんない話ですみません。
Tweet
コメント
この記事へのコメントはありません