Modern javascript image gallery


JQPhotoSwipeContrib is a thin wrapper to bring PhotoSwipe to Foswiki. It adds the minimum amount of glue to render an image gallery using this frontend. JQPhotoSwipeContrib is meant to be used together with ImagePlugin or ImageGalleryPlugin to render thumbnails on the backend while PhotoSwipe is used on the frontend.

The easiest way is to wrap a couple of %IMAGE tags with a div element using the jqPhotoSwipe css class.


<div class="jqPhotoSwipe">
%IMAGE{"image1.png" size="200"}%
%IMAGE{"image2.png" size="200"}%
%IMAGE{"image3.png" size="200"}%
%IMAGE{"image4.png" size="200"}%

As with other JQ...Contrib extensions the macro %JQREQUIRE{"photoswipe"}% will load the required javascript assets into the page including an initializer to process any thumbnails wrapped by a jqPhotoSwipe element.

Note that ImageGalleryPlugin detects JQPhotoSwipeContrib being installed automatically and will then switch to this frontend (starting with version 7.10).


You type:


You get (if installed):

ImageGalleryPlugin not installed

You type:

<div class="jqPhotoSwipe">
%IMAGE{"15008867125_b61960af01_h.jpg" size="95x95" crop="on"}%
%IMAGE{"15008518202_c265dfa55f_h.jpg" size="95x95" crop="on"}%
%IMAGE{"15008465772_d50c8f0531_h.jpg" size="95x95" crop="on"}%
%IMAGE{"14985871946_24f47d4b53_h.jpg" size="95x95" crop="on"}%
%IMAGE{"14985868676_b51baa4071_h.jpg" size="95x95" crop="on"}%

You get (if installed):

%IMAGE{"15008867125_b61960af01_h.jpg" size="95x95" crop="on"}% %IMAGE{"15008518202_c265dfa55f_h.jpg" size="95x95" crop="on"}% %IMAGE{"15008465772_d50c8f0531_h.jpg" size="95x95" crop="on"}% %IMAGE{"14985871946_24f47d4b53_h.jpg" size="95x95" crop="on"}% %IMAGE{"14985868676_b51baa4071_h.jpg" size="95x95" crop="on"}%


Additional parameter to photoswipe might be specified using HTML5 data attributesm, such as in below example:

<div class="jqPhotoSwipe" data-allow-pan-to-next="false">

See the full documentation of all options.

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. "Extensions Operation and Maintenance" Tab -> "Install, Update or Remove extensions" Tab. Click the "Search for Extensions" button. Enter part of the extension name or description and press search. Select the desired extension(s) and click install. If an extension is already installed, it will not show up in the search results.

You can also install from the shell by running the extension installer as the web server user: (Be sure to run as the webserver user, not as root!)
cd /path/to/foswiki
perl tools/extension_installer <NameOfExtension> install

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See https://foswiki.org/Support/ManuallyInstallingExtensions for more help.



Change History

05 Mar 2018 updated to latest photoswipe version
24 Oct 2017 cleaned up photoswipe template from unnecessary html comments
02 Sep 2016 fixed Config.spec typo; fixed javascript initializer; better usability navigating images in gallery
30 May 2016 initial release

PackageForm edit

Author Michael Daum
Version 1.03
Release 05 Mar 2018
Repository https://github.com/foswiki/JQPhotoSwipeContrib
Copyright 2016-2017, Michael Daum http://michaeldaumconsulting.com
License GPL (GNU General Public License)
Home http://foswiki.org/Extensions/JQPhotoSwipeContrib
Support http://foswiki.org/Support/JQPhotoSwipeContrib
Topic attachments
I Attachment Action Size Date Who Comment
14985868676_b51baa4071_h.jpgjpg 14985868676_b51baa4071_h.jpg manage 330 K 30 May 2016 - 15:19 ProjectContributor Photo: Michael Hull
14985871946_24f47d4b53_h.jpgjpg 14985871946_24f47d4b53_h.jpg manage 388 K 30 May 2016 - 15:19 ProjectContributor Photo: Ales Krivec
15008465772_d50c8f0531_h.jpgjpg 15008465772_d50c8f0531_h.jpg manage 384 K 30 May 2016 - 15:19 ProjectContributor Photo: Thomas Lefebvre
15008518202_c265dfa55f_h.jpgjpg 15008518202_c265dfa55f_h.jpg manage 679 K 30 May 2016 - 15:19 ProjectContributor Photo: Folkert Gorter
15008867125_b61960af01_h.jpgjpg 15008867125_b61960af01_h.jpg manage 593 K 30 May 2016 - 15:19 ProjectContributor Photo: Samuel Rohl
Topic revision: r1 - 30 May 2016, ProjectContributor
This site is powered by FoswikiCopyright &© by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback