{{gallery}}

1. Description

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

2. Requirements

1. PHP 8.0 and GD 2.2+
2. PHP Thumb Library
3. folder file/thumb and file/thumb_local

3. Configuration

1. Admin Panel settings
   1. img_create_thumbnail
   2. img_max_thumb_width
2. make the tumbs folders writable chmod 0755 file/thumb/ file/thumb_local/

3.1. PhotoSwipe

see gallery.php

// 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();

4. Download

1. optional (for lightbox)
   1. photoswipe_5.4.4.zip (add here: js/photoswipe/)
      1. PhotoSwipe — JavaScript image gallery and lightbox
         1. photoswipe.css
         2. photoswipe.esm.min.js
         3. photoswipe-lightbox.esm.min.js
      2. Caption plugin
         1. photoswipe-dynamic-caption-plugin.css
         2. photoswipe-dynamic-caption-plugin.esm.min.js

5. Installation

1. Unpack and copy PhotoSwipe to js/photoswipe/ directory (optional)

6. Using

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

6.1. Lightbox

Set the parameter target=2 to use the lightbox.

The lightbox only works if the user allows JavaScript in their browser, otherwise it would load the image directly in a new tab.

6.2. Examples

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

-> Example for Testing

7. 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

8. ToDo

1. add it to the core DONE

9. Links

1. gallery action
   1. action/gallery.php
   2. action/template/gallery.tpl
2. PHP Thumb Library (part of distribution)
3. PhotoSwipe [MIT License]
   • PhotoSwipe Documentation
   • PhotoSwipe Dynamic caption plugin

9.1. Lightbox Alternatives

Others

1. https://github.com/sachinchoolur/lightGallery [GPL3]
2. https://github.com/andreknieriem/simplelightbox [MIT]