Categories
Old Archives

S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations

S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations

View Live DemoFind Project on Github

Today I’m going to share with you a gallery plugin I built (yeah, like the world needs another gallery plugin, right?) after having stumbled upon SONY’s products gallery while I was browsing their website a while ago.

Their products’ image gallery is a simple one, but two things grabbed my attention about the gallery:

  1. It’s made with Flash when it can totally be created with HTML, CSS3 and Javascript.
  2. It has a neat feature: exiting the slideshow mode back to the grid view mode, the last image which was active in the slideshow mode “returns back” to its position in the grid view, thus the user knows where they have stopped and what images are left in the gallery that they haven’t maybe browsed. This is a neat feature which serves as a brain cue and thus is a nice and positive UX-aware touch.

Not to mention that the gallery is accessible by keyboard and you can navigate through the images via keyboard shortcuts, and enter into fullscreen mode with only the gallery being in fullscreen, therefore removing all distractions so that you can focus only on the products gallery.

The plugin makes use of HTML5’s FullScreen API, and relies heavily on CSS3 animations goodness and CSS3 transforms, so it will work only in browsers that support these features.