プラグイン「Lightbox with PhotoSwipe」が正常動作しない場合の対策
プラグイン「Lightbox with PhotoSwipe」とは?
プラグイン「Lightbox with PhotoSwipe」は、以下のhtmlで自動的に PhotoSwipe スライダーを構築してくれるものです。
1 2 |
<a href="image001.png"><img src="image001.png"></a> <a href="image002.png"><img src="image002.png"></a> |
上記のhtml構造は最低限に簡素化してますが、WordPressの編集画面での画像挿入操作で追加されるhtmlタグと等々のものです。要するに、単に画像挿入操作をすれば PhotoSwipe スライダーが出来上がるという、非常に便利なプラグインなのです。
現象
しかし、上記のような画像の指定では PhotoSwipe スライダー動作が実行されず、単なる画像表示動作となるケースがあるようです。
対策
WordPressのメディア管理ディレクトリの配下に画像を格納し、それを <a href> で指定すると正常動作します(メディアとしての登録の必要はありません)。
また <img src> への指定は必要がありません。
1 2 |
<a href="/wordpress/wp-content/uploads/image001.png"><img src="image001.png"></a> <a href="/wordpress/wp-content/uploads/image002.png"><img src="image002.png"></a> |
※ /wordpress/wp-content/uploads/ がメディア管理ディレクトリ
補足
なぜこのような現象が起こるのかは検証しておりません。
対策は試行錯誤の結果としか言いようがないことをご理解いただければありがたいです。
オプション
グループ化するには以下のように data-lbwps-gid 属性を同一内容で指定します。
同一ページに同じスライダーで表示させたくない画像がある場合に便利です。
1 2 |
<a href="/wordpress/wp-content/uploads/image001.png" data-lbwps-gid="group-001"><img src="image001.png"></a> <a href="/wordpress/wp-content/uploads/image002.png" data-lbwps-gid="group-001"><img src="image002.png"></a> |
スライダーで説明文を表示するには以下のように data-lbwps-caption 属性に任意の内容を指定します。
1 2 |
<a href="/wordpress/wp-content/uploads/image001.png" data-lbwps-caption="説明001"><img src="image001.png"></a> <a href="/wordpress/wp-content/uploads/image002.png" data-lbwps-caption="説明002"><img src="image002.png"></a> |
もちろん上記属性の共存が可能です。
(※ 当ページは社内技術資料としての位置付けですので読みにくいこともあるかもしれませんが、一般の方の課題解決に役立てれば幸いです。)
弊社サイトご案内
弊社ではデザイン会社様やウェブサイト制作会社様との提携・協業を随時お願いしております。