理想のLightboxを求めた

WordPressに理想的な挙動のモーダルウィンドウを実装する。

画像モーダルに求める条件

  • 画像クリックで閉じる (×や背景のクリックは面倒)
  • シンプル (フレームや影やズームボタンは不要)
  • アニメーション無し (ふわっと出るのは時間の無駄)
  • スワイプ対応 (左右で閲覧、上下で閉じる)
  • WordPressで設定したキャプションが出る

Lightbox系プラグインを色々入れて設定してみた所、全て満たせるのはFancyBox for WordPressだけだった。大抵は「画像クリックで閉じる」か「スワイプ対応」が出来ない。

FancyBox~で機能的には申し分ないが、スワイプの挙動に不安定な所がある。PCだと横長の画像しかスワイプ出来ず、スワイプ失敗時キャプションの領域が謎に増えてゆく。(元のFancyBox3では問題ない)

「画像クリックで閉じる」以外を満たし、操作感が気持ちいいLightbox with PhotoSwipeを改変してクリックで閉じられるようにする。

設定

設定 > Lightbox with PhotoSwipe

ツールボタン削除

  • General > Visible elements
  • Sharing > Visible sharing options

画像外をクリックで閉じる

  • Desktop > General > Close the lightbox by clicking outside the image

ホイールスクロールで戻る・進む

  • Desktop > Mouse wheel function > Switch to next/previous picture

JS編集

~ver.3.1.3

  1. プラグインエディタでPhotoSwipeのlib > photoswipe-ui-default.min.jsを開き、tapToClose:の値をtrueに変更
  2. 以下の2~8行目に該当する部分(実際はインデント無し)をpswp.close();に書き換え

「画像をクリックした時、ズーム可能時はズーム、小さい画像は閉じる。PCでは閉じない」を「全て閉じる」ようにする。

if(framework.hasClass(target, 'pswp__img')) {
    if(pswp.getZoomLevel() === 1 && pswp.getZoomLevel() <= pswp.currItem.fitRatio) {
        if(_options.clickToCloseNonZoomable) {
            pswp.close();
        }
    } else {
        pswp.toggleDesktopZoom(e.detail.releasePoint);
    }
}

ver.3.1.4~

更新で色々変わっていたので追記。

  1. aseets > script.jstapToClose:の値を!0に変更
  2. 以下の箇所を{e.close()}に書き換え
{if(R(o))return void e.close();t.hasClass(o,"pswp__img")&&(1===e.getZoomLevel()&&e.getZoomLevel()<=e.currItem.fitRatio?v.clickToCloseNonZoomable&&e.close():e.toggleDesktopZoom(n.detail.releasePoint))}

追記: また書き換え元コードが~ver.3.1.3に戻っている。22.07.19現在
追記: また書き換え元コードがver.3.1.4~に戻っている。ファイルはassets > ps4 > scripts.js。22.09.07現在

CSS追加

カーソル変更

画像上のカーソルをズームイン→✕付きに変更。

.pswp__img,
.pswp--zoom-allowed .pswp__img {
	cursor: -webkit-not-allowed;
	cursor: -moz-not-allowed;
	cursor: not-allowed;
}

背景色透過

.pswp__bg {
	opacity: 0.2 !important;
}

フレーム・ツールボタン削除

フレームは消してキャプションを残す。

.pswp__ui,
.pswp__ui--fit .pswp__caption,
.pswp__ui--fit .pswp__top-bar {
	visibility: hidden;
}

.pswp__caption__center:not(:empty) {
	visibility: visible;
}

visibility: hiddendisplay: noneと違って子要素のみの表示が出来る。
:not(:empty)でキャプションが無い時は非表示。

左右ナビ調整

クリック範囲の高さ100%、アイコンの自動非表示を無効化。

.pswp__button--arrow--left,
.pswp__button--arrow--right {
	width: 20%;
	height: 100%;
	position: fixed;
	top: 0;
	margin: 0;
}

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
	top: 50%;
	background: transparent;
}

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
	opacity: 1;
}

白背景の場合、アイコンが同化するのでbackground: transparent;を削除。