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.
PhotoSwipe v5 — JavaScript image gallery and lightbox
Demo | Documentation
Repo structure
dist/
- main JS and CSSsrc/
- 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.