Best jQuery Gallery Plugins & Tutorials with Demo

    jQuery Before/After Plugin

    May 14, 2012 | Gallery, Plugins
    jQuery Before/After Plugin

    New York Times online had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were.

    CatchMyFame found this very useful and immediately created Before/After jQuery Plugin for the same purpose. The possibilities for this plugin are endless. Doctors can have before and after images of patients, Photoshop users can show the before and after differences between images, remodelers can show the before and after images of projects and on and on. This plugin weighs in at only 7K and can be used multiple times on a page.

    Read More Demo

    jQuery spherical Panorama viewer

    May 6, 2012 | Gallery
    jQuery spherical Panorama viewer

    A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology.This viewer doesn’t require any browser plugin such as quicktime or java.

    Read More Demo

    vintageJS : jQuery HTML5 plugin to add a vintage look to images

    May 5, 2012 | Gallery, Plugins
    vintageJS : jQuery HTML5 plugin to add a vintage look to images

    vintageJS is a jQuery plugin that uses the HTML5 canvas element to add a vintage look to images. It comes with three effect-presets and can be customized very easily.

    You can change the effect by adding options to the vintageJS call. There are three presets that you can use:

    • default: the default preset is used when no preset is given
    • sepia: sepia effect
    • green: green color overlay vintage effect
    • grayscale: turns image into grayscale image
    • custom: Only curves will be adjusted, all the other effects are switched off so that you can build your own vintage look
    Read More Demo

    Flux Slider : jQuery CSS3 Animation based image transitions

    May 4, 2012 | Gallery, Plugins, Slider
    Flux Slider : jQuery CSS3 Animation based image transitions

    Flux slider is a CSS3 animation based image transition framework, inspired in part by the fantastic Nivo Slider jQuery plugin.

    Instead of the traditional Javascript timer based animations used by jQuery, Flux utilises the newer, more powerful CSS3 animation technology. Its in a fairly early/rough state at the moment but testing on the iPhone/iPad does appear to produce much smoother animations. Desktop performance (as with Nivo) is very smooth but the use of CSS3 enables us to produce some new effects that Nivo can’t, e.g. rotations.

    The aim is to use hardware acceleration where possible to improve performance on less powerful devices, such as mobiles & tablets.

    Read More Demo

    Thumba : jQuery Thumbnails gallery plugin like Google images

    May 1, 2012 | Gallery, Plugins, Popup Window
    Thumba : jQuery Thumbnails gallery plugin like Google images

    Thumba is a gallery jQuery plugin, that displays thumbnails as Google images. You can navigate by moving the mouse, or using “Left” & “Right” arrows.Press “Enter” or click on a thumbnail to open it into a lightbox.

    Read More Demo

    Zoomer Gallery – A jQuery plugin for displaying zoom images

    April 30, 2012 | Gallery, Plugins, Zoom
    Zoomer Gallery – A jQuery plugin for displaying zoom images

    In today’s post, I’m going to be giving away a new plugin for jQuery that allows you to easily transform your image lists into beautiful galleries with Flash-like zoom effects in them. It’s a simple but elegant way of giving your interfaces a nice little shine and at only 2KB in size, it’s both compact and surprisingly easy to use.

    What we want to achieve today is increasing the visible size of a thumbnail image from something smaller to something larger whilst also animating the title/caption of it. Rather than using multiple images for this process, what we are going to do in this post is use the same image for both the thumbnail and the “zoom”. To do this we need to ensure that all of our images are larger than the default size of our thumbnails (and optimally, a little larger than our zoomed in images). CSS Bi-cubic interpolation is used to keep everything looking clean.

    Read More Demo

    TouchTouch – A jQuery Touch Optimized Gallery Plugin with Demo

    April 28, 2012 | Gallery, jQuery Mobile, Plugins, Responsive, Slider
    TouchTouch – A jQuery Touch Optimized Gallery Plugin with Demo

    I want to share a little experiment with our readers – TouchTouch. It is a jQuery plugin that turns a collection of photos on a webpage into a touch-friendly mobile gallery. It works on all major browsers (except for IE7 and below) and most importantly is specifically designed with iOS and Android in mind.
    Highlights

    • Smooth CSS3 animations and transitions;
    • A responsive CSS interface that fills the screen and responds to changes in device orientation;
    • Preloads photos only when they are needed;
    • Supports swiping through photos;
    • Displays onscreen arrows and listens for arrow key presses on desktop browsers;
    Read More Demo

    jQuery Audio Slideshow with jPlayer

    April 25, 2012 | Gallery, Slider, Video & Audio
    jQuery Audio Slideshow with jPlayer and jQuery demo

    Today we’ll share an audio slideshow with you. Using the open source audio framework jPlayer the slideshow will show images and play sound, changing the images at specified moments of the song/audio. While we’ll demonstrate a photo slideshow here, it is not limited to photos. It could also use div tags containing any kind of markup whatsoever.

    Read More Demo

    Quake Slider : jQuery Image / Content Slider Plugin with Demo

    April 24, 2012 | Animation, Gallery, Plugins, Slider
    Quake Slider : jQuery Image / Content Slider Plugin with Demo

    If you are the guy who likes to focus on real business and don’t want to re-invent the wheels. Quake image slider is perfect for you. Quake image slider is a jQuery based image slider with cool animations effects and some of them are very unique. Like SwirlFadeIn, SwirlFadeOut and more.

    With Quake image slider you can combine images with short summary/caption that helps you optimize contents for search engines and make SEO easy for you. You can also link your images to open detail for particular slide/image. With Quake Image Slider you have complete control over not just the orientation of each caption also you can control animation for each caption and provide different animation for each of the slide using callbacks.

    Read More Demo

    Fotorama : jQuery Image Slider with Thumbnail Display

    April 23, 2012 | Gallery, Plugins, Slider
    Fotorama : jQuery Image Slider with Thumbnail Display

    Fotorama is powerful yet flexible image gallery plugin for jQuery that is compatible with all type of computers, iPhones and any mobile devices. Fotorama allows users to include thumbnails, prev- next buttons, swiping, slideshows or bullet navigation. Fotorama assists users to arrange the dimension and position of the slider and thumbnails and also users can define captions to images.

    Read More Demo