画像表示で使う js を、LiteBox から ThickBox に変えてみました。
ThickBox を他サイトで使ってみて自由度の高さと使い勝手に惹かれ、こちらも変えようかなーという流れです。
具体的に変更しようかな～と思ったのは以下の点が気に入ったから。
- 大きい画像を表示した際にリサイズを勝手にしてくれる
- 画像をクリックして閉じることが可能
- 画像の外の上下左右どこかをクリックしても閉じることが可能
- Esc キーでも閉じることが可能
後は画像以外のモノも表示できるので機会があったら使いたい、というのもありました。
それにあわせて、使っている WP プラグインの IImage Browser に少し手を加えました。
※IImage-browser 日本語版 ≪ MMRT daily life さんからダウンロードした、IImage Browser 日本語版 の Default を利用しています。
IImage Browser の、wp-admin 内に入れる iimage-browser.php 内 71 行目付近を以下のように変更。
$ib_custom_code_full = '<a href="%src" title="%title" class="lightview"><img src="%tsrc" alt="%title" width="%twidth" height="%theight" /></a>'; $ib_custom_code_thumb = '<a href="%src" title="%title" class="lightview" rel=""><img src="%tsrc" alt="%title" width="%twidth" height="%theight" /></a>';
これで、ThickBox を使った画像の投稿が楽になりました。
過去の画像は、LiteBox を切ってしまったのでそのままページ移動で表示されるようになっています。
また、ThickBox は jQuery を使用しており prototype.js と競合がおきます。
これへの対処方法は以下のサイトを参考にさせていただきました。
- 二次元汚染域 – jQueryとprototype.jsの共存させる方法
- prototype.jsとThickBox(jQuery)がコンフリクト｜blog｜たたみラボ
- prototype.jsとThickBox(jQuery)のコンフリクトを防ぐ方法 (Yusukebe::Tech)
- コスミー報告書[社外秘] – jQueryトリビアルメモ２ （prototype.jsとかと共存、jQuery.jsの複数回読み込みについて）
具体的には、以下のようにヘッダー内に書き、jQuery を利用している .js 内の 「$」を「jQuery」に置換することで共存可能になりました。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); //--> <script type="text/javascript" src="prototype.js"></script>
このとき読み込ませる順番は、jquery.js を最初に、次に jQuery.noConflict(); の部分、最後に prototype.js 。
この順番でないと上手く動かないスクリプトが出てきたり、エラーが出たりと何かと問題があったので注意。