Best jQuery Gallery Plugins & Tutorials with Demo

    jQuery photo viewer : Glisse.js

    jQuery photo viewer : Glisse.js

    Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.This plugin uses a lot of new CSS3 features like keyframes. It’s definitely not a good idea to uses it on a general public website for the time.

    Features

    • Keyboard navigation
    • Fully CSS Customizable
    • Animated with CSS3 keyframes
    • 7 different transition effects
    • Scale to the viewport
    • iPad & iPhone ready (soon a fully Android support)

    jQuery image zoom plugin : Cloud Zoom

    jQuery image zoom plugin : Cloud Zoom

    Cloud Zoom is a free jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

    3D Gallery with CSS3 and jQuery

    3D Gallery with CSS3 and jQuery

    Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms.With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect.

    The main idea is to create a circular gallery where we have an image in the center and two on the sides. Since we are using perspective, the two lateral images will appear three dimensional when we rotate them.

    Photo Zoom Out Effect with jQuery

    Photo Zoom Out Effect with jQuery

    Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries. Our example uses some black and white images to focus on the effect.

    jQuery Image Cube

    jQuery Image Cube

    A jQuery plugin that sets a division to rotate between images (or other things) as if they were on the faces of a cube.The image cube functionality can easily be added to a division with appropriate default settings. It then displays the images contained within the targetted division in a cycle every two seconds. A random rotation is chosen each time to move to the next image. Highlights and shadows are used to enhance the 3D effect.

    Glimmer a jQuery Animation effect plugin

    Glimmer a jQuery Animation effect plugin

    Another great animation effect for jQuery lovers, you can see how the landscapes moves.Glimmer allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios. Glimmer also has an advanced mode, providing a design surface for creating jQuery effects based on your existing HTML and CSS.By using Glimmer you can make rotating image banners,beautiful tooltips, Dropdown menus and lot of other animation effects.

    jQuery InnerFade

    jQuery InnerFade effect

    InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.

    These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

    jQuery Slideshow plugin : ResponsiveSlides.js

    jQuery Slideshow plugin : ResponsiveSlides.js

    ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It work 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 and that all the images are same size.

    Javascript thumbnail and media viewer : Highslide JS

    Javascript thumbnail and media viewer : Highslide JS

    Highslide JS is an image, media and gallery viewer written in JavaScript.These are some of its advantages:

    • Quick and elegant looking.
    • No plugins like Flash or Java required.
    • Popup blockers are no problem. The content opens within the active browser window.
    • Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
    • Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.

    Bootstrap jQuery Image Gallery

    Bootstrap jQuery Image Gallery

    Bootstrap Image Gallery is an extension to the Modal dialog of Twitter’s Bootstrap toolkit, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.