I noticed that when people look at the photos on their iPhones, they expect dragging to go to the next photo, so, this. It doesn't animate smoothly -- the new photo doesn't slide in, it just loads the new page with document.location -- but it's better than nothing, I guess.
The code is in dragnav.js. I think it might interact weirdly with pages that are zoomed in, but it's hard to tell, because the image-sizing stuff in gallery.js already seems to interact weirdly with that all on its own.
I've only tested this on iPad and iPhone. Does it work ok elsewhere?
It does not appear to work on chrome on an android device I have nearby.
Well, beats me. I don't have any of these devices. If any of you know what's wrong, please let me know.
It also doesn't work in the Opera Mobile emulator thingy I have either, but that appears to have no debugging facilities of any kind.
Chrome doesn't have Touch Events implemented, nor does Opera. However the standard Android browser should support them.
See http://caniuse.com/#feat=touch
It worked fine on Safari on my macbook, until it loaded the first portrait oriented photo. Ever since then it refused to work. Weirdly, even if I refresh the page on a non-portrait image, it still refuses to work.
(When I say it refuses to work, here is the symptom: clicking and dragging picks up and moves the entire image. When I let go, the entire image snaps back into place.)
Loading a new tab and going to a gallery URL always fixes it in the new tab. Sometimes, if it is broken, going to google.com and then back to the non-portrait image will fix it, but sometimes it won't.
Intermittently, it will work fine for about 3-4 straight photos, then forever refuses to work in that tab again, no matter what I do.
And of course, sometimes everything works just fine.
Can you do Develop / Error Console and tell me if there are any clues there? I use a "real" mouse so I can't test this stuff on desktops.
I do not see any errors on my error console. If it works, there are no errors. When it does not work, what happens is it looks like safari grabs the drag and swipe event and decides that what I want to do is move the image around, and drag it over, possibly to another window.
It always works if the window is so narrow that the image is 100 percent of the way across the screen. But if there is any margin, then instead of the swipe event happening in JS, Safari interprets the swipe as a drag and drop. And after that happens once, Safari interprets any swipe as a drag and drop, even if I do it on a page which had previously worked.
I mean, when I say it doesn't work, what happens is I click the image, and then a translucent copy gets dragged over a bit, and when I let go, it rubber band snaps back. No matter how I vary the timing of the click and drag.
If I shut down Safari and start it up again, then everything works as long as the images are 100 percent of the way across the screen.
I'm not sure this is something you can fix with JS because I don't think JS ever sees the swipe event.
[How I swipe: I click the trackpad and swipe my finger over in one fluid motion. If I swipe with only one finger on the trackpad, it moves the mouse back and forth. If I swipe with two fingers, Safari grabs that event and thinks I am trying to navigate forward or backwards a page. Three fingers switches between desktops.]
[Sorry, in that last paragraph I wanted to make the distinction between clicking on the trackpad and swiping (first sentence), vs. just tapping (without clicking) and swiping the trackpad like you would an iPad or iPhone (the rest of the paragraph.]
No luck on Dolphin on my Android 4 tablet.
i have chrome on windows and it never did anything for me.
It's not working on Chrome or Firefox Beta on my Nexus 7, sorry.
Since nobody mentioned yet: it also doesn't do anything on android stock browser.
Yeah, I think you're right because it also doesn't appear to work on my android stock browser either.
Some of the issues could be timing issues - In dragnav.js you should be using either window.onload or DOMContentLoaded events instead of just setting a timeout for 10ms in the future.
But doesn't window.onload wait until the entire document, including all images, are loaded before firing? I want this stuff to fire even if one of the images is stalled.
That's when you use DOMContentLoaded, which fires when the DOM has loaded but before assets like images have loaded. IE doesn't support it though, so you need to either use a hack (see the doScroll() hack for example: http://javascript.nwbox.com/IEContentLoaded/) or just fall back to window.onload in IE.
Right so this is better than waiting for a fraction of a second why?
It's almost always better to rely on events instead of arbitrary timeouts. You don't end up with race conditions where you expect the timing to be perfect. Sometimes the DOM might not finish parsing in the 10ms between loading the script and your timeout firing.
It doesn't seem to work on Opera. Nobody cares about Opera, though.
The hold-right-mouse-slide-right gesture built into Opera does the Right Thing, though. So that's probably good enough.
I remember when people said that about netscape. ;-) I know a lot of people who care about Opera, but that may be a regional thing.