こんにちは。
今回はメモ書き見たいなものなので、Wordpressにご興味が無い方は縦読みしてみてください。
Wordpressのとても助かるプラグイン紹介シリーズです。
最近サイトをみていて、画像をクリックしたら格好良くポップアップ(拡大)する画像を見たこと無いでしょうか?
Wordpressでもプラグインを組み込むことによって実装が可能です。
例によってとても有用な解説サイトをご紹介して、
要点だけを書き出します。
■ポイント■Wordpressの本体ファイルなどには編集不要。
プラグインとテンプレートのみ修正で活用可能
■プラグイン本体
http://www.gavinbarker.co.uk/gblog/?page_id=78
(gbLitebox)
こちらを導入し、さらに投稿された画像の a タグに反応して、自動でrel=要素を入れる改造をします。
http://as-is.net/blog/archives/001203.html
(参考サイト:Ogawa::Memoranda様)
実装時の注意点として、上書きを行う js css のファイルについて
<link rel="stylesheet" href="css/lightbox.custom.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/litebox-1.0.custom.js"></script>
それぞれを呼び出す記述を、オリジナルのライトボックス用のCSS.JSの後に上書きとして記述します。
また、プラグインの解説にも有りますが、
<body onload="initLightbox()">
bodyのオンロードに記述追加が必要です。(テンプレート修正で)
また最後に、効果の範囲を限定したい場合
先ほどご紹介したサイトを参考に作成した
litebox-1.0.custom.js
内の
// オリジナルのinitLightbox関数をオーバーライド
//
initLightbox = function() {
addRelLightboxAttribute('content');
myLightbox = new Lightbox();
};
この content の箇所が、影響範囲のDIVのIDとなるので、
自動でLitebox化する範囲を指定したい場合は、ココに記述します。
お
わ
り
。