2010年6月29日WordPressでのLightbox 2とLazy Loadの共存
(この記事は古い情報です。「WordPressでのLightbox 2とLazy Loadの共存 まとめとその後」に改訂版を載せてあります。)
追記:WordPress Ver.2.9.2の場合と3.0の場合について書かれています。
修正箇所が異なりますのでご注意を。
Lightbox 2プラグインはほぼ開設時から、jQueryも私のWordPressにはデフォルトで
組み込まれていたと思います。
その後jQueryを使ったLazy Loadプラグイン(画面スクロールイン時に画像を読み込む)を
インストールしたのですが、Lazy Loadは動作するのだけど、Lightbox 2が動作しなくなって・・・。
どうもコンフリクトを起こしているようです。
結論から言うと、1行書き加えるだけです。
それも、jQueryならよくある話。
Using jQuery with Other Libraries – jQuery JavaScript Library
お、あったあった。
By default, jQuery uses "$" as a shortcut for "jQuery"
ここで使われているLightbox 2はjQueryに依存していないはずなので、理由がハッキリつかめませんでした。
で、Lightbox 2のjavascriptを見たら、何ヶ所かに「$」による記述が。
なので・・・
■WordPress 2.9.2の場合:
プラグイン編集においてlightbox.jsの1行目に
jQuery.noConflict();
と記述して下さい。
■WordPress 3.0の場合:
プラグイン編集においてjq_img_lazy_load.phpの
function jquery_lazy_load_ready() { $placeholdergif = plugins_url('images/grey.gif', __FILE__); echo <<<EOF <script type="text/javascript"> jQuery(document).ready(function($){ if (navigator.platform == "iPad") return; jQuery("img").lazyload({ effect:"fadeIn", placeholder: "$placeholdergif" }); }); </script> EOF; }
の4行目と5行目の間に(<script>タグの次の行)
jQuery.noConflict();
と記述して下さい。
追記した関数の意味については各自でお調べ下さい。
jQueryライブラリを使ったスクリプトは2つ以上の共存には工夫が必要のようですね。
・・・や、javascript使いの方々の間では常識なのでしょうが、私はそうでもないので(汗)。
今回はWordPressプラグイン用として解析しましたが、一般的なライブラリ用に対しても使えるかどうか、
どなたか挑戦してみて下さい。
更に追記:100%の不具合修正とはならなかったようで、若干の挙動の違いがあるようです。
これについてはjavascriptコア部分の変更の必要があるかも知れません。
2010年10月6日 21:34
[…] 記事に挿入した画像をオシャレに拡大表示してくれるプラグイン。似たようなLightbox系のプラグインは多いですが、私はこれが一番使いやすいと思います。 但し、このプラグインとjQuery Image Lazy Load WPプラグイン(当サイトでは使用していません)を一緒に利用しようとすると、機能しなくなります。解決方法についてはますけんぷの寝言さんの「【解決】WordPressでのLightbox 2とLazy Loadの共存」の記事を参考にして下さい。 […]