#author("2021-06-21T10:50:37+09:00","default:kanateko0404","kanateko0404")
RIGHT:&tag(プラグイン,自作,追加);
#style(class=flex){{
|CENTER:|c
|&ref(gallery.jpg,nolink,wrap,400x0);|
}}
#contentsx
*画像のギャラリー表示プラグイン [#x4043488]
#style(class=table_float_right){{
|>|~gallery.inc.php|h
|RIGHT:100|150|c
|~製作者|kanateko|
|~ライセンス|GPLv3|
|~バージョン|1.1|
|~動作確認|PukiWiki 1.5.3 ～|
|~最終更新|2021-06-21|
}}
photoswipeを使って画像ギャラリーを作成するプラグイン。添付した画像を任意の数並べ、クリックorタップでグループごとにモーダルウィンドウでスライド表示する。
:このプラグインでできること|
--キャプション付きで画像を一覧表示
---キャプションの表示/非表示の切替
---画像の横幅の変更
---画像を正方形や円に切り抜いて表示
---一覧の左寄せ、中央揃え、右寄せ指定
--クリックorタップで拡大 & スライドショー
---スワイプやピンチなどスマホ操作に対応
--編集無しでキャプション付きの画像を追加可能
---追加ボタンの表示/非表示
---凍結・編集制限付きの場合は追加不可
#clear
*ダウンロード[#nc904a0b]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]
|~日付|~バージョン|~備考|h
|2021-06-21|1.1|#ul(画像のボーダー (縁取り) を無効にする機能を追加,切り抜き時のキャプションはcircleのみ非表示になるよう変更)|
|2021-06-20|1.0|#ul(ページの編集権限をチェックする機能を追加,画像追加ボタンのデザインを調整,画像一覧の左寄せ・中央・右寄せを設定する機能を追加,画像一覧の画像を正方形や円に切り抜いて表示する機能を追加,画像一覧でキャプションを非表示にする機能を追加)|
|2021-06-19|0.7|#ul(ファイルフォーマットの判別を厳正化,アップロードに失敗した場合のエラーメッセージ表示を追加)|
|2021-06-18|0.6|#ul(使用するライブラリをlightboxからphotoswipeに変更,スマホでの操作性を最適化)|
|2021-06-17|0.5|#ul(画像の追加機能を実装,画像追加ボタンの表示/非表示切り替え機能を追加)|
|~|0.2|#ul(他のページの添付画像を表示する機能を追加,一覧表示の画像の横幅を変更する機能を追加)|
|2021-06-16|0.1|初版作成|
*インストール [#ma9d057e]
+[[photoswipe:https://photoswipe.com/]]を適当な場所にダウンロード・解凍する。
+解凍した中の「dist」フォルダの名前を「pswp」に変更し、この「pswp」フォルダをPukiWikiの「skin」フォルダに入れる。
--※「default-skin」フォルダおよび「photoswipe.min.js」「photoswipe-ui-default.min.js」「photoswipe.css」以外は削除してもOK。
+[[photoswipe-simplify:https://github.com/min30327/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行目
#prism(php){{
define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
}}
lightbox版 (v0.5で打ち止め)
#ac{{{
+jQueryを使うので、pukiwiki.skin.phpの<head>～</head>の間に以下の内容を追加する。
#prism(html){{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
}}
+[[lightbox:https://lokeshdhakar.com/projects/lightbox2/]]を適当な場所にダウンロード・解凍する。
+解凍した中の「dist」フォルダの名前を「lb」に変更し、この「lb」フォルダをPukiWikiの「skin」フォルダに入れる。
+GitHubから「gallery.inc.php」フォルダをダウンロードし、中にはいっている「gallery_lb.inc.php」をPukiWikiの「plugin」フォルダに入れ、「gallery.css」の内容をpukiwiki.css追加する
+PukiWikiの設定でマルチラインプラグインを許可する。
pukiwiki.ini.phpの56行目
#prism(php){{
define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
}}}
*使用方法 [#gf4f575f]
#gallery([オプション]){{
ファイル名>キャプション
︙
}}
キャプションは省略可
:オプション|
--''width=数値''
一覧表示の画像の横幅を指定する。 (px)
デフォルトは300。
--''noadd''
画像追加ボタンを非表示にする。
--''nocap''
一覧表示のキャプションを非表示にする。
拡大した際には画面の下に表示される。
--''nowrap''
画像の縁取りを無くす。
--''left / center / right''
画像の一覧を左寄せ/中央揃え/右寄せにする。
デフォルトは中央揃え。
--''square / circle''
一覧表示した画像を正方形/円に切り抜いて表示する。
circleの場合キャプションは強制的に非表示になる。
*使用例 [#me8eb03d]
**ベーシック [#d160327a]
画像の高さは比率を保った状態で自動的に変わる。高さも揃えたい場合はsquareオプションを推奨。キャプションの記述は無くてもOK。
他のページに添付してある画像を表示する場合は "ページ名/ファイル名" (refプラグインなどと同じ) で記述すればOK。
#gallery{{
cat1.jpg>かわいい
cat2.jpg
cat3.jpg
}}
#gallery{{
cat1.jpg>かわいい
cat2.jpg
cat3.jpg
}}
**横幅指定 + 切り抜き (正方形) + 左寄せ + 縁無し [#ibbb6cda]
切り抜きは画像上端の中央が基準点になる。
#gallery(width=150,square,left,nowrap){{
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
}}
#gallery(width=150,square,left,nowrap){{
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
}}
**横幅指定 + 切り抜き (円) + 追加ボタンなし [#w129022b]
キャプションは表示されない。拡大時には表示される。
#gallery(width=200,circle,noadd){{
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
}}
#gallery(width=200,circle,noadd){{
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
}}
*追加したい機能 [#rc557fc6]
-%%他のページの添付画像使えるようにする%% v0.2で実装
-%%一覧表示時の画像の横幅指定%% v0.2で実装
-%%画像追加機能%% v0.5で実装
-%%添付ファイルの厳正な制限%% v0.7で実装
-%%デザインの調整%% v1.0で一旦完了
*備考 [#w4fc27ad]
-まっさらなPukiWikiの環境ではテストしてないので、動作や表示がうまく行われない可能性がある。使用に際して何らかの影響があったとしても責任は取りかねますので予めご了承を。
-このページで表示されている追加ボタンのアイコン表示は配布版には実装されていない。 (別途FontAwesomeの導入が必要になるため)
-photoswipe単体だと色々と盛り込むことが多く、プラグイン化するにあたって面倒だったため、下記サイトで公開・配布されていた「photoswipe-simplify」を併せて使うことにした。
#ogp(https://www.willstyle.co.jp/blog/1881/)
*コメント [#n8472dd2]
#pcomment(,10,above,reply)
