Adjusting Zoom Level
Photoswipe has three zoom level options:
initialZoomLevel
- zoom level when photoswipe is opened.secondaryZoomLevel
- zoom level when user clicks "zoom" button, double-taps image, or clicks an image. If it equals to initial - secondary zoom functionality is disabled.maxZoomLevel
- maximum zoom level when user zooms via zoom/pinch gesture, via ctrl-wheel or via trackpad. Always highest among three.
Supported values
Each zoom level option can be:
- A positive
Number
, where1
is original image size. - A
String
:'fit'
- image fits into viewport.'fill'
- image fills the viewport (similar tobackground-size:cover
).- In both cases image will not be larger than original.
- A
Function
that should return number. Use it to define dynamic zoom level. Function is called separately for each image when it is rendered, or resized, or lazy-loaded. For example to set customsecondaryZoomLevel
:
secondaryZoomLevel: (zoomLevelObject) => {
// zoomLevelObject is instance of ZoomLevel class
console.log('Element size:', zoomLevelObject.elementSize);
console.log('Pan area size (viewport minus padding):', zoomLevelObject.panAreaSize);
console.log('Item index:', zoomLevelObject.index);
console.log('Item data:', zoomLevelObject.itemData);
// return desired zoom level
return 1;
}
Default behaviour
- Initial zoom level is
fit
. - Secondary zoom level is
2.5x
offit
, but not wider than3000px
. - Maximum zoom level is
4x
offit
.
import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery:'#gallery--open-in-original-size',
children:'a',
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.init();
<div class="pswp-gallery" id="gallery--open-in-original-size">
<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>
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/4/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1667"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/4/img-200.jpg" alt="" />
</a>
</div>
Open images in fill
state
import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery:'#gallery--open-in-fill-state',
children:'a',
initialZoomLevel: 'fill',
secondaryZoomLevel: 1,
maxZoomLevel: 2,
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.init();
<div class="pswp-gallery" id="gallery--open-in-fill-state">
<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>
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/4/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1667"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/4/img-200.jpg" alt="" />
</a>
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1668"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-200.jpg" alt="" />
</a>
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1667"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-200.jpg" alt="" />
</a>
</div>
Secondary zoom level is higher than initial
import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery:'#gallery--secondary-zoom-higher',
children: 'a',
mouseMovePan: true,
initialZoomLevel: 'fit',
secondaryZoomLevel: 1.5,
maxZoomLevel: 1,
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.init();
<div class="pswp-gallery" id="gallery--secondary-zoom-higher">
<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>
Initial zoom level is higher than secondary
Initial zoom level is set to 1
(original image size), you may want to disable opening closing transition (showHideAnimationType:'none'
) - as the larger the image - the harder it is to animate it smoothly. In this example it's not disabled, just to show you how it behaves:
import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery:'#gallery--initial-higher',
children: 'a',
mouseMovePan: true,
initialZoomLevel: 1,
secondaryZoomLevel: 'fit',
maxZoomLevel: 4,
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.init();
<div class="pswp-gallery" id="gallery--initial-higher">
<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>
Initial and secondary zoom level are equal
import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery:'#gallery--zoom-levels-equal',
children: 'a',
mouseMovePan: true,
initialZoomLevel: 'fill',
secondaryZoomLevel: 'fill',
maxZoomLevel: 3,
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.init();
<div class="pswp-gallery" id="gallery--zoom-levels-equal">
<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>
Image is smaller than initial and secondary
import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery:'#very-small-image',
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.init();
<a id="very-small-image" href="https://dummyimage.com/200x200/555/fff/" data-pswp-width="200" data-pswp-height="200" target="_blank">
<img src="https://dummyimage.com/100x100/555/fff/?text=small%20image" alt="" />
</a>
Dynamic zoom level
Change zoom levels based on viewport size and device orientation:
- fill 100% height of viewport on phones with portrait orientation,
- otherwise fit image into viewport
import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
function isPhonePortrait() {
return window.matchMedia('(max-width: 600px) and (orientation: portrait)').matches;
}
const lightbox = new PhotoSwipeLightbox({
gallery:'#gallery--dynamic-zoom-level',
children:'a',
initialZoomLevel: (zoomLevelObject) => {
if (isPhonePortrait()) {
return zoomLevelObject.vFill;
} else {
return zoomLevelObject.fit;
}
},
secondaryZoomLevel: (zoomLevelObject) => {
if (isPhonePortrait()) {
return zoomLevelObject.fit;
} else {
return 1;
}
},
maxZoomLevel: 1,
pswpModule: () => import('/photoswipe/photoswipe.esm.js')
});
lightbox.init();
<div class="pswp-gallery" id="gallery--dynamic-zoom-level">
<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>
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/4/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1667"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/4/img-200.jpg" alt="" />
</a>
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1668"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-200.jpg" alt="" />
</a>
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1667"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-200.jpg" alt="" />
</a>
</div>