Tools

High Quality Responsive Image Gallery Plugins and Tutorials

Dec 07, 2012 insic 2 Comments

Having your content responsive nowadays is a must so that your content will looks good on the small screen mobile devices. If you have an image gallery in your site and you want it to look good on any screen sizes, you can choose an array of high quality plugins I have listed below.

FlexSlider


A free jQuery Plugin responsive image slider built by the team of famous WordPress marketplace Woothemes.

Features:

  • Simple, semantic markup
  • Supported in all major browsers
  • Horizontal/vertical slide and fade animations
  • Multiple slider support, Callback API, and more
  • Hardware accelerated touch swipe support
  • Custom navigation options
  • Compatible with the latest version of jQuery

Demo

ResponsiveSlides.js


ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it. Only dependency is jQuery (1.4 and up supported) and that all the images are same size.

Biggest difference to other responsive slider plugins is the file size (1kb minified and gzipped) + that this one doesn’t try to do everything. Responsive Slides has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination and/or navigation to fade between slides.

Features:

  • Fully responsive
  • 1kb minified and gzipped
  • Simple markup using unordered list
  • Settings for transition and timeout durations
  • Multiple slideshows supported
  • Automatic and manual fade
  • Works in all major desktop and mobile browsers
  • Captions and other html-elements supported inside slides
  • Separate pagination and next/prev controls
  • Possibility to choose where the controls append to
  • Possibility to randomize the order of the slides
  • Can be paused while hovering slideshow and/or controls
  • Images can be wrapped inside links
  • Optional ‘before’ and ‘after’ callbacks

Demo

Supersized


Supersized is a fullscreen background slideshow built using the jQuery library develop by BuildInternet.

Features:

Shutter was designed to be a base theme that could be a foundation for future themes, while including some added functionality.

  • Progress bar
  • Slide in/out thumbnail tray
  • Fluid thumbnail bar based on Thumb Reel
  • Option for mouse-responsive thumbnail scrub

Demo

Refineslide


RefineSlide is a simple jQuery plugin for displaying responsive, image-based content (with shiny animations). CSS transitions are used wherever possible, which currently makes for varied performance across browsers and platforms. At the moment it’s probably best to check it out in Safari, and will become much smoother elsewhere as other browsers move towards offloading CSS transitions to the GPU.

Features:

  • A few transitions to play with
  • Responsive down to mobile scale
  • CSS transition & 3D transform support
  • Javascript fallback fade transition
  • Auto-formatted, responsive thumbnails
  • Good browser support (IE7+)
  • HTML captions
  • Hardware acceleration on supported browsers
  • Free to use and abuse as you like
  • Simple, semantic markup
  • Lightweight: 12k minified (4k gzipped)

Demo

Galleria


Galleria is a JavaScript image gallery framework. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.

Features:

  • Free without restrictions
  • Responsive
  • No programming skills required
  • iPhone, iPad & touch support
  • Flickr, Picasa, YouTube and Vimeo ready
  • One core, multiple themes

Demo

Photoswipe


PhotoSwipe is a self contained JavaScript library that can be easily integrated into your mobile websites. It is heavily optimized for mobile webkit browsers. However, if you need wider desktop browser support or you are using jQuery Mobile, PhotoSwipe comes packaged with a jQuery implementation as well.

Demo

Responsive Image Gallery


A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.

Demo Tutorial

Elastislide


Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images.

Demo Tutorial

StackSlider

An experimental image slider that flips through images in 3D. Two stacks resemble image piles where images will be lifted off from and rotated to the center for viewing.

Demo Tutorial

If you have any recommendations of an outstanding and high quality responsive image gallery or slider plugin, please drop me a comment.

About the author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.

  • singhranvirveer

    Hello. impressive
    job. I did not anticipate this. This is a fantastic story. Thanks!

  • Web Design and Development

    Great list, overwhelming by seeing so many good sites together. I will definitely bookmark some.

    Web Design and Development