Options
bgOpacity
Number, 0.8
. Background opacity.
spacing
Number, 0.1
. Spacing between slides. Defined as ratio relative to the viewport width (0.1 = 10% of viewport).
allowPanToNext
Boolean, true
. Allow swipe navigation to the next slide when the current slide is zoomed.
loop
Boolean, true
. If set to true you'll be able to swipe from the last to the first image. Option is always false
when there are less than 3 slides.
pinchToClose
Boolean, true
. Pinch to close.
closeOnVerticalDrag
Boolean, true
. Vertical drag to close.
padding
Object, { top: 0, bottom: 0, left: 0, right: 0 }
. Slide area padding (in pixels).
paddingFn
Function, should return padding object. The option is checked frequently, so make sure it's performant. Overrides padding
option if defined. For example:
import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery: '#gallery--test-paddingfn',
children: 'a',
pswpModule: () => import('/photoswipe/photoswipe.esm.js'),
paddingFn: (viewportSize, itemData, index) => {
return {
// check based on slide index
top: index === 0 ? 100 : 0,
// check based on viewport size
bottom: viewportSize.x < 600 ? 0 : 200,
// check based on image size
left: itemData.w < 2000 ? 50 : 0,
right: 0
};
}
});
lightbox.init();
{
"id":"test-paddingfn"
}
hideAnimationDuration, showAnimationDuration, zoomAnimationDuration
Number, 333
. Transition duration in milliseconds, can be 0
. See example here.
easing
String, 'cubic-bezier(.4,0,.22,1)'
. CSS easing function for open/close/zoom transitions.
escKey
Boolean, true
. Esc key to close.
arrowKeys
Boolean, true
. Left/right arrow keys for navigation.
returnFocus
Boolean, true
. Restore focus the last active element after PhotoSwipe is closed.
clickToCloseNonZoomable
Boolean, true
. If image is not zoomable (for example, smaller than viewport) it can be closed by clicking on it.
imageClickAction, bgClickAction, tapAction, doubleTapAction
Refer to click and tap actions page.
preloaderDelay
Number (ms), 2000
. Delay before the loading indicator will be displayed, if image is loaded during it - the indicator will not be displayed at all. Can be zero.
indexIndicatorSep
String, /
. Used for slide count indicator ("1 of 10 ").
getViewportSizeFn
Function {x: width, y: height}
, null
. A function that should return PhotoSwipe viewport width and height, in format {x: 100, y: 100}
, for example:
getViewportSizeFn: function(options, pswp) {
return {
x: document.documentElement.clientWidth,
y: window.innerHeight
};
}
getWheelZoomFactorFn
A function that should return a number. The number represents by how much the current image should be scaled after wheel
event. For example:
getWheelZoomFactorFn(e, pswp) {
// pswp.currSlide.currZoomLevel - scale of the current slide image
return e.deltaY < 0 ? 1.2 : 0.8;
}
index
Number, 0
. Initial slide index.
errorMsg
String, <div class="pswp__error-msg"><a href="" target="_blank">The image</a> could not be loaded.</div>
. Message to display when image cannot be loaded. href
attribute of the first <a>
will be populated by the current image URL.
preload
Array, [1, 2]
. Lazy loading of nearby slides based on direction of movement. Should be an array with two integers, first one - number of items to preload before the current image, second one - after the current image.
mainClass
String, null
. Class that will be added to the root element of PhotoSwipe, may contain multiple separated by space.
appendToEl
DOMElement, document.body
. Element to which PhotoSwipe dialog will be appended when it opens.
Lightbox module options
See getting started and data sources for examples.
gallery
Element, NodeList, or CSS selector (string) for the gallery element. The legacy version of the option (gallerySelector
) can also be used.
children
Element, NodeList, or CSS selector (string) for elements within gallery
. For example, link elements. If not defined or set to false - root gallery
node will be used.
pswpModule
Function|Module, null
. A function that should return import() promise (if you need dynamic import), for example:
pswpModule: () => import('photoswipe/dist/photoswipe.esm.js');
Or the PhotoSwipe Core module itself, for example:
import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
import PhotoSwipe from 'photoswipe/dist/photoswipe.esm.js';
const lightbox = new PhotoSwipeLightbox({
pswpModule: PhotoSwipe
// ...
});
preloadFirstSlide
Boolean, true
. Loads the first slide image in parallel with PhotoSwipe Core.
getClickedIndexFn
Function, null
. A function that should return index of the clicked gallery item.
getClickedIndexFn: function(e) {
// e - event that triggered opening
return 0; // open at first slide
}
maxWidthToAnimate
Integer, 4000
. Maximum width of image to animate, if initial rendered image width is larger than this value - the opening/closing transition will be automatically disabled.