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.
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.