Formatter in action
Formatter Selection
Formatter Options

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.

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!)

Stand With Ukraine

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)

Supporting organizations: 
proudly helped to improve this module in the 8.x version and fixed several issues.

Project information

Releases