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

v5 is now available for testing, please visit documentation and examples and report any issues that you find.

Install beta via NPM via (or grab files from dist/):

npm install photoswipe#beta

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.
• website/ - website with documentation, demos and manual tests.
• build/ - rollup build config.

Build

• npm run build - builds and minifies JS and CSS to dist/ directory.
• npm run lint - lints JS files in src/ with eslint (npm run lint-auto-fix to fix auto-fixable issues).

Build docs and demos

• npm install in root
• npm install in /website/ directory to get docusaurus (if you also need to build docs)
• npm run watch - watches changes for files in src/ and docs/, starts Docusaurus - demo website with many examples where you perform manual tests, at 3000 port (visit http://localhost:3000).