Hi.
How can I keep zoom level? For example, if I zoomed image, so next image have to be zoomed too.
I've done like that, but it's a bit buggy:
var pswpElement = document.querySelectorAll('.pswp')[0];
var isZoomed = false;
var options = {
index: 0, // start at first slide
clickToCloseNonZoomable: false,
fullscreenEl: false,
captionEl: false,
shareEl: false,
getDoubleTapZoom: function(isMouseClick, item) {
isZoomed = (gallery.getZoomLevel() == 1)? false : true;
if (isMouseClick) {
return 1;
} else {
return item.initialZoomLevel < 0.7 ? 1 : 1.5;
}
},
};
// Initializes and opens PhotoSwipe
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, this.get('imageItems'), options);
gallery.listen('imageLoadComplete', function(index, item) {
if (item.w < 1 || item.h < 1) { // unknown size
var img = new Image();
img.onload = function() { // will get size after load
item.w = this.width; // set image width
item.h = this.height; // set image height
gallery.invalidateCurrItems(); // reinit Items
gallery.updateSize(true); // reinit Items
}
img.src = item.src; // let's download image
}
});
gallery.listen('beforeChange', function() {
if(isZoomed)
{
gallery.applyZoomPan(1, (gallery.viewportSize.x-gallery.currItem.w)/2, gallery.options.barsSize.top);
gallery.zoomTo(1, {x:gallery.viewportSize.x/2,y:0}, 1);
}
});
gallery.init();
And gallery.zoomTo not working correctly for a new image, I have to do gallery.applyZoomPan before it.
For now, there is no such option, mostly related to the memory issues, as PhotoSwipe keeps three images in DOM at once. To implement this now you'll need to modify core, specifically look at private _applyZoomPanToItem method.
Consider opening only one image at once.
Hi @dimsemenov , I was also looking for a way to keep the zoom while navigating to next image.
Thanks for your explanation about potential memory issue.
I was wondering if it's possible to display the next thumb image when navigating to next image but automatically trigger zoom to lazy load the original image once the thumb image is displayed.
This should not affect the memory issue since the three images in DOM can still be thumb image but it saves the user from a click (or double click in mobile) when user wants to always view the images in original dimensions. It's a big hassle to having to navigate to next image then click on the zoom for every image when the photo gallery has lots of images.
BTW, thanks for this amazing library.
Most helpful comment
Hi @dimsemenov , I was also looking for a way to keep the zoom while navigating to next image.
Thanks for your explanation about potential memory issue.
I was wondering if it's possible to display the next thumb image when navigating to next image but automatically trigger zoom to lazy load the original image once the thumb image is displayed.
This should not affect the memory issue since the three images in DOM can still be thumb image but it saves the user from a click (or double click in mobile) when user wants to always view the images in original dimensions. It's a big hassle to having to navigate to next image then click on the zoom for every image when the photo gallery has lots of images.
BTW, thanks for this amazing library.