Best jQuery Gallery Plugins & Tutorials with Demo

    ColorBox : jQuery lightbox

    ColorBox : jQuery lightbox

    A light-weight, customizable lightbox plugin.ColorBox has following features :

    • Supports photos, grouping, slideshow, ajax, inline, and iframed content.
    • Lightweight: 10KB of JavaScript.
    • Appearance is controlled through CSS so users can restyle the box.
    • Behavior settings can be over-written without altering the ColorBox javascript file.
    • Can be extended with callbacks & event-hooks without altering the source files.
    • Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
    • Preloads background images and can preload upcoming images in a photo group.
    • Written in jQuery plugin format and can be chained with other jQuery commands.
    • Generates W3C valid XHTML and adds no JS global variables & passes JSLint.

    jQuery jmFullWall nice portfolio

    jQuery jmFullWall nice portfolio

    jmFullWall is a jQuery plugin for the creation of an impressive portfolio.

    jQuery plugin : captionate images

    jQuery captionate images

    In today’s short tutorial i would like to share a caption jQuery plugin that adds a caption to the bottom of images this is useful for displaying additional text about images when a user hover over the image.They say a photo is worth a thousand, and the best way of doing this is by adding captions to your images.

    How to Create a Fantastic jQuery Photo Album with TN3

    Create a Fantastic jQuery Photo Album with TN3

    During browsing web – I noticed new interesting library – TN3. This is jQuery image gallery with slideshow, transitions effects, multiple album options etc. Plus you will able to customize it (via CSS). Today I will show you how you can implement this gallery to create own photo album.

    Creating Ajaxy Photo Gallery (jQuery) with Custom Images Sets

    jquery ajax photo gallery with custom images sets

    Today we will make simple and nice jQuery gallery which will load images ‘ajaxy’. Also our gallery will support working with predefined custom sets of images. I hope that our result will interesting for you.

    Responsive Image Gallery with Thumbnail Carousel

    Responsive jquery Image Gallery with Thumbnail Carousel

    Today we want to show you 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.

    Highlight Web Page Elements With jQuery Highlighter

    Highlight Web Page Elements With jQuery Highlighter

    jQuery Highlighter neatly highlights the web page elements and helps you to direct your readers to the places you want them to look.

    This jQuery plugin is handy for products showcases, guided tours, portfolios and helpful for the color blind & visually impaired people.

    It is highly customizable and has built-in support for keyboard navigation. The plugin works fine on Chrome, Firefox and Safari (issues with IE).

    Photoflip slideshow effect with jQuery

    Photoflip slideshow effect with jQuery

    In the previous tutorial we created a tutorial that was controlled by clicking the next link which took the top most image in a stack and placed it at the bottom of the stack, today we are going to automate the flipping through of the images by adding a simple autoadvance function.

    ShineTime – A New jQuery & CSS3 Gallery With Animated Shine Effects

    jQuery & CSS3 Gallery With Animated Shine Effects

    I’d like to show you how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass)  and the best part is, it’s not that difficult to achieve.

    Elastislide – A Responsive jQuery Carousel Plugin

    jQuery Carousel Plugin

    Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.

    In a carousel, one could think that simply making its container “shorter” will solve the problem on smaller screens, but in some cases (e.g. when we have bigger images) it might be reasonable to resize the items as well. This and other options are part of Elastislide’s properties.

    Elastislide uses the jQuery Touchwipe Plugin which allows you to obtain the wipe event on an iPhone, iPad or iPod Touch.