• 追加された行はこの色です。
  • 削除された行はこの色です。
#author("2021-06-17T22:41:45+09:00","default:kanateko0404","kanateko0404")
#author("2021-06-18T20:21:39+09:00;2021-06-17T22:41:46+09:00","default:kanateko0404","kanateko0404")
RIGHT:&tag(プラグイン,自作,追加);

CENTER:#ref(gallery.jpg,center,nolink,wrap,400x0)
#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|
|~バージョン|0.5|
|~動作確認|PukiWiki 1.5.3 ～|
|~最終更新|2021-06-17|

}}

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

-このプラグインでできること
--キャプション付きで画像を一覧表示
--クリックorタップで拡大 & スライドショー
--編集無しでキャプション付きの画像を追加可能
#clear

*ダウンロード[#nc904a0b]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

|~日付|~バージョン|~備考|h
|2021-06-17|0.5|#ul(画像の追加機能を実装,画像追加ボタンの表示/非表示切り替え機能を追加)|
|~|0.2|#ul(他のページの添付画像を表示する機能を追加,一覧表示の画像の横幅を変更する機能を追加)|
|2021-06-16|0.1|初版作成|

*インストール [#ma9d057e]
+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.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''
画像追加ボタンを非表示にする。
*使用例 [#me8eb03d]
以下のページで使用しているのでそちらを参照
https://jpngamerswiki.com/back4blood/?020e7a553d#ea643bb0

*追加したい機能 [#rc557fc6]
-%%他のページの添付画像使えるようにする%% v0.2で実装
-%%一覧表示時の画像の横幅指定%% v0.2で実装
-%%画像追加機能%% v0.5で実装
--一応動くようにはなったけどどこにバグが潜んでいるやら
-画像のキャッシュ機能
--あったら軽量化が捗る。[[card.inc.php>../card]]で既にやってるのでコード流用すればいけそう
-添付ファイルの厳正な制限
--getimagesize関数を使えばできるんだとか
-デザインの調整
*コメント [#n8472dd2]
#pcomment(,10,above,reply)