View source for Action: Gallery

#||
||
Compatible with: !!(green)**R6.1**!!
Current version: 0.9
Credits: ((user:WikiAdmin WikiAdmin))

|{{toc numerate=1}} ||
||#

##""{{gallery}}""##

===Description===
Gallery action allows you to create a photo gallery with small pictures, linked to larger versions. Gallery uses standard WackoWiki file model.

file:gallery_action_thumbs.png

===Requirements===
  1. PHP 8.0 and GD 2.0+
  1. PHP Thumb Library
  1. folder ##file/thumb##

===Configuration===
  1. ((/Doc/English/AdminPanel Admin Panel)) settings
    1. ##img_create_thumbnail##
    1. ##img_max_thumb_width##
  1. make the tumbs folder writable ##chmod 0755 file/thumb/##
  1. router.conf: add photoswipe
  %%(hl diff)
diff --git a/wacko/config/router.conf b/wacko/config/router.conf
--- a/wacko/config/router.conf
+++ b/wacko/config/router.conf
@@ -108,8 +108,9 @@
 `^(theme/{}/css|theme/_common|admin/style)/{}$`				_ok!			// css
 `^image/(wikiedit/)?{}$`									_ok!			// icons
 `^theme/default/icon/{}$`									_ok!			// icons
-`^js/(lang/)?{}$`											_ok!			// js
+`^js/(lang/|photoswipe/)?{}$`								_ok!			// js
 `^file/(global/){}$`										_ok!			// global uploads
 `^setup/(image|css)/{}$`									_ok! unlock=1	// setup inlines
 `^xml/{}$`													_ok! age=0		// feeds
%%

%%(info type="note" title="Re-add this change after each Upgrade")
Do not forget to add/merge the additional folder to the router.conf after each WackoWiki upgrade, otherwise the router will ignore the folder and the script will not load.

##`^js/(lang/|photoswipe/)?{}$`                                    _ok!##
%% 

===Download==
  1. Repo for R6.1 (switch branch for previous versions)
    1. ((source:master/community/action/gallery.php action/gallery.php)) (add here: ##action/##)
    2. ((source:master/community/action/template/gallery.tpl action/template/gallery.tpl)) (add here: ##action/template/##)
  1. --((https://github.com/masterexploder/PHPThumb PHP Thumb Library)) (add here: ##lib/phpthumb/##)-- (part of distribution)
  2. optional (for lightbox)
    3. ((file:photoswipe_5.2.7.zip photoswipe_5.2.7.zip))  (add here: ##js/photoswipe/##)
      1. ((https://github.com/dimsemenov/PhotoSwipe/tree/master/dist PhotoSwipe)) — JavaScript image gallery and lightbox
        1. photoswipe.css
        2. photoswipe.esm.min.js
        3. photoswipe-lightbox.esm.min.js
      4. ((https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin Caption plugin))
        4. photoswipe-dynamic-caption-plugin.css
        5. photoswipe-dynamic-caption-plugin.esm.js


===Installation==
  1. Copy **gallery.php** to **action/** directory on your Wacko.
  1. Copy **gallery.tpl** to **action/template/** directory on your Wacko.
  1. Unpack and copy PhotoSwipe to **js/photoswipe/** directory

===Using==

Then you call action ##""{{gallery}}""## with params:

	##[page	= "page_tag"]## - call image from another page
	##[global	= 1]## - show global files
	##[perrow	= <Number of images per rows> ]## (default = 3)
	##[caption	= 1|2]## - show 1 file descriptions, 2 file caption
	##[title		= "Gallery"]## - album title
	##[target	= 1|2]## - show large images without page (##0## - inline (default) , ##1## - image, ##2## - lightbox)
	##[nomark	= 1]## - hide external border
	##[table	= 1]## - pictures in table

	##[order	= "time|name_desc|size|size_desc|ext"]##
	##[owner	= "UserName"]##
	##[max	= number]##

Set the parameter ##target=2## to use the lightbox.
file:gallery_action_lightbox.jpg?500
The lightbox only works if the user allows JavaScript in their browser, otherwise it would load the image directly in a new tab. 

====Example====
##""{{gallery  table=1 target=2 title="local pictures"}}""##

-> **((!/Example Example for Testing))**

====local usage of repository====
symlink the gallery action from community action folder in **wacko/action** and **wacko/action/template** folder in repo
%%
ln -s ../../community/action/gallery.php gallery.php
ln -s ../../../community/action/template/gallery.tpl gallery.tpl
%%

===Changelog===
0.1 Intitial version
0.7 Updated to work with R.6.1 (PHP 8.0, Null coalescing assignment operator)
0.8 added ##order="name_desc"## and changed time field names
0.9 added support for PhotoSwipe


===ToDo===
  1. --paging & lightbox--
  3. --add anchor to back button--
  5. adding multiple instances in a page, causes loading of multiple instances
  6. add it to the core

===Links===
  1. ((https://github.com/dimsemenov/PhotoSwipe PhotoSwipe)) [MIT License]
    * ((https://photoswipe.com/ PhotoSwipe Documentation))
    * ((https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin PhotoSwipe Dynamic caption plugin))

====Alternatives==
Others
  1. https://github.com/sachinchoolur/lightGallery [GPL3]