The US government’s Global Change Research Program recently debuted a fancy new website with loads of HTML5 and CSS3 bells and whistles to discuss climate change. Among the visual eye candy is our own Before/After plugin in use to show the dramatic change in the Alaskan Muir glacier over a period of 60 years. Have a look at http://nca2014.globalchange.gov/report/regions/alaska#graphic-20971.
15/the-destruction-of-a- nation-syrias-war-revealed-in- satellite-imagery/
05/23/before-and-after-the- tornado-satellite-shots-of- moore/
06/07/before-and-after-a- satellite-captures-damage-and- recovery-from-superstorm- sandy/
Sometime last year I came across an image carousel on an Italian website done in Flash that allowed you to scroll a set of images horizontally with the flick of your mouse. What I loved about it was how natural and intuitive it felt. The gallery of images was infinite, meaning that the same X number of images would repeat no matter how often you scrolled it. The obvious downsides were that it was done in Flash and not mobile friendly.
I’ve been working on and off since then to replicate the effect, as well as improve upon it. I finally have a non-Flash solution that uses jQuery to achieve the effect both on desktops and mobile devices that doesn’t require any other libraries and is super slim. I love the infinite scrolling effect in use here which relies on an optical illusion of sorts.
I’m posting the first examples here and would like your feedback to see if I should turn this into a jQuery plugin. I’m also open to some suggestions in terms of a name. I like the “flick” part, but struggle with calling this a carousel, gallery,scroller, or something else.
A caveat: The only downside I’ve discovered so far lies in mobile Safari. I have seen the scroller start off and work fine in this browser, yet cease to respond after a few flicks. Unfortunately I seem to have no way to debug mobile Safari, so if anyone can shed light onto the issue I’d be happy to update the code.
I realized that the DropCaptions plugin had been neglected for a while (last updated four years ago! ) and even though it still worked with older versions of jQuery, it needed a refresh. DropCaption v2 is now available. I’ve updated the code and made some minor improvements.
Thanks to Jesse from VersionOne for spotting a small but update worthy bug in the carousel that could potentially affect running multiple carousels on one page.
Grab the latest version from http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-infinite-carousel-plugin/