Action: Gallery

bugs:
Compatible with: R5.5
Current version: beta3
Credits:

{{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 5 and GD 2.0+
  2. PHP Thumb Library
  3. folder file/thumb

3. Configuration

  1. Admin Panel settings
    1. img_create_thumbnail
    2. img_max_thumb_width
  2. make the tumbs folder writable chmod 0777 file/thumb/
  3. router.conf: add fancybox and tumbnail folder
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/|fancybox/)?{}$`                                    _ok!            // js
 `^file/(global/){}$`                                        _ok!            // global uploads
+`^file/thumb/{}$`                                            _ok!            // global thumbs
 `^setup/(image|css)/{}$`                                    _ok! unlock=1    // setup inlines
 `^xml/{}$`                                                    _ok! age=0        // feeds

4. Download

  1. Repo: source:community/action/gallery.php (add here: action/)
  2. PHP Thumb Library (add here: lib/phpthumb/)
  3. optional
    1. jQuery library (add here: js/)
    2. fancyBox3 (add here: js/fancybox/)
      1. jquery.fancybox.min.css
      2. jquery.fancybox.min.js

5. Installation

  1. Copy gallery.php to action/ directory on your Wacko.
  2. Unpack and copy phpthump to lib/ directory
  3. Copy jQuery library to js/ directory
  4. Unpack and copy fancyBox to js/fancybox/ directory
  5. Create a writable folder under files/thumb/

6. Using


Then you call action {{gallery}} with params:
parameter description default

[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 (if = 2 in new browser window)
[nomark = 1] – hide external border
[table = 1] – pictures in table

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

Set the parameter target=2 to use fancyBox.

6.1. Example

{{gallery table=1 target=2 title="Local pictures"}}
-> Example for Testing

6.2. local usage of repository

symlink gallery.php from community action folder in wacko/action folder in repo
ln -s ../../community/action/gallery.php gallery.php

6.3. Styling

  1. https://www.w3.org/Style/Examples/007/figures.en.html

7. ToDo

  1. paging & lightbox
  2. paging in single view
  3. add anchor to back button
  4. load jQuery and fancybox only once, add stack for footer
  5. adding multiple instances in a page, causes loading of multiple instances

8. Links

  1. https://github.com/fancyapps/fancybox
  2. https://jquery.com/

8.1. Alternatives

Replacement with an MIT / Apache / BSD license so we can add it to the core.

  1. http://www.jacklmoore.com/colorbox/ [MIT license]
  2. https://brutaldesign.github.io/swipebox/ [MIT license]
  3. https://github.com/dimsemenov/Magnific-Popup [MIT license]
    1. https://www.smashingmagazine.c[..]responsive-lightbox/

Others

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

You can change source code on your purposes.

Show Files (1 file)

Read comment (1 comment)