Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

photoswipe

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

photoswipe

JavaScript gallery

  • 5.3.3
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created

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

Keywords

FAQs

Package last updated on 25 Oct 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc