画像などを同画面で表示するのに便利な「lightbox」ですが、自分で実装する際に簡単にできないかなと思って
WordPressのプラグインを探してました。そして入れたのがLightbox2です。
ダウンロード
こちら元は英語なのですが、日本語版もありますので日本語版をダウンロードしました。
設置方法
設置の方法は他のプラグインと一緒でダウンロードしたファイルを解凍し、/wp-content/pluginsフォルダにアップロードすれば動きます。
オプション
インストールが成功すると、WordPressの設定メニューにLightboxが追加されるのでそちらで以下の設定ができます。
- 背景色
- 透過率
- リサイズ
- 項目ごとの設定
- Lightbox自動設定
投稿画面でのLightboxの使う場合と使いたくない場合の設定
この記事はLightboxを使いたくない
記事によってはこのページの画像はLightboxにしたくない場合があると思います。その場合は投稿画面の項目に、
「Lightboxを無効にする」という項目があるのでそこにチェックをします。そうするとこの記事内の画像には「Lightbox」は適用されません。
この画像はLightboxを使いたくない
記事全体ではなく個別の画像を「Lightbox」したくないときもあります。その場合は「アップロード/挿入」で出てくるウインドウのギャラリーで
使いたい画像を選択し「リンク」部分を空にして投稿に挿入します。
こうすると、その画像だけ「Lightbox」が適用されません。
動かない
自分で設置したのですが、なぜか動きませんでした。どうしてだろうと散々悩んだのですがこのプラグインはprototype.jsを使うものでした。
別に使用していたjQueryと干渉して動かなかったのですね。というわけでコンフリクト回避をしたら無事動きました。
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>
上記コードを適切な場所に記述し、jQueryを使ってるJSファイル内の$をj$に変更します。
すごい初歩的なことかと思いますが、このようにすると簡単に「Lightbox」が使えるようになります。
コメント