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.
Several months ago I transitioned from using Firefox as my primary browser to Chrome. I wasn’t sure if I’d be able to make the switch, or if there was any point in changing, but I did. Among the reasons for my switch was the fact that Firefox has always been, and continues to be, an enormous memory hog. No matter how many time Mozilla announces that the latest version of Firefox is less memory hungry it doesn’t seem to matter on any PC I use. Firefox routinely gobbles up anywhere from half a gig to a gig and half of memory. The nail in the coffin was when Google killed off support for their toolbar (which I used all the time) so it was then that I decided I’d have a go at using Chrome full time.
My biggest requirement was that I needed a tool similar to the excellent Firebug add-in to do development work. Being that Chrome has a developer console built-in without the need for an extension was a big plus and it was quite easy to make the jump after that. Plus, Chrome is very fast at everything it does.
My two biggest gripes with Chrome are a) no print icon (still!) and b) no basic way to get a list of the sites I most recently visited. For example, on Firefox you can click the down arrow at the end of the address bar and see a quick list of recently and frequently visited sites. On Chrome you have to either open a new tab or start typing to do this.
However, there is a new feature in Firefox that I like and hope to see in all other browsers soon: Responsive Design View. Responsive Design View (RDF) has been in Firefox since version 15 arrived a few months ago. Basically what RDF allows you to do is easily re-size your browser to see how a site looks at different sizes without having to re-size the window and messing up all your other open tabs. In Mozilla’s words, “With the Responsive Design View, you can work on your designs without constantly pulling out your mobile phone to see how it looks. And, you can try out your designs without shrinking your browser’s tools, toolbars and other tabs.” This is a great little tool for developers and designers. My only suggestion is that they allow you to edit the profiles they’ve included, instead of just listing the resolutions. For example, instead of just “960×720”, I’d like to name that “iPod Touch”. That and the ability to save specific resolutions instead of having to drag the side of the window every time I need a resolution that isn’t listed in the drop down menu. Now I have yet to do much in the way of responsive design, however I can see this being a very valuable tool to have when the time comes. Worth checking out.
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.
Version 1.4 of the Before/After plugin has been released with a new feature – keyboard navigation. Now you can use your left and right arrow keys to move the image divider. By default this option has been disabled. There are actually two new option parameters, enableKeyboard and keypressAmount. The first, enableKeyboard, can be set to true or false to enable keyboard navigation and the second, keypressAmount, is the number of pixels you want the divider to move each time the arrow is pressed. The main reason for setting enableKeybaord to false was for those running multiple instances of the plugin on a page. If the default was true, than a press of the arrow key would move the divider on all instances.
Sometimes you may not be able to pre-load the images you’re using with the before/after plugin. In that situation you may want to give your visitors some indication that the images are loading so that they’re not left scratching their heads wondering if there’s a problem. Fortunately with a little jQuery and CSS you can add a loading indicator to the before/after plugin.
After the jQuery code to instantiate the plugin, add (assuming a container with the id of “conjainer”):
And that’s it! Note that this is just a basic example and it only tests for one of the two images being loaded, however it’s basic to extend this concept further and even provide more feedback to the user.