PhotoSwipe - Responsive JavaScript Modal Image Gallery

Use PhotoSwipe to display picture galleries on your Drupal website. This Javascript lightbox / modal library offers very nice mobile browsing features (in particular swiping to the next picture)!

Features

• A "photoswipe" and "photoswipe_responsive" image formatter compatible with image and media entities
• Ability to use photoswipe as an image formatter inside views
• (5.x only) A twig function to attach photoswipe to images in a custom twig template.

Installation

Module Installation

Install as you would normally install a contributed Drupal module. For further
information, see Installing Drupal Modules

Photoswipe 6 support

Photoswipe 6 is comming. We'd love to support it asap and need your support or sponsoring: #3561479: [6.x] Photoswipe 6 Support

Photoswipe 5 library installation

photoswipe:^5 only!

Composer (recommended)

• Enable usage of third-party libraries using composer, see here for an explanation.
• Require the photoswipe library using e.g.
  composer require bower-asset/photoswipe:^5 or moving the files it into the libraries/photoswipe folder
• (Optional) Require the photoswipe dynamic caption plugin using composer require npm-asset/photoswipe-dynamic-caption-plugin:^1.2
• Check your status report

Manual

• Download the "PhotoSwipe-5.3.8" zip file
• Unzip and place the contents of the unzipped "PhotoSwipe-5.3.8" folder into "library/photoswipe" folder so that the folder structure is: library/photoswipe/dist/photoswipe.esm.js
• (Optional) See how to manually require the photoswipe dynamic caption plugin here
• Check the status report for errors

CDN

• Go to '/admin/config/media/photoswipe' and enable the 'Load PhotoSwipe library from CDN' option
• Check the status report for errors

Then simply configure your image fields to use Photoswipe as their field display handler.

Note: If you would like to use the "Photoswipe Responsive" display formatter, please enable the core "Responsive Image" module first.

Extending modules

• PhotoSwipe Inline Text Filter: Provides a Text Filter to make your inline images (e.g. images inserted through CKEditor for example) use photoswipe without manually adding HTML / CSS

Special thanks to Dmytro Semenov for creating the photoswipe library

Miscellaneous

In PhotoSwipe 5 the "Photoswipe image caption" option is present on the regular Display page of image fields (on /admin/structure/types/manage/library/display), but missing for the same image field in a View. The solution is Drupal core issue #2686145: Formatter third party settings missing from Views UI, and you can patch Drupal core until it gets fixed.

Drupal 7 specific setup

The Drupal 7 version depends on jquery_update (>2.2).
Because PhotoSwipe needs a jQuery version bigger than 1.5, jquery_update version 2.2 won't work. Please use the 2.3 version and make sure you have selected jQuery version 1.7 (recommended) or 1.8 in jquery_update settings.

Drupal 7 version information:

• Branch 7.x.4.x: For PhotoSwipe v4.x
• Branch 7.x.1.x: For PhotoSwipe v3.x (NOT SUPPORTED ANYMORE!)

Supporting this module

Support DROWL's ♥ FOSS work on this module on OpenCollective!

Drupal and this module are FOSS. However, it takes dedicated people to develop and maintain. And they need YOU to give back!

We're committed to building and maintaining Drupal modules that benefit the entire community.

Supporting us on OpenCollective helps us continue to improve, innovate and contribute to Drupal's future. Every pledge makes a difference!

If this module has helped you, we would be very grateful for your donation to support its further development and maintenance.

Support our FOSS development ♥️

You can also speed up the development of features or bugfixes you'd love to see, by sponsoring and giving back!

Sponsor a feature or bugfix 🚀

Let's make Drupal even better, together!

Development proudly sponsored by German Drupal Friends & Companies:

webks: websolutions kept simple (https://www.webks.de)
and
DROWL: Drupalbasierte Lösungen aus Ostwestfalen-Lippe (OWL), Germany (https://www.drowl.de)