これまで使っていたcolorboxをモダンなlightgalleryに変更しよう！
→max-height:100%なので縦長画像が小さくて見にくい…😭
今回は、width基準にしつつ縦スクロールできるようにしたい！
→基本overflowでスクロールできるようになるが、スマホ時に実機では動かない😔
なぜならタップによる左右スワイプが優先されるため、縦スクロールができない🤔
（ゆえにPCでの要素検証時マウススクロールではできる）
→jsのスワイプ遷移を無効にして縦スクロール可能にする！
※なおlightgallery.jsは商用利用有料
JS設定
左右スワイプ解除はサイト側にJSを記述して設定する。
またはlightgallery.jsを書き換えてもよいがデフォルトは触らない方がいいかも説。
下記はHTMLに追記するとき。ギャラリー複数設置のためのid→class指定への変更設定も含む。
アニメーションもスライド（lg-slide）だと左右遷移時にスクロールバーがくっついていってしまうので、フェード（lg-fade）に変更。
<script>
let elems= document.getElementsByClassName("lightgallery");
for(let i = elems.length; i--; ){
lightGallery(elems[i], {
enableSwipe: false, //スマホスワイプ無効
enableDrag: false, //マウスドラッグ無効
mode: 'lg-fade', //アニメーションフェード指定
galleryId: elems[i].id
});
}
</script>参考様😭
CSS設定
overflowはサイト側のCSSに追加して上書き指定するか、lightgallery.css内を編集する。
バージョンによっては指定class名が違うかもなので検証にて要確認。
/*拡大画像のclass*/
.lg-outer .lg-image {
max-height: none; /*これを書き足すか、lightgallery.css内なら削除する*/
}
/*モーダル内class*/
.lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current {
overflow-y: scroll; /*これを書き足す*/
}
/*モーダル表示時背景固定もなければ追記（不便かつスクロールバーが2本になるので）*/
.lg-on {
overflow: hidden;
}左右ボタンを押さないと遷移しない不便さはあるが、スマホとかそんなに気にならないと思うので、縦スクロールを優先したい場合には便利かも🤗
One Reply to “モーダルJS「lightgallery」で縦長画像を表示＆スクロールさせる／スマホでoverflow:scrollが効かないとき”