User Tools

Site Tools


doc:plugins:photoswipe

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
doc:plugins:photoswipe [2025/01/13 22:20] – [Changelog] fraenkimandoc:plugins:photoswipe [2025/05/29 13:53] (current) – added popup parameter description arvid
Line 1: Line 1:
 ====== PhotoSwipe ====== ====== PhotoSwipe ======
-This FlatPress plugin displays single images and whole image galleries with the JavaScript library [[http://photoswipe.com/|PhotoSwipe]] 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.+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]] Author: [[https://www.arvidzimmermann.de|Arvid Zimmermann]]
  
 ===== Usage ===== ===== 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: 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 ===== ===== 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 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 26: Line 30:
 Galleries are displayed as a series of images as described above, encapsulated by a <div class="img-gallery">. Galleries are displayed as a series of images as described above, encapsulated by a <div class="img-gallery">.
  
-===== Captions ===== +===== Image captions in galleries ===== 
-Captions of the gallery images will be read from a text file "texte.conf" within the gallery directory. +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.
-For having the title attribute in the gallery images (and therfore, also see it as description below the images in the gallery), just create a file "texte.conf" within the gallery directory. If you have the gallery images 1.jpg, 2.jpg and someother.jpg, your texte.conf should look like this: +
-<code> +
-1.jpg = Description of the first image +
-2.jpg = This is the second image. +
-someother.jpg = OMG, another image! +
-</code> +
- +
-For now, you have to create the texte.conf files for each gallery manually via FTP.  +
- +
-From FlatPress 1.3 on, the plugin "Gallery Captions" provides a convenient way write captions for gallery images in the FlatPress Admin Area.+
  
 ==== How to remove the captions ==== ==== How to remove the captions ====
-If you don't want to display captions at all, this is the easiest way to get rid of them: Just add the following to the CSS of your theme!+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> <code>div.img-gallery figcaption { display:none; }</code>
  
Line 46: Line 40:
 {{ :res:plugins:arvid:photoswipe1.0.6.zip |}} if FlatPress ≤ 1.2.1 {{ :res:plugins:arvid:photoswipe1.0.6.zip |}} if FlatPress ≤ 1.2.1
  
-{{ :res:plugins:arvid:photoswipe2_0_2.zip |}} if FlatPress 1.3 or 1.3.1+{{ :res:plugins:arvid:photoswipe2_0_4.zip |}} if FlatPress 1.3 or 1.3.1
  
 ===== Changelog ===== ===== 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 == == 2025-01-12: Version 2.0.2 ==
   * External images are displayed correctly. [[https://github.com/flatpressblog/flatpress/pull/520|(#520)]]   * External images are displayed correctly. [[https://github.com/flatpressblog/flatpress/pull/520|(#520)]]
 == 2024-12-22: Version 2.0.1 == == 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)]]   * Fixes the problem that the overlay bottons were displayed in the RSS and Atom feed [[https://github.com/flatpressblog/flatpress/pull/506|(#506)]]
doc/plugins/photoswipe.1736803225.txt.gz · Last modified: by fraenkiman

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki