Dragging in photo galleries

Dear Lazyweb, what's the right way to make dragging load the next page in a photo gallery?

If you look at any of the DNA Lounge galleries on iOS, you'll see that dragging left or right goes to the previous or next photo. It works... ok. The transitions aren't great. I've seen better.

I gather there's some way to do this with jQuery, telling it "load this URL and use a slide-in transition once the next page has actually loaded" or something like that, but I can't figure out how to do it.

Solutions that involve pre-loading every image in the gallery, or that do not change document.location to the real URL of the image's page, are not acceptable.

My code: dragnav.js, gallery.js.

Tags: , ,

3 Responses:

  1. I think the trick you're missing is history.pushState:
    https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

    This will let you change the URL without forcing a full page load, so you can just load the next image and slide it into view.

  2. James says:

    Due to the lack of current on-topic alternatives for the proper conveyance of news regarding green phosphorescent sheep, please be informed of same.

  3. Louis St-Amour says:

    I was watching a talk by a Google engineer, and for mobile with LTE, you really want to do what AT&T recommends: "Maximize bandwidth in fewer calls and group multiple requests concurrently." as well as "Leverage LTE’s larger bandwidth and lower latency by anticipating and preloading data that the user wants. This requires experimenting with algorithms that work best for your app."

    So while you might not want to load all those images up front, it's best to start loading the next image immediately after the first loads, such that 3G phones especially can shut off the connection immediately after the site (gallery) has loaded. Re-starting a connection, even after a few hundred milliseconds is very expensive, often up to 1 second round trip on its own, iirc. The exact numbers are online and in that guy's talk. I should find the link ...

    Ah I found this guy's previous talk: https://docs.google.com/presentation/d/1dPbm1lKjVqdYq3_z3Dgp4ChPNZuMyrL9uLWGL40HBhI/edit?pli=1#slide=id.g23c7fce6_0_26 so I have a name. @igrigorik

    Which means I have slides (and in them a link to the video): http://www.igvita.com/slides/2013/breaking-1s-mobile-barrier.pdf

    Yay! Completely unrelated to the CSS3 transition animation you're looking for, but thought I'd mention it. :) More I look into this, the more I think SPDY will be fantastic for the web ;-)