jqueryについて（Lightboxとbxsliderを同時に設置したい）

Mac OS x、DWCC2015で作業しています。

サイトにbxsliderを設置していて、後から
別の画像にlightboxを設置したいと思ったのですが、
jQueryはすでに設置しているものと共通で使うのでしょうか。。。

現在、
<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8. …
<!-- bxSlider Javascript file -->
<script src="jquery/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery/jquery.bxslider.css" rel="stylesheet" />

これをhead内に置いていて、正常に作動しています。

グーグルのサーバ状のものを使っている場合は、iQueryのバージョンの古さは
気にしなくて大丈夫ですよね？

新たにhead内に

<link rel="stylesheet" href="css/lightbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1 …
<script src="js/lightbox.min.js"></script>

を書いてbody内に

<a href="画像のURL" data-lightbox="任意の名前"><img src="画像のURL" /></a>

と記述したのですがうまく行きません。
画像をクリックすると、単にもう1枚の大きい画像が普通に開くだけです。

どこを改善すれば良いですか？
どなたかよろしくお願いいたします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2016/04/15 17:34

こんにちは

jQueryを普通に２度読み込むと、後からのもので上書きされます。
それなので、その前に行った処理のうち、関数の拡張などは上書きされて機能しなくなってしまいます。
jQuryは最初に一度読み込むようにしましょう。

実際に、試したわけではないので、以下は一般論ですが・・・
大抵のライブラリは上位のバージョンのjQueryで動作すると思います。（まれに、あるバージョンでないと動作しないものもあります）
それなので、まず、それぞれを単独で設置してみて、同じjQueryのバージョンで個別には動作することを確認してみてください。
単独で動作すれば、たいていの場合はそのまま併せて設置しても問題はないはずです。


上記がうまくいかないケースとして・・・
1）同じバージョンのjQueryでは動作しない
2）それぞれのライブラリが干渉してしまう
3）処理の対象となる要素が同じ（又は親子など）で動作が干渉してしまう
などが無いとは言えません。

1）、2）は稀ではありますが起こり得ます。
この場合は、jQueryのnoConflict()を利用することで解決できることがあります。
http://api.jquery.com/jQuery.noConflict/
3）はスクリプトの問題というよりは、利用する側の問題なので、それぞれのライブラリの動作を理解した上で干渉を避けられるように設置するしかありません。

この回答へのお礼

詳しくありがとうざいます。
とりあえず、別のページに設置してみたら動きました。

ご回答大変参考になります。
もう少し勉強してみます。

お礼日時：2016/04/15 18:13