Click Actions
List of options:
imageClickAction
- click on image with mouse.tapAction
- tap on PhotoSwipe viewport content (excluding buttons).doubleTapAction
- double tap on anything. Tap delay is removed if this option is set tofalse
.bgClickAction
- click on area around image (background), with mouse.
Supported action values
'zoom'
- zooms current image (depending on secondary zoom level) (defaultdoubleTapAction
).'zoom-or-close'
- image will be closed if it can not be zoomed (defaultimageClickAction
).'toggle-controls'
- toggle visibility of controls (defaulttapAction
).'next'
- move to the next slide'close'
- close the gallery- A Function that may perform any action, for example:
imageClickAction: (releasePoint, e) => {}
Click on image moves to the next slide
import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const options = {
gallery:'#gallery--click-to-next',
children:'a',
imageClickAction: 'next',
tapAction: 'next',
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
};
const lightbox = new PhotoSwipeLightbox(options);
lightbox.init();
<div class="pswp-gallery" id="gallery--click-to-next">
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-2500.jpg"
data-pswp-width="1875"
data-pswp-height="2500"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-200.jpg" alt="" />
</a>
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg"
data-pswp-width="1669"
data-pswp-height="2500"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-200.jpg" alt="" />
</a>
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1666"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-200.jpg" alt="" />
</a>
</div>
Disable tap delay, click/tap to close
import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const options = {
gallery:'#gallery--click-to-close',
children:'a',
initialZoomLevel: 'fill',
secondaryZoomLevel: 'fit',
imageClickAction: 'close',
tapAction: 'close',
// tap delay is removed if set to false
doubleTapAction: false,
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
};
const lightbox = new PhotoSwipeLightbox(options);
lightbox.init();
/* override zoom cursor */
.pswp__img {
cursor: pointer !important;
}
<div class="pswp-gallery" id="gallery--click-to-close">
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-2500.jpg"
data-pswp-width="1875"
data-pswp-height="2500"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-200.jpg" alt="" />
</a>
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg"
data-pswp-width="1669"
data-pswp-height="2500"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-200.jpg" alt="" />
</a>
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1666"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-200.jpg" alt="" />
</a>
</div>