jQueryプラグイン2つを同じページ内で使いたい時の注意点
jQueryって便利ですよね。
トグルメニューに、スライドショーに、フォトギャラリーに……欲しいものはほぼ叶えてくれます。
おかげで私のような無知なコーダーでも設置できてしまい、後々イレギュラーな事態に苦しめられることになったりもします。
したんです。
ヘッダーでスライドショーを動かしたい。
その同じページ内の下部にある画像は、拡大した時にLightboxにしたい。
しかもレスポンシブwebデザインに対応させたい。
これらの願いを全て叶えるプラグインは
山ほどあります。
個人的に一番簡単だと思ったプラグインを、と
スライドショーは、bxslider
Lightboxは、rlightbox
どちらも設置が簡単で、使い勝手が良い、素晴らしいプラグインです。
しかし、イレギュラーな事態が起こったのです。
恐らく当ブログ内で何度か絶叫してきた
2つ入れたら片方が機能しない、という事態です。
下の画像をクリックしたら、rlightboxではなく、ブラウザの別タブが開いてしまいました。
また相性か……。
何も疑わずにそう思い込み、それでも新しいプラグインを探すのも面倒で、何とか解決策がないか、実は何かのエラーではないか、と探ってみました。
Google Chrome の developer tool で。
そしてツールが弾き出してくれたエラーは
(…)bxslider is not a function
Google先生に問い合わせてみたら、ヒットしたのは英語圏のサイトのみ。
なので私の足りない英語力を駆使……できるはずもなく、Google Chromeの翻訳機能に頼ってみて、出た結論は
jQueryのバージョンが低すぎる、というものでした。
実は、rlightboxの最終アップデートは2012年で、推奨されているバージョンは1.6.4だったのです。
本当に右も左も分からないNは、bxsliderのタグでは最新バージョンを、rlightboxのタグでは1.6.4をそれぞれ指定していたのですが、そんなに都合良く使い分けてもらえるはずがありません。
当然なのですが、最新バージョンに統一されていました。
なので1.6.4を指定するタグを削除すると、次に出てきたのは
c.curCSS is not a function
c.curCSSは、jQuery1.8以降は非推奨の関数なのだそうです。
最新バージョンを敢えて1.6.4に統一するのも有りなのかもしれませんが、それだとbxsliderが動く保証もなく……。
散々回り道をして、結局他のLightbox系プラグインを探しました。
見つけたのは、Boxerという、画像だけでなく動画にも対応している便利なものです。
最新バージョンでも動くようです。
プラグインを同じページ内で2つ以上使う場合、相性が……と知ったかぶりをするより、推奨バージョンを確認する方が先だ、という、よく考えてみれば当たり前のことを学んだのでした。
【ハートブレーン】https://blog.heart-kokoro.net
【ハートブレーン】https://heartbrain.netよろしければ、SNSでのシェアやランキングなど、応援よろしくお願いします。