ECの商品ページとか、これが楽かもしれない。
こんな感じ
読み込む。
<script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/js/lightbox.min.js" integrity="sha512-KbRFbjA5bwNan6DvPl1ODUolvTTZ/vckssnFhka5cG80JVa5zSlRPCr055xSgU/q6oMIGhZWLhcbgIC0fyw3RQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/css/lightbox.min.css" integrity="sha512-xtV3HfYNbQXS/1R1jP53KbFcU9WXiSA1RFKzl5hRlJgdOJm4OxHCWYpskm6lN0xp0XtKGpAfVShpbvlFH3MDAA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
設置する。
商品ページ想定で、1枚だけ登録と複数登録とで切り替えることとする。
<div class="single">
<a href="https://placehold.jp/300x300.png" data-lightbox="productimage" data-title="商品画像"><img src="https://placehold.jp/150x150.png"></a>
</div>
<div class="group">
<ul id="slider">
<li><a href="https://placehold.jp/300x300.png" data-lightbox="productimage" data-title="商品画像"><img src="https://placehold.jp/150x150.png"></a></li>
<li><a href="https://placehold.jp/300x300.png" data-lightbox="productimage" data-title="商品画像"><img src="https://placehold.jp/150x150.png"></a></li>
<li><a href="https://placehold.jp/300x300.png" data-lightbox="productimage" data-title="商品画像"><img src="https://placehold.jp/150x150.png"></a></li>
<li><a href="https://placehold.jp/300x300.png" data-lightbox="productimage" data-title="商品画像"><img src="https://placehold.jp/150x150.png"></a></li>
</ul>
</div>
jsの設定。
$(function(){
if($('.group').length){
$('#slider').slick({
//slick.jsの設定
});
$(window).on('load', function () {
//lightbox2が倍になる対策
$('.slick-cloned a').removeAttr('data-lightbox');
});
})
cssは割愛。
とりあえずこれでやっていけば動く。
解説的なもの
slick.jsは仕様として、対象となるスライドが複製される。
スライド動作をスムーズにさせるための仕組みらしい。
何でかわからないけど、2枚でスライドさせることを考えたら何となく分かる気もする。
スライド対象の要素・属性をまるっと複製するので、lightbox2のポップアップ上でスライドできる機能に干渉してしまう。
複製された要素には「.slick-cloned」が付与されているので、それを指定して除外(=data-lightboxを削除)すればいいということになる。
参考

【jQuery】slick とLightboxを併用時の注意点
jQueryのプラグイン、slickとLightbox2を同時に使った場合、ライトボックス表示時にファイルの枚数が2枚多く出てしまう…というときの対処法です。これはスライダーが、スムーズな回転のために前後にクローンを作り出すため。ライトボッ
それこそ商品ページを作ろうとしてて、ついうっかりslick.jsを仕込んでしまった。
それにphotoswipeを被せたらだめだって記事を書いてたのに素で忘れていた。
slick.jsを変えるのもだるいから別のライトボックスにしようとしたら、同じ症状がでた。
つまり、原因を調べないまま代案を出してた。
で、原因と対策を調べたらすぐにヒットした。
数年越しで対策できるようになったっていう、だいぶアホっぽい話。
コメント