Action: Gallery

Compatible with: R6.1
Current version: 0.10
Credits: WikiAdmin


Moved to core, except the lightbox.

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


gallery action with thumbnails

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


[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]

6.1. Lightbox

Set the parameter target=2 to use the lightbox.
gallery action with lightbox and caption
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]

9.1. Lightbox Alternatives

Others

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

Files

gallery_action_lightbox.jpg gallery action with lightbox and caption 116.4 KiB  14.04.2022 05:11 
gallery_action_thumbs.png gallery action with thumbnails 35.8 KiB  10.03.2017 15:13 
photoswipe_5.4.2.zip PhotoSwipe v5 — JavaScript image gallery and lightbox 25.8 KiB  03.11.2023 13:38