Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change behavior of imageClickAction based on window size? #2017

Open
lococola opened this issue Feb 12, 2023 · 1 comment
Open

Change behavior of imageClickAction based on window size? #2017

lococola opened this issue Feb 12, 2023 · 1 comment

Comments

@lococola
Copy link

lococola commented Feb 12, 2023

Love the PhotoSwipe plugin so far. So I would like to accomplish two things, depending on whether the gallery is viewed from a mobile device or not.

If browsing on a mobile device, I want the user to be able to click on the image to zoom in to max viewport.
If browsing on desktop, I want the user to not be able to zoom in at all. Instead, a click on the image should close the gallery.

I have tried several things but I can't get it to work. This is the code I have so far:

function isPhonePortrait() {
			return window.matchMedia('(max-width: 600px) and (orientation: portrait)').matches;
		}
		var lightbox = new PhotoSwipeLightbox({
			gallery: '.landscapes',
			children: 'a',
			
			initialZoomLevel: (zoomLevelObject) => {
				if (isPhonePortrait()) {
					return zoomLevelObject.fit;
				} else {
					return zoomLevelObject.vFill;
				}
			},
			secondaryZoomLevel: (zoomLevelObject) => {
				if (isPhonePortrait()) {
					return zoomLevelObject.vFill;
				} else {
					return 'fit';
				}
			},
			maxZoomLevel: 1,

This takes care of the zooming/non-zooming bit, but I don't know how to add the code to make the gallery close on a image click. I tried to add different variations of this code:

imageClickAction: (releasePoint, e) => {
				if (isPhonePortrait()) {
					return releasePoint.zoom;
				} else {
					return releasePoint.close;
				}
			},

But it doesn't work. Any ideas what I need to enter here?

@lococola lococola changed the title Change behavior of imageClickAction based on windows size? Change behavior of imageClickAction based on window size? Feb 12, 2023
@dimsemenov
Copy link
Owner

imageClickAction corresponds to click on the image with mouse, for tactile devices there is tapAction - https://photoswipe.com/click-and-tap-actions/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants