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 5 library installation
Compatible with photoswipe:^5 (beta) module only!
Composer (recommended)
- Enable usage of third-party libraries using composer, see here for an explanation.
- Require the photoswipe library using composer require bower-asset/photoswipe:^5
- (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
Photoswipe 4 library installation
Compatible with photoswipe:^4 module only!
Composer (recommended)
- Enable usage of third-party libraries using composer, see here for an explanation.
- Require the photoswipe library using composer require bower-asset/photoswipe:^4
- Check your status report
Manual
- Download the "PhotoSwipe-4.1.3" zip file
- Unzip and place the contents of the unzipped "PhotoSwipe-4.1.3" folder into "library/photoswipe" folder so that the folder structure is: library/photoswipe/dist/photoswipe.js
- Check the status report for errors
CDN
- CDN is used as a fallback, if the photoswipe library isn't installed.
Composer (recommended)
- Enable usage of third-party libraries using composer, see here for an explanation.
- Require the photoswipe library using composer require bower-asset/photoswipe:^5
- (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
Photoswipe 4 library installation
Compatible with photoswipe:^4 module only!
Composer (recommended)
- Enable usage of third-party libraries using composer, see here for an explanation.
- Require the photoswipe library using composer require bower-asset/photoswipe:^4
- Check your status report
Manual
- Download the "PhotoSwipe-4.1.3" zip file
- Unzip and place the contents of the unzipped "PhotoSwipe-4.1.3" folder into "library/photoswipe" folder so that the folder structure is: library/photoswipe/dist/photoswipe.js
- Check the status report for errors
CDN
- CDN is used as a fallback, if the photoswipe library isn't installed.
Composer (recommended)
- Enable usage of third-party libraries using composer, see here for an explanation.
- Require the photoswipe library using composer require bower-asset/photoswipe:^4
- Check your status report
Manual
- Download the "PhotoSwipe-4.1.3" zip file
- Unzip and place the contents of the unzipped "PhotoSwipe-4.1.3" folder into "library/photoswipe" folder so that the folder structure is: library/photoswipe/dist/photoswipe.js
- Check the status report for errors
CDN
- CDN is used as a fallback, if the photoswipe library isn't installed.
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.
Special thanks to Dmytro Semenov for creating the photoswipe library
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!)
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)
Project information
- Minimally maintained
Maintainers monitor issues, but fast responses are not guaranteed. - Maintenance fixes only
Considered feature-complete by its maintainers. - Module categories: Content Display, Media
- 8,968 sites report using this module
- Created by julou on , updated
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.
Releases
Photoswipe 5 compatible 🖼️
Development version: 5.x-dev updated 6 Feb 2024 at 15:06 UTC
Photoswipe 4 compatible
Development version: 4.x-dev updated 27 Sep 2023 at 09:05 UTC
Photoswipe 4 compatible
Development version: 7.x-4.x-dev updated 18 Jul 2023 at 11:56 UTC