====== PhotoSwipe ======
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.


Author: [[https://www.arvidzimmermann.de|Arvid Zimmermann]]

===== Usage =====
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.

=== Image galleries ===
To display an image gallery:
<code>[gallery="images/NameOfTheGallery"]</code>
Gallery width given image height:
<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>

===== 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").
The plugin will wrap that HTML in a <figure> element with the same CSS class as the image (e.g. "floatright"). The <figure> also contains a <figcaption> displaying the title of the image.
The <figure> element itself is surrounded by a <div class="photoswipe">.

Galleries are displayed as a series of images as described above, encapsulated by a <div class="img-gallery">.

===== Image captions in galleries =====
The plugin "Gallery Captions" provides a convenient way write captions for gallery images in the FlatPress Admin Area. Simply go to //Uploader// -> //Gallery captions// and select the gallery you want to edit the images captions for.

==== How to remove the captions ====
If you don't want to display gallery captions at all, this is the easiest way to get rid of them: Just add the following to the CSS of your theme!
<code>div.img-gallery figcaption { display:none; }</code>

===== Download =====
{{ :res:plugins:arvid:photoswipe1.0.6.zip |}} if FlatPress ≤ 1.2.1

{{ :res:plugins:arvid:photoswipe2_0_4.zip |}} if FlatPress 1.3 or 1.3.1

===== Changelog =====
== 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>
  * 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 ==
  * External images are displayed correctly. [[https://github.com/flatpressblog/flatpress/pull/520|(#520)]]
== 2024-12-22: Version 2.0.1 ==
  * Fixes the problem that the overlay bottons were displayed in the RSS and Atom feed [[https://github.com/flatpressblog/flatpress/pull/506|(#506)]]