最近、LIghtBoxって言葉があふれておりまして、何ぞや？と思っておりましたら、なんか、画像などを表示するポップアップ形式なんだってことがわかりまして、よく考えたら、最近見るホームページやブログなどにあふれているので、自分も使ってみようかと思ったわけです。
実は、これOpenPneで作ったSNSにも導入したんだけど、結構あちこちいじったので面倒だなぁと思ったんですが、WordPressの場合、メディアのアップロードにflashを使っているので簡単に使えるものがあるんじゃないかと検索してみた。そしたら、LightBox風なんですが、ShadowBoxjsというプラグインが簡単そうで、詳しく解説してくれる人がいたので、このプラグインを使用することに決定。
さてセットアップ。
■まずはダウンロード
Shadowbox JS＞wordpress←公式サイトから。wordpressの管理画面で検索してもダウンロードできます。
ダウンロードして、zipファイルを解凍したら、Pruginフォルダーにコピー。
■セットアップ
プラグイン→インストール済で、有効化。ほとんどデフォルトで大丈夫なはず。
設定なんかに関しては、 このページを見ればよくわかるかな。
さて、使い方は簡単。 rel=”shadowbox”っていうのを、画像リンクにつけるだけ。
画像をクリックすると、ポップアップします。
<a rel="shadowbox[タイトル]" title="画像上に表示するタイトル" href="画像アドレス"><img src="画像アドレス” /></a> ※タイトルは何でもOK（なくてもね） 一般的にいえば、上のアップロード/挿入で、リンク付でアップロードすれば、あとは、rel=rel="shadowbox[タイトル]"を追加すればよいだけね。
それで、1つの画像で、複数とか、スライドショーとかもできます。
こんな感じ。スライドショーは、こちらをクリック
＜a href=”画像アドレス” rel=”shadowbox[グループ]” title=”写真タイトル” class=”option”＞＜img src=”画像”/＞＜/a＞
＜a href=”画像アドレス” rel=”shadowbox[グループ]” title=”写真タイトル” class=”hidden”＞＜/a＞
＜a href=”画像アドレス” rel=”shadowbox[グループ]” title=”写真タイトル” class=”option”＞＜/a＞
と、どんどんつなげておけばよいらしい。ちなみに、class=”option”は、リンクで表示されるもの(最初）、class=”hidden”は、とりあえず隠しておくものってらしい。まあ、rel=”shadowbox”の後ろに配置するだけだから、らくちん。同じクループ名をつければ勝手にまとめてくれるってのもいいよね。注意事項は、リンクの間はリターンコードをいれずに続けて入れないと異様に下に空間ができちゃうってとこかな。
スライドショーは、rel="shadowbox[グループ];options={slideshowDelay:2}” 数字は表示(秒）でOK詳しい説明はもいちど、 ここ
あと、いちいち、rel=の属性を追加しなくちゃいけないの面倒って方には、ちょっとしたプラグインを作ってみたんだけど、長くなったので別のエントリーへ。一応ソースの出所は、 ここ
ではまた。
