dimsemenov / PhotoSwipe

JavaScript image gallery for mobile and desktop, modular, framework independent
http://photoswipe.com
MIT License
24.18k stars 3.31k forks source link

Next slide on click #1123

Open willpursell opened 8 years ago

willpursell commented 8 years ago

feature request: make photoswipe gallery advance to the next slide when the image in the lightbox is clicked

berpcor commented 8 years ago

The same problem. I would like to show next image when user clicks image on PC. Is that possible?

qlstorm commented 7 years ago

Me too

milmaj commented 6 years ago

Hi @dimsemenov any plans to implement this feature?

acwolff commented 6 years ago

This is available in my PhotoSwipe skim, see this example album: https://andrewolff.jalbum.net/PS_varThumbsRow_NoFixedRatio/ If you select this, you can still zoom on a PC by pressing the Ctrl key and clicking next in the image.

I used next code:

In CSS file:

.pswp--zoom-allowed .pswp__img { cursor: pointer; }

in photoswipe-ui-default.js :

var CtrlKey = false; var ZoomedIn= false;

$(document).ready(function(){ $('html').keydown(function(evt) { keycommand(evt.which); }); });

function keycommand(keynum) { CtrlKey=(keynum==17); }

Adapt next code: if(e.detail && e.detail.pointerType === 'mouse') {

        // close gallery if clicked outside of the image
        if(_hasCloseClass(target)) {
            pswp.close();
            return;
        }

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

            else {
                    if (!CtrlKey && !ZoomedIn) {
                        pswp.next();
                        return;
                    }
                    else {           
                        pswp.toggleDesktopZoom(e.detail.releasePoint);
                        CtrlKey = false;
                        ZoomedIn= !ZoomedIn;
                    }
            }

        }