WEB DEV

ABOUT VISION WIDGET

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

40 Free jQuery Photo Gallery / Albums With Tutorials

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.

 

Responsive & Filterable Image Gallery with jQuery

Filterable jQuery Gallery is a jQuery plugin helps you categorize, reorder and filter a responsive grid of photos with a basic shuffling animation.

Responsive-Filterable-Image-Gallery-with-jQuery

 

Picasa Gallery jQuery Picasa Web Albums Gallery Plugin

Picasa Gallery is a jQuery plugin that allows to embed your Picasa web albums into a photo gallery on your website.

Picasa-Gallery-jQuery-Picasa-Web-Albums-Gallery-Plugin

Picasa-Gallery-jQuery-Picasa-Web-Albums-Gallery

 

Pimax- Showing Picasa Google Plus Albums Images

Pimax displays a photo gallery from your Picasa/Google+ albums. The Public albums are pulled from your account and dsiplayed on your website.

Pimax-Showing-Picasa-Google-Plus-Albums-Images

 

Brickwall - Responsive & Compact jQuery Image Wall

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.

Brickwall-Responsive-Compact-jQuery-Image-Wall-Plugin

 

JQuery Image Gallery with Captions and Auto Play

Awesome jquery gallery which is transparent, fixed on screen, autoplay on/off buttons and css3 stylized gallery.

jquery-image-gallery-with-auto-playpause-rotation

 

Image Picker

Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.

Image Picker

SCATTERED POLAROIDS GALLERY

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.

scattered polaroids gallery

 

FULLSCREEN GALLERY WITH THUMBNAIL FLIP

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.

fullscreen-gallery-with-thumbnail-flip

 

GAMMA GALLERY: RESPONSIVE IMAGE GALLERY

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.

gamma-gallery-a-responsive-image-gallery

 

Google+ Albums Like Photo Gallery Plugin

CollagePlus is a responsive jQuery plugin that allows you to create a Google+ albums like photo gallery with animated image caption overlay support.

Google-Plus-Albums-Like-Photo-Gallery-Plugin-For-jQuery

 

jQuery Photowall - Google-Style Photo Wall Gallery

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.

jQuery-photowall-Google-Style-Photo-Wall-Gallery-Plugin

 

A Cool Instagram “Gravity” Gallery

instagram-gravity-gallery

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!

 

Fresh Sliding Thumbnails Gallery with jQuery and PHP

sliding-thumbnails-gallery-with-jquery-php

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.

Thumbnail Grid With Expanding Preview

thumbnail-grid-with-expanding-preview

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.

Photo Booth Strips With Lightbox

photo-booth-strips-with-lightbox

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.

Free jQuery Photo Gallery ( Tutorial )

jquery-photo-gallery

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.

Polaroid Photobar Gallery with jQuery

Polaroid Photobar Gallery with jQuery

Animated Portfolio Gallery with jQuery

Animated Portfolio Gallery with jQuery

Exposure - a beginner's guide to photography

Exposure - a beginner's guide to photography

JQUERY MB.GALLERY - present your photo gallery

JQUERY MB.GALLERY - present your photo gallery

Cloud Carousel: 3D jQuery Carousel

Cloud Carousel: 3D jQuery Carousel

Thumbnails Navigation Gallery with jQuery

Thumbnails Navigation Gallery with jQuery

Thumbnails Preview Slider with jQuery

Thumbnails Preview Slider with jQuery

YoxView - jQuery image viewer plugin

YoxView - jQuery image viewer plugin

jqGalViewII - Photo Gallery

jqGalViewII - Photo Gallery

Minimalistic Slideshow Gallery with jQuery

Minimalistic Slideshow Gallery with jQuery

Full Page Image Gallery with jQuery

Full Page Image Gallery with jQuery

Create image gallery in 4 lines of jQuery

Create image gallery in 4 lines of jQuery

Sliding Panel Photo Wall Gallery with jQuery

Sliding Panel Photo Wall Gallery with jQuery

Slider Gallery with jQuery

Slider Gallery with jQuery

Sweet Thumbnails Preview Gallery

Sweet Thumbnails Preview Gallery

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

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

jqFancyTransitions

jqFancyTransitions

Beautiful Photo Stack Gallery with jQuery and CSS3

Beautiful Photo Stack Gallery with jQuery and CSS3

Hover Slide Effect with jQuery

Hover Slide Effect with jQuery

Galleriffic - Customize your photo album with skins

Galleriffic - Customize your photo album with skins

Bubbleriffic Image Gallery with jQuery

Bubbleriffic Image Gallery with jQuery

Flickr Photobar Gallery

Flickr Photobar Gallery

Greyscale Hover Effect CSS & jQuery

Greyscale Hover Effect CSS & jQuery

Parallax Slider with jQuery

Parallax Slider with jQuery

Trip Tracker

Trip Tracker

SEE ALSO:

12 Photo Gallery And Slideshow use jQuery Plugins

15 Free Responsive jQuery Slideshow Container

20 Examples of jQuery Tooltip Plugins

20 Free jQuery Drag And Drop Web Interfaces

20 jQuery Image Animation Tutorials and Plugins

Sponsors Adverts

POPULAR Articles

Written on 24/07/2014, 09:59
For instance if you designed an awesome DVD cover you can take this DVD Plastic Case Free Template, and mockup your design and see how it would look in...
Written on 08/04/2014, 00:04
A family of thirty precision-crafted vector glyphs. Elegant. Simple. Modern. The modern minimal glyphs were created as a humble set of icons...
Written on 15/04/2014, 00:28
Here collection of logo mockups for free download will helpful save time for logo and graphical designers to making a new logo when inspiring ideas from...
Written on 17/04/2014, 10:59
If you are searching for free html5 and css3 responsive website templates to boost your website functionality, took a little extra time to see templates...
Written on 09/04/2014, 11:39
When we come to designing, we have to implement a lot of styling features. Whether it would be a logo design or any kind of poster making , efforts are...
Written on 09/04/2014, 10:54
Brand identity in the pre-established brand positioning is very critical stage; only a clear positioning and consumers can have emotional side of the...
Written on 07/04/2014, 23:13
With the following powerful and elegant jQuery notification plugins that easy to create alert,success,error,warning,information and confirmation...
Written on 09/06/2014, 07:07
The occupation of rocinha a notorious hillside "favela" that overlooks some of rio's swankiest areas is a crucial part of the city's preparations to...
Written on 11/06/2014, 08:24
Developing the logo design concept is where creativity comes into play, this is where the designer must create the logo by using the design brief and...

create-your-own-jquery-plugin

30 Best Examples of Free jQuery Content Sliders

jQuery developers and designers widely use content slider scripts to create various and flexible effects on the images.

30 jQuery Free Photo Albums with Tutorials

This post includes essential tutorials for photo galleries in many styles so they could perfectly fit your sites, running smoothly and seamlessly.

12 jQuery CAPTCHA Plugin with Tutorial

CAPTCHA is designed to recognize the difference between a bot and human and sometimes even malicious software to provide the security to your system.

new-photoshop-tutorials

60 Free Adobe After Effects Text Effects Tutorials

Whether you're a beginner, intermediate or expert, you're sure to find what you're looking for in our great collection of After Effects tutorials.

50 Autodesk 3DS Max Tutorials for Beginners

The list is composed of several Autodesk 3ds Max techniques that you may need to use in creating 3D graphics.

20 Adobe Fireworks Tutorials for Web Design

We have collected some useful and fresh tutorials on Adobe Fireworks including generating PDFs, exporting CSS based layouts.

full-template-with-cms-skins

60 Elegant Responsive Free Drupal 7/8 Themes

Showcase very modern and professional Free Drupal 7 theme giving your endless possibilities. All those Drupal 7 themes.

20 Fantastic Responsive Free Joomla 2.5/3 Templates

You’ll find best Latest Free Joomla! 2.5 and Joomla! 3 Templates Around because we’re going to use our blog as a tool to promote our business.

20 Response FREE Wordpress Themes Releases IN 2014

In this article I want to showcase best 20 free Response Wordpress blog themes released in 2014. I hope these themes will fit your needs.

jquery.min.js,jquery-noconflict.jsjquery.min.js,jquery-noconflict.js