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/
Who doesn’t love free stuff? Most of the time the saying “you get what you pay for” applies, but every once in awhile sometimes you do get a free lunch. Whether it’s testing jQuery code, checking to see how a site looks in different browsers, or coming up with a color scheme, the following free tools have been extremely valuable in helping me get my work done.
Originally developed by Sun, Oracle’s VirtualBox is a great piece of free software.Let me repeat that. Great piece of free software. It’s so good they should charge for it. Really. In case you’re unfamiliar with VirtualBox or virtualization in general, what VirtualBox does is allows you to turn one computer into as many different computers as you like by giving you the ability to run almost any operating system as if it were an application. No dual booting, no partitioning, no reformatting. You can create and destroy virtual machines at will.
So why is this great? Continue reading Free Tools to Make a Web Developer’s (and Designer’s) Life Easier
jQuery has about a half dozen methods for retrieving AJAX data (XML, JSON, JSONP, script, HTML, or text). Most of these methods are shorthand for jQuery’s all-singing, all-dancing .ajax() method. So how is a developer supposed to know when to use one of the more basic higher-level methods versus when to use .ajax()? Continue reading What’s the Best jQuery Method for Retrieving AJAX Data?