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