見出し画像

改)パーフェクト!Photoswipe with Swiper.

以前、Photoswipeの画像一覧付きの設定を公開したのですが、'.pswp__container'に'transition'をつけることでスワイプ以外にもアニメーションをつけれることが分かり、再度調整。さらに他にも微調整。

設定されているイベントの'initialZoomOutEnd'がバグで動作しないのでコアファイル('/dist/Photoswipe.js')を調整。
↓↓↓ プンプン:-(
2550行 => '_shout('initialZoom' + (out ? 'OutEnd' : 'InEnd'));' を2553行らへんへ。

・スワイプ以外にスライドアニメーションを追加。
・キーボード操作時のアニメーションを上記と同じで追加。
・スライド中はキーボード操作を無効。
・'Swiper'との連動をより正確に。

これで完璧じゃないでしょうか?
サンプルはこちら

サムネイルの有効無効。スワイプ以外のエフェクトの有効無効。
ダークモードの切り替えなど、よく使いそうなものを用意しています。
切り替え方法を記載しておきます。

ここから先は

1,482字

¥ 100

この記事が気に入ったらチップで応援してみませんか?