Delivers a daily balance of inspiration across web design, graphic design, web development, jquery, photography, web plugins, wordpress themes, identity dranding design and more than for designers. If any images or content appear on site is violation or copyright please inform us on (visionwidget$gmail.com).
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.
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.