- 履歴一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- 自作プラグイン/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)
カテゴリ:プラグイン 自作 追加
目次
[表示]
画像のギャラリー表示プラグイン
gallery.inc.php | |
---|---|
製作者 | kanateko |
ライセンス | GPLv3 |
バージョン | 1.6 |
動作確認 | PukiWiki 1.5.3 ~ |
最終更新 | 2021-07-26 |
photoswipeを使って画像ギャラリーを作成するプラグイン。添付した画像を任意の数並べ、クリックorタップでグループごとにモーダルウィンドウでスライド表示する。
- このプラグインでできること
- キャプション付きで画像を一覧表示
- キャプションの表示/非表示の切替
- 画像の横幅の変更
- 画像を正方形や円に切り抜いて表示
- 一覧の左寄せ、中央揃え、右寄せ指定
- クリックorタップで拡大 & スライドショー
- スワイプやピンチなどスマホ操作に対応
- 編集無しでキャプション付きの画像を追加可能
- 追加ボタンの表示/非表示
- 凍結・編集制限付きの場合は追加不可
- キャプション付きで画像を一覧表示
ダウンロード
最新: GitHub
日付 | バージョン | 備考 |
---|---|---|
2021-07-26 | 1.6 |
|
2021-07-11 | 1.5 |
|
2021-07-01 | 1.4 |
|
2021-06-22 | 1.3 |
|
1.2 |
| |
2021-06-21 | 1.1 |
|
2021-06-20 | 1.0 |
|
2021-06-19 | 0.7 |
|
2021-06-18 | 0.6 |
|
2021-06-17 | 0.5 |
|
0.2 |
| |
2021-06-16 | 0.1 | 初版作成 |
インストール
- photoswipeを適当な場所にダウンロード・解凍する。
- 解凍した中の「dist」フォルダの名前を「pswp」に変更し、この「pswp」フォルダをPukiWikiの「skin」フォルダに入れる。
- ※「default-skin」フォルダおよび「photoswipe.min.js」「photoswipe-ui-default.min.js」「photoswipe.css」以外は削除してもOK。
- photoswipe-simplifyを適当な場所にダウンロード・解凍し、dist/js/ の「photoswipe-simplify.min.js」を「pswp」フォルダに追加する。
- GitHubから「gallery.inc.php」フォルダをダウンロードし、中にはいっている「gallery.inc.php」をPukiWikiの「plugin」フォルダに入れ、「gallery.css」の内容をpukiwiki.cssに追加する。
- PukiWikiの設定でマルチラインプラグインを許可する。
pukiwiki.ini.phpの56行目define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
- 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の場合キャプションは強制的に非表示になる。
- height=数値
使用例
ベーシック
画像の幅は比率を保った状態で自動的に変わる。
他のページに添付してある画像を表示する場合は "ページ名/ファイル名" (refプラグインなどと同じ) で記述すればOK。
#gallery{{ cat1.jpg>かわいい cat2.jpg cat3.jpg }}
横幅指定
横幅を指定すると、高さが比率を保ったまま自動的に変わるようになる。
#gallery(width=150){{ cat1.jpg>かわいい cat2.jpg>カワイイ cat3.jpg>kawaii }}
横幅指定 + 切り抜き (正方形) + 左寄せ + 縁無し
切り抜きは画像上端の中央が基準点になる。
#gallery(width=150,square,left,nowrap){{ cat1.jpg>かわいい cat2.jpg>カワイイ cat3.jpg>kawaii }}
横幅指定 + 切り抜き (円) + 追加ボタンなし
キャプションは表示されない。拡大時には表示される。
#gallery(width=200,circle,noadd){{ cat1.jpg>かわいい cat2.jpg>カワイイ cat3.jpg>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アプリケーションを作ってお...
コメント
最新の10件を表示しています。 コメントページを参照