Photoswipe: Keep zoom level

Created on 5 Aug 2016  路  2Comments  路  Source: dimsemenov/PhotoSwipe

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.

Implementation Question

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.

All 2 comments

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mtwalker picture mtwalker  路  4Comments

silentbugs picture silentbugs  路  5Comments

vince83110 picture vince83110  路  4Comments

sumitpaul picture sumitpaul  路  4Comments

chilluk7 picture chilluk7  路  3Comments