理想の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編集

  1. プラグインエディタでPhotoSwipeのassets > ps4 > scripts.jsを開く
  2. 以下のコードをpswp.close();に書き換え
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)}}}else{if(_options.tapToToggleControls){if(_controlsVisible){ui.hideControls()}else{ui.showControls()}}

CSS追加

カーソル変更

画像上のカーソルを変更。

.pswp__img,
.pswp--zoom-allowed .pswp__img
	cursor: -webkit-zoom-out
	cursor: -moz-zoom-out
	cursor: zoom-out

背景色透過

.pswp__bg
	opacity: .3 !important

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

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

.pswp__ui,
.pswp__ui--fit .pswp__caption,
.pswp__ui--fit .pswp__top-bar
	visibility: hidden

.pswp__caption__center:not(:empty)
	visibility: visible

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

左右ナビ調整

ナビのクリック範囲を拡大、アイコンの自動非表示を無効化。

button.pswp__button--arrow--left,
button.pswp__button--arrow--right
	top: 0
	width: 15%
	height: 100%
	margin: 0
	visibility: visible

	&::before
		top: 50%
		transform: translateY(-50%)

.pswp__ui--idle button.pswp__button--arrow--left,
.pswp__ui--idle button.pswp__button--arrow--right
	opacity: 1

関連記事