#||
||
Compatible with: !!(green)**R6.1**!!
Current version: 0.10
Credits: ((user:WikiAdmin WikiAdmin))
Moved to core, except the lightbox.
|{{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.2+
1. PHP Thumb Library
1. folder ##file/thumb## and ##file/thumb_local##
===Configuration===
1. ((/Doc/English/AdminPanel Admin Panel)) settings
1. ##img_create_thumbnail##
1. ##img_max_thumb_width##
1. make the tumbs folders writable ##chmod 0755 file/thumb/ file/thumb_local/##
====PhotoSwipe====
see gallery.php
%%(hl javascript)
// Include Lightbox
import PhotoSwipeLightbox from '{$this->db->base_path}js/photoswipe/photoswipe-lightbox.esm.min.js';
import PhotoSwipeDynamicCaption from '{$this->db->base_path}js/photoswipe/photoswipe-dynamic-caption-plugin.esm.min.js';
const lightbox = new PhotoSwipeLightbox({
// may select multiple "galleries"
gallery: '#gallery--$param_token',
// Elements within gallery (slides)
children: 'a',
// setup PhotoSwipe Core dynamic import
pswpModule: () => import('{$this->db->base_path}js/photoswipe/photoswipe.esm.min.js')
});
const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, {
// Plugins options, for example:
type: 'auto',
captionContent: '.pswp-caption-content',
});
lightbox.init();
%%
===Download===
2. optional (for lightbox)
3. ((file:photoswipe_5.4.2.zip photoswipe_5.4.2.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.min.js
===Installation===
1. Unpack and copy PhotoSwipe to **js/photoswipe/** directory (optional)
===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]##
====Lightbox====
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.
====Examples====
##""{{gallery table=1 target=2 title="local pictures"}}""##
-> **((!/Example Example for Testing))**
===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
0.10 moved action to core
===ToDo===
1. --add it to the core-- DONE
===Links===
1. gallery action
1. ((source:master/src/action/gallery.php action/gallery.php))
2. ((source:master/src/action/template/gallery.tpl action/template/gallery.tpl))
1. ((https://github.com/PHPThumb/PHPThumb PHP Thumb Library)) (part of distribution)
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))
====Lightbox Alternatives====
Others
1. https://github.com/sachinchoolur/lightGallery [GPL3]
2. https://github.com/andreknieriem/simplelightbox [MIT]