jQuery image galleries and albums are very common on portfolio sites and are also useful for any other type of site for displaying images and photos. In this post we’ll see tutorials and plugins that can provide you with the resources that you need to get a gallery of slider on your site. You must have seen many of these jQuery image galleries and sliders on different portfolio websites. These jQuery plugins with CSS provide creative alternatives to display images on your websites.
Since they are already so popular I believe you don’t need me to tell you more about it. So here we go, the list of 30 handy jQuery plugins with tutorials for gallery and portfolio websites.
Guess you may be interested in the blow excellent related articles as well:
A simple to use jQuery image slideshow/gallery/carousel plugin that features thumbnails navigation, auto play, CSS3 powered transition effects, fullscreen mode, and more.
Facebook Album Browser is a jQuery plugin that retrieves albums and photos from any Facebook account and displays them as a photo gallery on your website. Click on the cover image to browser all the photos under the album.
An easy-to-use jQuery plugin used to display your Google Plus photos in a fully loaded, responsive content gallery.
mb.thumbGrid is a jQuery gallery plugin used to display a grid of thumbnails as a slideshow with fancy CSS3 transitions. When you click on a thumbnail, the high resolution image will be displayed in a responsive lightbox that allows you to navigation through images with arrow controls.
A quick and lightweight jQuery plugin for creating a flexible, adaptive, customizable presentation of your photos. The plugin loads all the images from a folder under your website and organizes/displays them as a gallery/sideshow that features vertical thumbnails bar, next/prev controls, auto play/pause buttons, and much more.
jGallery is a flexible and interactive jQuery photo gallery plugin that comes with lots of options and transition effects.
Strip.js is a snazzy and space-saving jQuery plugin to create a responsive lightbox that slides out from the edge of your screen and partially covers the current page.
Photor is a fast and easy jQuery plugin to create a responsive & touch-friendly full page image gallery with CSS3 transitions and transforms.
Flickr Gallery is a tiny jQuery plugin to create a Flickr photoset thumbnail gallery using Flickr API. When you click on a photoset thumbnail, the plugin will open a jQuery colorbox based lightbox slider which allows the visitor to view all the photos retrieved from the Flickr photoset.
Photopile is a jQuery based polaroid image gallery that the photos are stacked & scattered randomly in a container and will display the larger version of a photo in a popup window when clicked.
Hex Gallery is a jQuery plugin used to display your images in a CSS3 based hexagonal grid layout with hover caption support.
FlexImages is a lightweight jQuery plugin to create a responsive, fluid and flexible gallery from a set of any Html elements that have different sizes. Includes support for lazy load, and Ajax loading content.
Filterable jQuery Gallery is a jQuery plugin helps you categorize, reorder and filter a responsive grid of photos with a basic shuffling animation.
Picasa Gallery is a jQuery plugin that allows to embed your Picasa web albums into a photo gallery on your website.
Pimax displays a photo gallery from your Picasa/Google+ albums. The Public albums are pulled from your account and dsiplayed on your website.
Brickwall is a jQuery image gallery plugin that allows you to tile the images like a brick wall, where all the pieces are tiled responsively and have the same height. The plugin also comes with another jQuery plugin called brickwallFocusPointer that helps you easily set focus point of an image when you resize the browser window.
Awesome jquery gallery which is transparent, fixed on screen, autoplay on/off buttons and css3 stylized gallery.
Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.
A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides.
Create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images.
Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.
CollagePlus is a responsive jQuery plugin that allows you to create a Google+ albums like photo gallery with animated image caption overlay support.
Photowall is a simple clean jQuery plugin used to showcase your images in a Google-style responsive photo wall gallery. It will open a fullscreen modal window when clicking on a thumbnail and display the large version of the image with social buttons integrated.
This will be a script that runs a search on Instagram, fetches and displays the photos in a grid, and then uses the Box2D library to simulate physical interactions between them. And all of this in less the 40 lines of JS!
In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow the user to slightly zoom into the picture by clicking on it. The thumbnails bar slides down and the image resizes according to the screen size.
The interesting part is to calculate the correct preview height and to scroll the page to the right position. We’ll expand the preview in a way so that we can see the respective thumbnail row and cover the rest of the remaining page.
In today’s tutorial we’ll show you how to create some cute looking photo strips and integrate Lightbox 2, one of the most popular and widely used lightbox scripts. The idea is to show some photo strips and make them navigable by scrolling with the mousewheel. When clicking on a picture we will show the larger version using jQuery Lightbox 2. We will also optimize it for touch devices.
For this tutorial I’ve used two free jQuery libraries: Quicksand and PrettyPhoto. You can see the result that I’ve achived by combining this two jQuery plugins by clicking the preview button below.