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.
Before you continue reading this post, I would like to recommend some of our other articles about this topic, such as 25 Creative Solutions for Websites Using Hand-Drawn Elements, 22 Required Chrome Extensions for Web Developers or 40 Useful jQuery Techniques and Applications.
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 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.
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.
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.
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.
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.
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.
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
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.
Supersized is a fullscreen background slideshow built using the jQuery library.
Includes slideshow, transition effects, multiple album options, CSS skinning and much more.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
YoxView is a free Lightbox-type media and image viewer jQuery plugin. It’s easy to use and feature-rich.
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.
jmFullWall is a jQuery plugin for the creation of an impressive portfolio.
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.
A Fullscreen Image Gallery with Categories, HTML5 Video, HTML5 Audio & more
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.
You can create all Galleries you want with elegance and style.