photoswipe

What is photoswipe?

PhotoSwipe is a JavaScript library for creating image galleries that work on both desktop and mobile devices. It provides a responsive, touch-friendly interface for viewing images, with features like zooming, panning, and fullscreen mode.

What are photoswipe's main functionalities?

Basic Gallery Setup

This code sets up a basic PhotoSwipe gallery with two images. It initializes the gallery with default options.

const PhotoSwipe = require('photoswipe');
const PhotoSwipeUI_Default = require('photoswipe/dist/photoswipe-ui-default');

const items = [
  {
    src: 'path/to/image1.jpg',
    w: 600,
    h: 400
  },
  {
    src: 'path/to/image2.jpg',
    w: 1200,
    h: 900
  }
];

const options = {};

const gallery = new PhotoSwipe(document.querySelectorAll('.pswp')[0], PhotoSwipeUI_Default, items, options);
gallery.init();

Custom Options

This code demonstrates how to customize the PhotoSwipe gallery with options like starting index, background opacity, and disabling the share element.

const options = {
  index: 0, // start at first slide
  showHideOpacity: true,
  bgOpacity: 0.7,
  shareEl: false
};

const gallery = new PhotoSwipe(document.querySelectorAll('.pswp')[0], PhotoSwipeUI_Default, items, options);
gallery.init();

Event Handling

This code shows how to add event listeners to the PhotoSwipe gallery for events like image load completion and gallery closure.

gallery.listen('imageLoadComplete', function(index, item) {
  console.log('Image loaded:', item.src);
});

gallery.listen('close', function() {
  console.log('Gallery closed');
});

Other packages similar to photoswipe

lightgallery

Lightgallery is a powerful and flexible JavaScript library for creating image and video galleries. It offers a wide range of features including touch and mouse drag support, responsive design, and various plugins for additional functionalities. Compared to PhotoSwipe, Lightgallery provides more built-in features and customization options out of the box.

fancybox

Fancybox is a JavaScript library for displaying images, videos, and other content in a lightbox overlay. It is highly customizable and supports various content types, including HTML and AJAX. Fancybox is known for its ease of use and extensive documentation. While PhotoSwipe focuses on image galleries, Fancybox offers more versatility in terms of content types.

slick-carousel

Slick Carousel is a popular JavaScript library for creating responsive carousels and sliders. It supports various content types, touch and swipe gestures, and multiple customization options. Unlike PhotoSwipe, which is primarily for image galleries, Slick Carousel is more focused on creating sliders and carousels for a variety of content.

README

PhotoSwipe v5 — JavaScript image gallery and lightbox

Demo | Documentation

Repo structure

• dist/ - main JS and CSS
• src/ - source JS and CSS.
  • src/js/photoswipe.js - entry for PhotoSwipe Core.
  • src/js/lightbox/lightbox.js - entry for PhotoSwipe Lightbox.
• docs/ - documentation markdown files.
• demo-docs-website/ - website with documentation, demos and manual tests.
• build/ - rollup build config.

To build JS and CSS in dist/ directory, run npm run build.

To run the demo website and automatically rebuild files during development, run npm install in demo-docs-website/ and npm run watch in the root directory.

Older versions

Documentation for the old version (v4) can be found here and the code for 4.1.3 is here.