• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 自作プラグイン/gallery へ行く。
  • 1 (2021-06-17 (木) 10:39:46)
  • 2 (2021-06-17 (木) 13:11:17)
  • 3 (2021-06-17 (木) 14:03:59)
  • 4 (2021-06-17 (木) 22:41:46)
  • 5 (2021-06-17 (木) 22:41:46)
  • 6 (2021-06-18 (金) 21:51:34)
  • 7 (2021-06-19 (土) 05:52:20)
  • 8 (2021-06-21 (月) 08:30:21)
  • 9 (2021-06-21 (月) 10:50:37)
  • 10 (2021-06-22 (火) 06:27:50)
  • 11 (2021-06-22 (火) 06:27:50)
  • 12 (2021-06-22 (火) 15:29:20)
  • 13 (2021-06-22 (火) 15:29:20)
  • 14 (2021-07-01 (木) 22:12:01)
  • 15 (2021-07-01 (木) 22:12:01)
  • 16 (2021-07-01 (木) 22:12:01)
  • 17 (2021-07-01 (木) 22:12:01)
  • 18 (2021-07-11 (日) 23:54:45)
  • 19 (2021-07-11 (日) 23:54:45)
  • 20 (2021-07-26 (月) 22:28:12)
  • 21 (2021-07-26 (月) 22:28:12)
  • 22 (2021-07-26 (月) 22:28:12)
  • 23 (2021-09-29 (水) 05:23:46)
  • 24 (2021-09-29 (水) 05:23:46)
  • 25 (2021-09-29 (水) 05:23:46)
  • 26 (2022-05-28 (土) 02:10:03)
  • 27 (2022-05-28 (土) 02:10:03)
  • 28 (2022-05-28 (土) 02:10:03)
  • 29 (2022-07-09 (土) 12:05:24)
  • 30 (2022-07-09 (土) 12:07:45)
  • 31 (2022-07-09 (土) 12:07:45)
  • 32 (2022-07-09 (土) 12:07:45)
  • 33 (2022-11-17 (木) 01:08:36)
  • 34 (2023-05-24 (水) 16:24:02)
  • 35 (2023-05-27 (土) 00:40:33)
  • 36 (2023-06-10 (土) 03:06:23)

画像のギャラリー表示プラグイン

photoswipeを使って画像ギャラリーを作成するプラグイン。添付した画像を任意の数並べ、クリックorタップでグループごとにモーダルウィンドウでスライド表示する。

• このプラグインでできること
  • キャプション付きで画像を一覧表示
  • クリックorタップで拡大 & スライドショー
  • スワイプやピンチなどスマホ操作に対応
  • 編集無しでキャプション付きの画像を追加可能

ダウンロード

最新: GitHub

インストール

1. photoswipeを適当な場所にダウンロード・解凍する。
2. 解凍した中の「dist」フォルダの名前を「pswp」に変更し、この「pswp」フォルダをPukiWikiの「skin」フォルダに入れる。
   • ※「default-skin」フォルダおよび「photoswipe.min.js」「photoswipe-ui-default.min.js」「photoswipe.css」以外は削除してもOK。
3. photoswipe-simplifyを適当な場所にダウンロード・解凍し、dist/js/ の「photoswipe-simplify.min.js」を「pswp」フォルダに追加する。
4. GitHubから「gallery.inc.php」フォルダをダウンロードし、中にはいっている「gallery.inc.php」をPukiWikiの「plugin」フォルダに入れ、「gallery.css」の内容をpukiwiki.css追加する
5. PukiWikiの設定でマルチラインプラグインを許可する。
   pukiwiki.ini.phpの56行目

    define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
   

lightbox版 (v0.5で打ち止め)

使用方法

#gallery{{
ファイル名>キャプション
︙
}}

キャプションは省略可

オプション

• width=数値
  一覧表示の画像の横幅を指定する。 (px)
  デフォルトは300。
• noadd
  画像追加ボタンを非表示にする。

使用例

以下のページで使用しているのでそちらを参照
https://jpngamerswiki.com/back4blood/?020e7a553d#ea643bb0

追加したい機能

• 他のページの添付画像使えるようにする v0.2で実装
• 一覧表示時の画像の横幅指定 v0.2で実装
• 画像追加機能 v0.5で実装
• 添付ファイルの厳正な制限 v0.7で実装
• デザインの調整

備考

• photoswipe単体だと色々と盛り込むことが多く、プラグイン化するにあたって面倒だったため、下記サイトで公開・配布されていた「photoswipe-simplify」を併せて使うことにした。
  

  VanillaJSの高機能Lightboxプラグイン「PhotoSwipe.js」を使いやすくしてみた | Will Style Inc.｜神戸にあるウェブ制作会社

  こんにちは、制作の奥田です。今期から取締役 CTOに就任しました。就任したからといってもやる業務は大きくは変わる事はなく、引き続き魂を込めて制作していきたいと思います。さて、VanillaJSでWebサイトやWebアプリケーションを作ってお...

  https://www.willstyle.co.jp/blog/1881/

コメント