Differences

This shows you the differences between two versions of the page.

--- doc:plugins:photoswipe [2025/05/08 16:55] – [Changelog] fraenkiman
+++ doc:plugins:photoswipe [2025/05/29 13:53] (current) – added popup parameter description arvid
@@ Line 2: / Line 2: @@
 This FlatPress plugin displays single images and whole image galleries with the JavaScript library [[http://photoswipe.com/|PhotoSwipe]] by [[https://dimsemenov.com/|Dmytro Semenov]] which provides a very appealing fullscreen display of the images. And on mobile devices such as tablets or smartphone you can browse through the images by swipe gestures.
-Since the plugin uses FlatPress default functionality for building the image HTML, you may use the documented parameters of the [img] tag such as "alt", "title", "height", "width" or "float" (see [[doc:plugins:bbcode|FlatPress BBCode documentation]] for details).
 Author: [[https://www.arvidzimmermann.de|Arvid Zimmermann]]
 ===== Usage =====
-For a single image:
+Since the plugin uses FlatPress default functionality for building the image HTML, you may use the documented parameters of the [img] tag such as "alt", "title", "height", "width" or "float" (see [[doc:plugins:bbcode|FlatPress BBCode documentation]] for details). The PhotoSwipe plugin then takes care of the stylish swipeable fullscreen display of the images on clicking them.
-<code>[photoswipeimage="images/image.jpg"]</code>
-Floating image with given width:
-<code>[photoswipeimage="images/image.jpg" width="200" float="right"]</code>
-For an image gallery:
+=== Image galleries ===
-<code>[photoswipegallery="images/NameOfTheGallery"]</code>
+To display an image gallery:
+<code>[gallery="images/NameOfTheGallery"]</code>
 Gallery width given image height:
-<code>[photoswipegallery="images/NameOfTheGallery" height="100"]</code>
+<code>[gallery="images/NameOfTheGallery" height="100"]</code>
+=== Image without PhotoSwipe ===
+You may wish to display some images without the PhotoSwipe functionality (e.g. small icons, or images that work as links).
+The optional "popup" parameter does the trick:
+<code>[img="images/image.jpg" popup="false"]</code> This will display this particular image without the PhotoSwipe overlay.
+You'll need to use //popup="false"// if an image should work as a link:
+<code>[url="https://example.org"][img="images/image.jpg" popup="false"][/url]</code>
-=== Multiple Usage ===
-If the plugin is called a number of times on a page, all images referenced, whether as single images or as part of a gallery, will be displayed in a single gallery.
 ===== HTML+CSS =====
 The HTML code of the images is generated by the BBCode standard function //do_bbcode_img()// (see fp-plugins/bbcode/plugin.bbcode.php). Therefore, standard image attributes (such as "width", "height", etc.) can be used. Floating images will get a corresponding CSS class (e.g. "floatright").
@@ Line 41: / Line 45: @@
 == 2025-05-07: Version 2.0.4 ==
   * It is ensured that the overlay structure is always in the DOM. [[https://github.com/flatpressblog/flatpress/issues/572|(#572)]]
-  * An image with an link can be created if the “Popup” parameter contains false. [[https://github.com/flatpressblog/flatpress/issues/548|(#548)]] <code>[url="https:/example.org"][img="images/image.jpg" popup="false"][/url]</code>
+  * An image with an link can be created if the “Popup” parameter contains false. [[https://github.com/flatpressblog/flatpress/issues/548|(#548)]] <code>[url="https://example.org"][img="images/image.jpg" popup="false"][/url]</code>
   * After closing the overlay, the page remains accessible for screen readers. [[https://github.com/flatpressblog/flatpress/issues/622|(#622)]]
 == 2025-01-12: Version 2.0.2 ==