Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

PhotoSwipe

JavaScript image gallery for mobile and desktop, modular, framework independent

Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402 (2 ratings)
Rated 5.0 out of 5
Subscribe to updates I use PhotoSwipe


Statistics on PhotoSwipe

Number of watchers on Github 16033
Number of open issues 426
Average time to close an issue 14 days
Main language JavaScript
Average time to merge a PR 8 days
Open pull requests 56+
Closed pull requests 33+
Last commit over 1 year ago
Repo Created over 8 years ago
Repo Last Updated over 1 year ago
Size 27.5 MB
Homepage http://photoswipe...
Organization / Authordimsemenov
Latest Releasev4.1.2
Contributors40
Page Updated
Do you use PhotoSwipe? Leave a review!
View open issues (426)
View PhotoSwipe activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating PhotoSwipe for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

PhotoSwipe Repository

Build Status devDependency Status Flattr

JavaScript image gallery for mobile and desktop.

Location of files

  • Compiled PhotoSwipe JS and CSS files, SVG and PNG sprites are in the dist/ folder.
  • Source files (.JS and .SCSS) are in the src/ folder. Note that PhotoSwipe uses Autoprefixer when compiling SASS files.
  • Demo website is in the website/ folder.
  • Documentation markdown files are in website/documentation/.

Plugins / extensions / addons

Coded something useful? Email me and Ill post a link to it here.

Build

To compile PhotoSwipe by yourself, make sure that you have Node.js, Grunt.js, Ruby and Jekyll installed, then:

1) Clone the repository

git clone https://github.com/dimsemenov/PhotoSwipe.git

2) Go inside the PhotoSwipe folder that you fetched and install Node dependencies

cd PhotoSwipe && npm install

3) Run grunt to generate the JS and CSS files in the dist folder and the site in the _site/ folder

grunt

Optionally:

  • Run grunt watch to automatically rebuild files (JS, CSS, demo website and documentation) when you change files in src/ or in website/.
  • Run grunt nosite to build just JS and CSS files (output is folder dist/).
  • Run grunt pswpbuild to build just JS files. Param --pswp-exclude allows to exclude modules, for example grunt pswpbuild --pswp-exclude=history will exclude history module.

Using PhotoSwipe?

If youve used PhotoSwipe in some interesting way, or on the site of a popular brand, Id be very grateful if you shoot me a link to it.

License

Script is licensed under MIT license with one exception: Do not create a public WordPress plugin based on it, as I will develop it. If you need to use it for a public WordPress plugin right now, please ask me by email first. Thanks!

Attribution is not required, but much appreciated, especially if youre making a product for developers.

About

PhotoSwipe 4.0+ is developed by Dmitry Semenov. But initially script was created in 2011 by Code Computerlove, a digital agency in Manchester, they passed on development in March 2014. You can view source and documentation of old PhotoSwipe (<4.0) in history of this repo.

PhotoSwipe open issues Ask a question     (View All Issues)
  • almost 3 years Relation and group of swiping
  • almost 3 years active item
  • almost 3 years don't show first image upon init
  • almost 3 years on click image gallery to trigger closing the gallery
  • almost 3 years Photoswipe won't close if image has no thumb
  • almost 3 years Vertical swipe
  • almost 3 years Buttons still active when topbar is hidden
  • almost 3 years Sliding behavior when using arrows or keys?
  • almost 3 years Zoom in/out performance issues on mobile
  • almost 3 years showAnimationDuration prevents rendering image properly after using goTo() right after init()
  • almost 3 years Swap '&' for '?' In the first parameter for server detection.
  • almost 3 years galleryUID as string?
  • almost 3 years Download image functionality not working in Firefox
  • almost 3 years Incompatible with passive event listeners
  • almost 3 years Saving image on mobile
  • almost 3 years Simple tap/zoom problem
  • almost 3 years update problem when items array size shrinks from 3 to 2
  • almost 3 years Hiding the scrollbar
  • almost 3 years I want use only the zoom icon in the top bar, is possible ?
  • almost 3 years Hide toolbar after some time on mobile
  • almost 3 years Cannot read property 'center' of undefined
  • almost 3 years How to make the bottombar as high as the available space under the image?
  • almost 3 years screen.width vs. max(width, height)
  • almost 3 years Grabbing cursor does not display in IE, edge
  • almost 3 years Inconsistent desktop zoom behavior (mouse click vs. double tap)
  • almost 3 years Wheel scroll event not panning images in some browsers
  • almost 3 years Quirks with suggested responsive image code
  • almost 3 years Desktop Chrome zoom in not using hardware acceleration?
  • almost 3 years Screen zooms (or toggles contols) on touch devices when share option selected
  • almost 3 years need possibility to put content between images
PhotoSwipe open pull requests (View All Pulls)
  • New "appendingImage" event
  • Just checking the existence of the element
  • 'Loop' option respected on desktop (Fixes #860)
  • Image embed
  • Change pointer events existence check method
  • Add Node.js v4 stable to Travis config
  • Add horizPanStarted handler
  • indexIndicatorFormatFn option
  • Alt and title attribute on image
  • Button doesn't fire when has a child
  • Do not catch scroll event when closeOnScrol == false.
  • Uses result from addCaptionHTMLFn() to decide whether there's a caption
  • Less CSS Support
  • added new option to toggle off swiping. update options in docs
  • FEATURE: Add possibility to choose filename and add some colors
  • Updated getting-started to use markdown docs
  • Fix mislabeling in UI and wrong pid numbers
  • improvements to UI customization options
  • small bugfix for default ui
  • new features: slideshow mode and transition effect
  • Make share menu output XHTML compatible
  • FEATURE: Global Loop option added: True, False, 'Once'
  • Added AnimateSlide Module
  • Fixed a preload bug at the seam
  • Added Drupal module to links in README.
  • Added simple video support
  • do not open a popup when there is a mailto: share link, or when nopopup:true is set
  • Add css class to the image on load
  • fix issue #1198 Screen zooms (or toggles contols) on touch devices wh…
  • Animated transitions
  • Added rotation based on provided EXIF orientation data
  • Add ability to asynchronously determine final image URL
  • Tiny issue with "pswp__counter" on RTL sites
  • Allow natural image dimensions to override passed in width and height
  • Remove html contents more gracefully
  • Pswp crash with responsive images and html
  • fix for single element share list
  • Typo errata
  • Add style key to package.json
  • fix #1352
  • [UI] Added Download Button
  • [UI] Tap/click show next image if non zoomable
  • Reimplement 'initialZoomOutEnd' event
  • feature: support prependItems/appendItems/removeItems
  • Remove animation when dragging images to close them.
  • fix #1390 - Cannot read property 'updateScrollOffset' of null
  • Add jsDelivr hits badge
  • Allow to define an alt text for images for accessibility reasons
  • define root in strict mode for browsers
  • Feature: Extended the barsSize option to add space around the fullscreen image
  • Fixed #1376 and built CSS
  • fix firefox mouseup event not working properly.
  • Translations for html markup
  • Fix example: Added msrc to get the thumbnail to animate
  • Ensure correct image aspect ratio
  • Add Yarn install
PhotoSwipe questions on Stackoverflow (View All Questions)
  • How to I use Photoswipe to display images from my database in ruby on rails
  • How do I show ruby images in Bootstrap Photoswipe?
  • Photoswipe - thumbnails on fullscreen mode
  • Polymer elements overlaying photoswipe on iOS
  • OwlCarousel with Photoswipe
  • PhotoSwipe: use image element as trigger
  • How can I prevent photoswipe to unbind my scroll event?
  • Way for easy integration of PhotoSwipe
  • photoswipe custom button raise on browser but not on mobile
  • How to show the original image on photoswipe plugin
  • Making animation when image is closed Photoswipe
  • Easy Way to Invoke PhotoSwipe On Images List
  • photoswipe fullscreen button missing on mobile devices
  • Loading html image list to photoswipe array
  • PhotoSwipe How to center vertically thumbnails? Thank
  • Photoswipe continuous gallery
  • How to disable Photoswipe Animation for Thumbnails
  • Modifying PhotoSwipe 4 Caption Font
  • Responsive PhotoSwipe with large controls on mobile device
  • PhotoSwipe: Responsive Images Example
  • PhotoSwipe with AngularJS
  • PhotoSwipe: edit parseThumbnailElements function to parse additional markup element
  • Having trouble implementing PhotoSwipe
  • photoswipe: pid/gid link to particular photo
  • Magnific vs PhotoSwipe
  • Photoswipe plugin issue
  • Photoswipe and Require.js configuration
  • PhotoSwipe fullscreen fit to window
  • Photoswipe Android mobile - Image flickering
  • PhotoSwipe with Isotope (galleries)
PhotoSwipe list of languages used
PhotoSwipe latest release notes
v4.1.2 v4.1.2

Fix: iOS 10.3 not updating layout after orientaton change in some cases. For more details please refer to issue https://github.com/dimsemenov/PhotoSwipe/issues/1315#issuecomment-291897591

v4.1.1 v4.1.1
  • Fix: click on inline SVG in slide or controls causes error SvgAnimatedString no className.
  • Fix: Firefox 42 not rendering nearby images sometimes, issue #1014.
  • Disabled native fullscreen option entirely in old versions of Android
  • Added option fitControlsWidth for the default UI (default was not changed 1200px), issue #1021.

:christmas_tree:

v4.1.0 v4.1.0

Improved rendering performance of images that are larger than PhotoSwipe viewport, which leads to more smooth swipe transition and decreased memory usage (up to 50% depending on image and viewport size), but affects zooming behaviour.

Composited layer for the image is now created only after it's zoomed. Watch screencast that demonstrates how it works now.

This change does not affect public API, everything should work as before.

Also some small things that were changed:

  • closeOnScroll is now blocked if animations are running or gesture is performed.
  • Horizontal dragging direction is forced if previous swipe transition wasn't finished.
  • Reduced duration of transition that finishes zoom gesture (300 to 200ms).
  • verticalDragRange default value increased from 0.6 to 0.75.
  • Reduced default maximum spread and double tap zoom level from 2x and 1.5x to 1.33x.
Other projects in JavaScript