【jQuery】モーダルウィンドウとスライダー系プラグイン組み合わせ時の注意点
【jQuery】モーダルウィンドウとスライダー系プラグイン組み合わせ時の注意点
モーダルウィンドウ、いわゆるlightbox系プラグインとスライダー系プラグインを組み合わせる時の注意点と備忘録です。
モーダルウィンドウ単体、またはスライダー単体でそれぞれ使うぶんには基本的には全く問題なく使用していいと思います。
ですが、カルーセル表示（小さいサムネイルを表示させてるあれ）をスライドさせて、そのサムネイルをクリックするとモーダルして拡大させて表示ということをしたいときに注意が必要です。
スライダー系プラグインの仕様に注意
以前、紹介させていただいたプラグインなどがそうなのですが、スライダーをずっとスライドさせようとするとこれらはクローンを作り出します。
スムーズに回転させるために、前後に数個、自身の要素を複製します。
そのため、カルーセル表示させて、さらにグループ化させた場合そのクローンまでにも連番を振ってしまい思わぬ挙動をします。
対応策
例えばslickなどではクローンに対して、slick-clonedなど独自のクラス属性を振り分けます。
なので、そのクラスを基にしてグループ分けしているrel属性を削除します。
$(window).on('load', function () {
$('.slick-cloned a').removeAttr('rel');
});
削除はたったこれだけ。三行です。
removeAttrで属性自体を削除します。
クローンされていない原本のものはslick-clonedのクラスはつかないので、通常通りグループ分けされていると思います。
（JavaScriptだとremoveAttributeを使用します）
最後に
今回はslickとcolorboxの組み合わせで起こった事象でした。
もしかすると他にも起こりうる可能性のあることかと思います。
もし、同じ現象で悩んでいる人がいるならば、これで解決できたら嬉しいです。
今回使ったメソッド
removeAttr('消したい属性など')