• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 自作プラグイン/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
   

6. URL短縮ライブラリを導入している場合は「gallery.inc.php」の "PLUGIN_GALLERY_USE_SHORT_URL" をtrueに変える。

プラグイン設定

PLUGIN_GALLERY_MAX_FILESIZE

アップロード可能なファイルの最大サイズ

PLUGIN_GALLERY_USE_SHORT_URL

短縮URLを使用しているかどうか。 (参照: PukiWikiのクソ長いURLをURL短縮ライブラリを組み込んで解決する！ | SEの良心)

使用方法

#gallery([オプション]){{
ファイル名>キャプション
︙
}}

キャプションは省略可

オプション

• height=数値
  一覧画像の高さを指定する。 (px)
  デフォルトは180。
• width=数値
  一覧画像の横幅を指定する。 (px)
• noadd
  画像追加ボタンを非表示にする。
• nocap
  一覧表示のキャプションを非表示にする。
  拡大した際には画面の下に表示される。
• nowrap
  画像の縁取りを無くす。
• left / center / right
  画像の一覧を左寄せ/中央揃え/右寄せにする。
  デフォルトは中央揃え。
• square / circle
  一覧表示した画像を正方形/円に切り抜いて表示する。
  circleの場合キャプションは強制的に非表示になる。

使用例

ベーシック

画像の幅は比率を保った状態で自動的に変わる。

他のページに添付してある画像を表示する場合は "ページ名/ファイル名" (refプラグインなどと同じ) で記述すればOK。

#gallery{{
cat1.jpg>かわいい
cat2.jpg
cat3.jpg
}}

かわいい

画像を追加する

横幅指定

横幅を指定すると、高さが比率を保ったまま自動的に変わるようになる。

#gallery(width=150){{
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
}}

かわいい

カワイイ

kawaii

画像を追加する

横幅指定 + 切り抜き (正方形) + 左寄せ + 縁無し

切り抜きは画像上端の中央が基準点になる。

#gallery(width=150,square,left,nowrap){{
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
}}

かわいい

カワイイ

kawaii

画像を追加する

横幅指定 + 切り抜き (円) + 追加ボタンなし

キャプションは表示されない。拡大時には表示される。

#gallery(width=200,circle,noadd){{
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
}}

かわいい

カワイイ

kawaii

追加したい機能

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

備考

• まっさらなPukiWikiの環境ではテストしてないので、動作や表示がうまく行われない可能性がある。使用に際して何らかの影響があったとしても責任は取りかねますので予めご了承を。
  案の定まともに動かなかったので修正。
• このページで表示されている追加ボタンのアイコン表示は配布版には実装されていない。 (別途FontAwesomeの導入が必要になるため)
• photoswipe単体だと色々と盛り込むことが多く、プラグイン化するにあたって面倒だったため、下記サイトで公開・配布されていた「photoswipe-simplify」を併せて使うことにした。
  

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

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

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

コメント