I suggest you ...

Click to advance to next image

Presently, clicking an image (optionally) will zoom, if the image is not at 100% scale, or close the slideshow.

I'd like an option to instead have the mouse click advance to the next image in the slideshow. This would set the aforementioned behavior false, of course. Zooming would then be accessible only using the toolbar icon, and perhaps via double-click.

26 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Matthew shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    7 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • André Wolff commented  ·   ·  Flag as inappropriate

        Most people use mobile devices these days and on a mobile device you can use a swipe to go to the next image. This works also on a PC if you hold down the left mouse button in an image and next swipes the pressed mouse button to the left you see the next image (and swipe to the right to see the previous image).

      • Austin Gil commented  ·   ·  Flag as inappropriate

        Yeah, I would also like to see this in the library itself. Also loading from a CDN so unable to customize. Any ideas on whether or not this could be supported?

      • Chris Laursen commented  ·   ·  Flag as inappropriate

        as I'm loading the .js files from a CDN, editing the file is not an option, so would be great to have this as a feature!

      • Mark commented  ·   ·  Flag as inappropriate

        Cool! Works great. But somehow my mouse still shows the zoom icon (magnifying glass) when a large image is found (but advances forward on click instead of zooming in).. ??

      • Matthew commented  ·   ·  Flag as inappropriate

        On second look, I realize that the dual conditions are redundant. The function can be more simple:

        if(framework.hasClass(target, 'pswp__img')) {
        if(_options.clickToAdvanceImage) {
        if(pswp.getZoomLevel() <= pswp.currItem.fitRatio) {
        pswp.next();
        } else {
        pswp.toggleDesktopZoom(e.detail.releasePoint);
        }
        } else {
        if(pswp.getZoomLevel() === 1 && pswp.getZoomLevel() <= pswp.currItem.fitRatio) {
        if(_options.clickToCloseNonZoomable) {
        pswp.close();
        }
        } else {
        pswp.toggleDesktopZoom(e.detail.releasePoint);
        }
        }
        }

      • Matthew commented  ·   ·  Flag as inappropriate

        I've got this working more or less the way I'd like. Feel free to add or update this functionality in the main branch if you'd like. The changes are all made to photoswipe-ui-default.js.

        Around line 77, change:

        clickToCloseNonZoomable: true,

        To:

        clickToAdvanceImage: true,
        clickToCloseNonZoomable: true,

        ----

        Around line 735, update the function:

        if(framework.hasClass(target, 'pswp__img')) {
        if(pswp.getZoomLevel() === 1 && pswp.getZoomLevel() <= pswp.currItem.fitRatio) {
        if(_options.clickToCloseNonZoomable) {
        pswp.close();
        }
        } else {
        pswp.toggleDesktopZoom(e.detail.releasePoint);
        }
        }

        To:

        if(framework.hasClass(target, 'pswp__img')) {
        if(_options.clickToAdvanceImage) {
        if(( pswp.getZoomLevel() === 1 && pswp.getZoomLevel() <= pswp.currItem.fitRatio )
        || pswp.getZoomLevel() === pswp.currItem.fitRatio) {
        pswp.next();
        } else {
        pswp.toggleDesktopZoom(e.detail.releasePoint);
        }
        } else {
        if(pswp.getZoomLevel() === 1 && pswp.getZoomLevel() <= pswp.currItem.fitRatio) {
        if(_options.clickToCloseNonZoomable) {
        pswp.close();
        }
        } else {
        pswp.toggleDesktopZoom(e.detail.releasePoint);
        }
        }
        }

      Feedback and Knowledge Base