The Best Web Blog for All Designers and Web Developers

40 Fresh Jquery Image Gallery Plugins

Advertisement

A photo gallery is a need of every photographer, designer website, and surely it is necessary for portfolio. In the past, photo galleries were a simple list of images that could be viewed full size by clicking on them. With jQuery all is changed. Thanks to the jQuery, photo galleries look has been revolutionized. By using jQuery photo gallery plugins, it is possible to create amazing image effects with fancy animations of content elements. And most important it is easy to use: same list of images, and small code in website head that transform gallery in modern, solid design.

There are lots of jQuery image gallery plugins, but in this post we collected a fresh set of simple of jQuery plugins which you can use to create picture galleries. This small but in same time comprehensive set are the perfect solution for a product, work, content, photo showcase. These plugins will help you add functional photo galleries. After browsing through this set, I truly hope you will get right plugin for your project. From my side, I would recommend new Nivo gallery plugin, that is sister of the famous Nivo slider plugin and also Mobile jQuery gallery plugin, that you can use in mobile theme development.

Have a nice viewing. See you in next post.

Nivo Gallery

Nivo Gallery aims to be more of a full blown photo gallery experience rather than simply an image slider, focusing on supporting multiple types of content and having a fullscreen experience, rather than fancy image transitions.

Nivo Gallery

Photobooth with PHP, jQuery and CSS3

In this tutorial, author will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

Photobooth with PHP, jQuery and CSS3

Draggable Image Boxes Grid

Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.

Draggable Image Boxes Grid

Thumbnails Navigation Gallery with jQuery

In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked.

Thumbnails Navigation Gallery with jQuery

SIDEWAYS – jQuery Fullscreen Image Gallery

A simple, yet elegant fullscreen image gallery created with the jQuery library and CSS. The gallery features fullscreen images in various modes and custom scrollbars.

SIDEWAYS – jQuery fullscreen image gallery

Create a Unique Gallery By Using Z-index And jQuery

In this tutorial we want to create a unique picture gallery utilizing the CSS property z-index. In our example we have the appearance of a pile of pictures, on the next action we put the first picture on the last position and on the previous action we get the picture from the last position to the first.

Create a unique Gallery by using z-index and jQuery

jQuery beautiful slideshow book transition pages

turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.

  • + Uses Hardware acceleration
  • + Works on tablets and smartphones
  • + Easy to manipulate
  • + Lightweight, only 6K

jQuery beautiful slideshow book transition pages

3D Gallery with CSS3 & jQuery

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.

3D Gallery with CSS3 & jQuery

Supersized

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

Supersized

Tn3gallery

Includes slideshow, transition effects, multiple album options, CSS skinning and much more.

Tn3gallery

3D Wall Gallery

Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gallery will be shown normally, retaining all the functionality.

3D Wall Gallery

Fotorama

Fotorama is a highly flexible image gallery plugin for jQuery that works in both desktop and mobile browsers. It offers multiple options for browsing through the images including thumbnails, prev-next buttons, swiping, slideshow or bullet navigation. The thumbnails can either be prepared and defined manually for maximum quality or the plugin will display a stretched version of the original images.

Fotorama

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.

Galleria

TouchTouch – A Touch Optimized Gallery Plugin

Author want to share a little experiment with Tutorialzine 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.

TouchTouch – A Touch Optimized Gallery Plugin

Glisse

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.

Glisse

Multimedia Gallery for Images, Video and Audio

This multimedia gallery for images, video and audio is a progression of our previous galleries. The idea for this new gallery is to integrate video and audio as exhibit pieces along images.

Multimedia Gallery for Images, Video and Audio

Sliding Panel Photo Wall Gallery with jQuery

The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode.

Sliding Panel Photo Wall Gallery with jQuery

Hover Slide Effect with jQuery

We will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images will slide to the top or bottom, left or right, fading out or not.

Hover Slide Effect with jQuery

JQuery Based Flipped Image Gallery with Bounce Effects

Image galleries are most important element of any website. Here, I have created a simple jQuery based flipped image gallery. On hover the images will expand. Its simple and stylish gallery.

JQuery Based Flipped Image Gallery with Bounce Effects

Polaroid Photobar Gallery with jQuery

In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover. The full image will slide in from the bottom once a thumbnail is clicked.

Polaroid Photobar Gallery with jQuery

jQuery Image Gallery

jQuery Image Gallery is an extension to the Dialog component of jQuery UI, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.

jQuery Image Gallery

Full Page Image Gallery with jQuery

In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background.

Full Page Image Gallery with jQuery

jQuery.Popeye

jQuery.popeye is an advanced image gallery script built on the JavaScript library jQuery. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.

jQuery.popeye

Sliding Image Gallery jQuery Plug-in

The SlidingGallery plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through. One image will be centered on the screen, with two smaller images off to the sides. The user can click either of the smaller images to bring them to the center, or the center image to enlarge it.

Sliding Image Gallery jQuery Plug-in

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

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.

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

YoxView

YoxView is a free Lightbox-type media and image viewer jQuery plugin. It’s easy to use and feature-rich.

YoxView

Mosaiqy

Mosaiqy is a jQuery plugin for viewing and zooming photo working on Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome and IE7+. Photos are retrieved from a JSON/JSONP data structure and randomly moved inside the grid.

Mosaiqy

jmFullWall

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

jmFullWall

Mobile jQuery Photos Gallery

This mobile photos gallery is based on the powerful jQuery Mobile framework and is supporting all major mobile platforms (iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7…). It is composed of a front-end, and also a very intuitive admin interface where you can manage all your albums and images. It also supports a multiple photos upload functionality and enables you to add a caption for each of your images.

Mobile jQuery Photos Gallery

GalleryJack Rebooted – A jQuery Fullscreen Gallery

A Fullscreen Image Gallery with Categories, HTML5 Video, HTML5 Audio & more

GalleryJack Rebooted - A jQuery Fullscreen Gallery

Tonic Gallery – jQuery XML Portfolio Gallery

Tonic Gallery is a jQuery XML Portfolio Gallery that allows you to create very easily a portfolio gallery with some nice effects and flexible customization settings.

Tonic Gallery - jQuery XML Portfolio Gallery

Factory Galleries jQuery Plugin

You can create all Galleries you want with elegance and style.

Factory Galleries jQuery Plugin

Daniel

Blogger and the founder of Designrex.com. He start Designrex to provide inspirational articles for designers and for all creative minds. Get in touch with Designrex via Facebook or Twitter. You can follow Daniel on

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>