lightboxとPage Scroller併用でどちらかが動作しない
スラマッパギ!!
今日制作していて問題にぶち当たりました！
ページの任意の場所にスムーズに移動することができるPage Scrollerと
画像をぶいーーんって拡大することができるlightboxを併用実装するとどちらかが動作しないorz
もちろんググりました!!
おｋおｋそういう事ね(゜д゜)!!
下記で説明させていただきます。
スクリプトのベースとなるライブラリ間の衝突
lightboxはprototype.js、Page ScrollerはjQueryというライブラリをベースに作られたプラグインなので、後に置かれたライブラリが優先されるみたいです。
衝突を回避する方法ですが、調べたらいくつかありました。
- 使う汎用ライブラリを1本に絞る
- noConflictメソッドを使う
まず簡単な方法が使う汎用ライブラリを1本に絞る、つまりlightboxはやめてjQueryを使った
lightboxのようなライブラリを探すという方法です。
今回のjQueryとprototype.jsのように複数の汎用ライブラリを読み込むのも、HTTPリクエストの回数は増えますし
処理が増えて遅くなりそうで嫌だな…という感覚もあります。
なので個人的にはこの方法がベストかと(´・ω・`)
二つ目の方法がjQueryには他のライブラリとの間で「$」の衝突を避けるためのnoConflictメソッドがあります。
このメソッドを使って、衝突を回避できるみたいです。
下記引用です。
サンプル1
この例では、$はjQueryによって上書きされずに他のライブラリで定義された動作をします。
サンプル2
この例では、$はjQueryによって上書きされずに他のライブラリで定義された動作をするが、
引数で$を受け取った関数のスコープ内ではjQueryオブジェクトとしての$として動作する。
これによって、jQueryのプラグインなどの中では安全にjQueryオブジェクトとしての$を利用でき、スコープの外では他のライブラリに$を開放することができる。
サンプル3
$ではない文字列にjQueryオブジェクトを割り振る。ここでは、'j'の文字をjQueryオブジェクトとし、$は用いないように。
この方法は汎用的なライブラリを作ることにも利用することにも向かないため、極めて限定的な用途になると考えられる。
上記のサンプル2が参考になると思います(´・ω・`)
関数の仮引数として「$」の文字を使い､そこに引数としてｊQueryオブジェクトを渡してやると､関数内では同じようにjQueryオブジェクトとしての「$」を使用できるみたいです
それかサンプル1のようにｊQueryオブジェクトを使う際には「$」を使うのをやめて、ｊQueryと書き換えてもいいかもです。全ての$を置き換えるのは面倒ですが、テキストエディタの置換機能を使うとそれほど難しくないと思います。
