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

Adding on hold to photoswipe #993

Open endrehegyi opened 9 years ago

endrehegyi commented 9 years ago

Ive messed around trying to bind an on hold event to the div tags but doesnt seem to work, how could I program it so when I hold down on an image it does something ( a pop up for example ) this would be on a tablet.

'var timeoutId = 0; $('.pswp__ui').mousedown(function () { showDeleteDialog(); timeoutId = setTimeout(func, 1000); }).bind('mouseup mouseleave', function () { clearTimeout(timeoutId); });'

laurosollero commented 9 years ago

First of all you can't use the mousedown for touch events, it's for mouse events. The jQuery .mousedown() is the same as .on( "mousedown", handler), and you could change it to touchstart/touchend or the taphold if you use jQuery Mobile.

But as we are using the PhotoSwipe, you should take a look at the documentation (http://photoswipe.com/documentation/api.html):

// PhotoSwipe has a special event called pswpTap.
// It's dispatched using default JavaScript event model.
// So you can, for example, call stopPropagation on it.
// pswp.framework.bind - is a shorthand for addEventListener
pswp.framework.bind( pswp.scrollWrap /* bind on any element of gallery */, 'pswpTap', function(e) {
    console.log('tap', e, e.detail);
    // e.detail.origEvent  // original event that finished tap (e.g. mouseup or touchend)
    // e.detail.target // e.target of original event
    // e.detail.releasePoint // object with x/y coordinates of tap
    // e.detail.pointerType // mouse, touch, or pen
});
endrehegyi commented 9 years ago

Thanks for the reply, So could you help me a little more and lets say i have an icon with a bin, next to the close button in the gallery. how would i bind a function called delete() to that button?

I'm not very good with javascript and its a little confusing.

EDIT: please ignore that message I figured it out.

My question now is, is there a work around to have a 'pswpHold' or something similar so that the event is fired on hold and not on touch.

laurosollero commented 9 years ago

In the API page I've sent you there says how you can create events with .shout and .listen. To calculate if it was a tap and hold instead of just a tap you can enter the pswpHold, start a timer, once it gets to say, 500ms, you can .shout the event. And create the .listen outside, of course. I haven't tested the example but it would go something like this:

// Listen for "tapHold" event
pswp.listen("tapHold", function() {
  // do something cool
  alert("You was holding!");
});
pswp.framework.bind( pswp.scrollWrap, "pswpTap", function(e) {
    setTimeout(pswp.shout("tapHold"), 500);
});

Again, not tested, not really sure when the pswpTap event is fired, before or after the touch, but I hope you can figure it out.

ghost commented 7 years ago

@endre156 can this be closed?

endrehegyi commented 7 years ago

Yes

On 6 Apr 2017 6:20 p.m., "Josh Habdas" notifications@github.com wrote:

@endre156 https://github.com/endre156 can this be closed?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dimsemenov/PhotoSwipe/issues/993#issuecomment-292245000, or mute the thread https://github.com/notifications/unsubscribe-auth/ACr5M_MHxS-bXlg1AzO06QaVLGniSP0gks5rtR7bgaJpZM4GMFwu .