PhotoSwipe Versions Save

Major update that changes initialization method!

New demo | New docs

What's new

Code quality and rewrite in ES6 The script is now distributed as an ES module and does not require a build step to use.

Simpler initialization and dynamic import support PhotoSwipe now supports dynamic import and does not block page rendering.

<script type="module">
import Lightbox from './photoswipe-lightbox.esm.js';
const lightbox = new Lightbox({
  gallery: '#my-gallery',
  children: 'a',
  pswpModule: () => import('./photoswipe.esm.js')
});
lightbox.init();
</script>

Animation and gesture engine update Improved performance of most animations, touch gestures should feel more fluid now. The initial opening or closing transition can be run from cropped thumbnails.

Single CSS file and no external assets Using CSS variables, default icons are dynamically generated and tiny.

Built-in responsive images support PhotoSwipe also dynamically loads larger images as the user zooms via srcset.

Open images in zoomed state It's now much easier to control the zoom level.

Removed features from the core Some built-in features were removed in v5, either because they are using outdated technology or just rarely used. Some of them are or will be replaced by a plugin. These include:

• History API (#hash-based navigation is outdated)
• Social sharing (unreliable URL, lack of Opengraph support)
• Fullscreen button (rarely used, double fullscreen). Related example in docs →
• Caption (accessibility problems). Refer to the caption section of docs.
• Inline gallery support (v5 is mainly designed to be used as a dialog).

This minor patch fixes issue with devices that have multiple types on input, running Windows 10 and Chrome (#1579). Larger update with improvements of API, certain parts of PhotoSwipe UI and functionality will hopefully be released in a near future (subscribe to get notified by email).

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

• 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:

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.

• Added ability to use custom identifiers for the slides in the URL, for example: http://example.com/?gid=1&pid=your-custom-gallery-item-uid. More info in FAQ section of docs. (via @csu & @kyleder).
• Added vertical drag range option (verticalDragRange) (via @v-yanchevsky).
• Added ability to control size of PhotoSwipe viewport (it doesn't have to fill 100% width and height of window). More info in FAQ section of docs.
• Fix: partly broken preloader animation when direction:rtl.

• Fix: slow wheel scroll on Windows Firefox (#730).
• Fix: wrong image size when it's smaller than PhotoSwipe viewport in IE8.
• Fix: freeze in Ubuntu Firefox 36 (#783), only CSS file changed.
• Added SVG support: image size is forced to defined "w" & "h" properties of slide object. See demo.
• Update bower.json main array with default ui (via @inlikealion).
• Lazy-loading when using responsive images: allow item alteration before checking validity (via @DanielMuller).

• Fix: incorrect zoom pan position in fullscreen when page was scrolled.
• Fix: fullscreen icon is not updating when changing fullscreen state.
• Fix: orientation change breaks layout if there are 2 slides.
• Fix: error when image finished loading (can appear only when low number of items and when rapidly switching slides).
• Fix: issue with RTL layouts (via @louy).
• Fix: error appears when captionEl:false.
• closeOnScroll is now triggered only by mousewheel events and only in browsers that support transform. As various browsers trigger scroll event unpredictably (during page load, when bars appear, etc.).
• Fix: in desktop Safari PhotoSwipe that opens on page load can close (caused by above issue).
• Added `mainScrollAnimStart" event (via @asadovsky).
• Some developers prefer to edit CSS file directly without using Sass, that’s why code comments are now visible in .css files too (in dist/ folder), not just in .scss files.

Support PhotoSwipe on Flattr →

• Reset idle timer on controls click.
• Hide share modal when slides change.
• Added clickToCloseNonZoomable option.
• Bugfix: error when replacing slide dynamically.
• Removed minZoom and maxZoom properties from slide object.

• Fix: dynamic adding/removing slides issue.
• During zoom/pan image position is now rounded (#704). Not rounded position could cause not sharp image on high-dpi screens
• Hide arrows and counter if there is only one slide.
• Prevent page scroll if closeOnScroll:false.
• Added options that allow to parse share links output.
• Added event that triggers when share link is clicked.
• Configurable zoom level for double-tap zoom.
• Prettified, commented and structured Sass files.
• Added documentation on how to add/remove/edit slides dynamically.

More info in commit history.