/
JQPhotoSwipeContrib.txt
111 lines (84 loc) · 4.92 KB
/
JQPhotoSwipeContrib.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
%META:TOPICINFO{author="ProjectContributor" comment="" date="1464621577" format="1.1" version="1"}%
---+!! %TOPIC%
%$SHORTDESCRIPTION%
%TOC%
---++ Description
%TOPIC% is a thin wrapper to bring [[http://photoswipe.com/][PhotoSwipe]] to Foswiki. It adds the minimum amount of glue
to render an image gallery using this frontend. <nop>%TOPIC% is meant to be used together with [[Foswiki:Extensions/ImagePlugin][ImagePlugin]] or
[[Foswiki:Extensions/ImageGalleryPlugin][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.
<verbatim class="tml">
%JQREQUIRE{"photoswipe"}%
<div class="jqPhotoSwipe">
%IMAGE{"image1.png" size="200"}%
%IMAGE{"image2.png" size="200"}%
%IMAGE{"image3.png" size="200"}%
%IMAGE{"image4.png" size="200"}%
</div>
</verbatim>
As with other =JQ...Contrib= extensions the macro =%<nop>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 %TOPIC% being installed automatically and will then switch to this frontend (starting with version 7.10).
---++ Examples
You type:
<verbatim class="tml">
%IMAGEGALLERY%
</verbatim>
You get (if installed):
%IF{"context ImageGalleryPluginEnabled"
then="$percntIMAGEGALLERY$percnt"
else="<span class='foswikiAlert'><nop>ImageGalleryPlugin not installed</span>"
}%
You type:
<verbatim class="tml">
%JQREQUIRE{"photoswipe"}%
<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"}%
</div>
</verbatim>
You get (if installed):
%JQREQUIRE{"photoswipe"}%
<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"}%
</div>
---++ Options
Additional parameter to photoswipe might be specified using HTML5 data attributesm, such as in below example:
<verbatim class="tml">
<div class="jqPhotoSwipe" data-allow-pan-to-next="false">
...
</div>
</verbatim>
See the [[http://photoswipe.com/documentation/options.html][full documentation]] of all options.
---++ Installation Instructions
%$INSTALL_INSTRUCTIONS%
---++ Dependencies
%$DEPENDENCIES%
---++ Change History
%TABLE{columnwidths="7em" tablewidth="100%"}%
| 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 |
%META:FORM{name="PackageForm"}%
%META:FIELD{name="Author" title="Author" value="Michael Daum"}%
%META:FIELD{name="Version" title="Version" value="%25$VERSION%25"}%
%META:FIELD{name="Release" title="Release" value="%25$RELEASE%25"}%
%META:FIELD{name="Description" title="Description" value=""}%
%META:FIELD{name="Repository" title="Repository" value="https://github.com/foswiki/%25$ROOTMODULE%25"}%
%META:FIELD{name="Copyright" title="Copyright" value="2016-2017, Michael Daum http://michaeldaumconsulting.com"}%
%META:FIELD{name="License" title="License" value="GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]])"}%
%META:FIELD{name="Home" title="Home" value="http://foswiki.org/Extensions/%25$ROOTMODULE%25"}%
%META:FIELD{name="Support" title="Support" value="http://foswiki.org/Support/%25$ROOTMODULE%25"}%
%META:FILEATTACHMENT{name="15008465772_d50c8f0531_h.jpg" attachment="15008465772_d50c8f0531_h.jpg" attr="" comment="Photo: Thomas Lefebvre" date="1464621577" size="394005" user="ProjectContributor" version="1"}%
%META:FILEATTACHMENT{name="14985868676_b51baa4071_h.jpg" attachment="14985868676_b51baa4071_h.jpg" attr="" comment="Photo: Michael Hull" date="1464621577" size="338118" user="ProjectContributor" version="1"}%
%META:FILEATTACHMENT{name="14985871946_24f47d4b53_h.jpg" attachment="14985871946_24f47d4b53_h.jpg" attr="" comment="Photo: Ales Krivec" date="1464621577" size="397457" user="ProjectContributor" version="1"}%
%META:FILEATTACHMENT{name="15008867125_b61960af01_h.jpg" attachment="15008867125_b61960af01_h.jpg" attr="" comment="Photo: Samuel Rohl" date="1464621577" size="607539" user="ProjectContributor" version="1"}%
%META:FILEATTACHMENT{name="15008518202_c265dfa55f_h.jpg" attachment="15008518202_c265dfa55f_h.jpg" attr="" comment="Photo: Folkert Gorter" date="1464621577" size="696089" user="ProjectContributor" version="1"}%