[js]slick.js+lightbox2でポップアップするスライド構築

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を変えるのもだるいから別のライトボックスにしようとしたら、同じ症状がでた。

つまり、原因を調べないまま代案を出してた。

で、原因と対策を調べたらすぐにヒットした。

数年越しで対策できるようになったっていう、だいぶアホっぽい話。

コメント

タイトルとURLをコピーしました