Best jQuery Gallery Plugins & Tutorials with Demo

Horizontal Portfolio Layout with CSS3 Animations & jQuery

Horizontal Portfolio Layout with CSS3 Animations & jQuery

In this tutorial today we’re going to create a horizontal portfolio layout with cool hover effects inspired. The website is made in Flash, so I thought it would be nice to recreate the flash hover effect of the portfolio items using CSS3 animations and transitions, and some jQuery to replicate the image pan effect on hover.

I’ve also added a simple falling down effect on scroll, where the portfolio items fall down as soon as they enter the visible area of the viewport.

CollagePlus : jQuery image gallery plugin

CollagePlus : jQuery image gallery plugin

This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height.

CollagePlus relies on all images being loaded before it can calculate the layout. It does not run off image sizes specified in the DOM. If you have image sizes available in the DOM then you’re probably better off calculating the layout server-side (assuming that’s where you got the image sizes from) and writing the result directly to the HTML template you’re generating.

StarTube : YouTube Video Gallery Powered by jQuery

StarTube : YouTube Video Gallery Powered by jQuery

StarTube is a powerful yet easy to use video gallery based on the brand new StarTube jQuery Plugin. It’s a perfect choice if you wish to bring your favorite videos from YouTube to your website and display them nicely inside a categorized gallery. Developed in best practises of HTML5, CSS3, and Javascript.

Features:

  • A responsive design that looks great on desktops, tablets and smart phones
  • Add unlimited number of videos to the gallery
  • Optionally group videos by categories
  • Assign videos to multiple categories to best match your gallery structure
  • Navigate using the keyboard as well as the on-page controls
  • Set custom player width value for best responsive performance on all devices
  • Set the number of thumbnails to show per page in the navigation panel
  • Set the video quality for the YouTube player
  • Enable or disable continuous video loop
  • Lite and dark color schemes available to switch between for smooth design integrations

jQuery Picasa Gallery

jQuery Picasa Gallery

jQuery plugin that displays your public picasa web albums on your website in a photo gallery.

flipGallery : jQuery Powered Animated Photo Gallery

flipGallery : jQuery Powered Animated Photo Gallery

flipGallery is a free and lightweight jQuery powered photo gallery with sleek flipping transitions between thumbnails and lightbox enlargements. Other features include dynamic image streaming, auto pagination, auto cropping and transparent image overlay. It only takes a few minutes to set-up and the layout, speed, co-ordination and text can easily be modified in the settings.

jQuery Product Filtering and Categorization

jQuery Product Filtering and Categorization

Elegant way of product filtering and categorization. Easily editable json driven structure with smooth effects and visualisation.

Features:

  • Json driven readable database
  • Full screen or limited usage
  • Includes two themes as grey and sephia and psd files
  • Runtime image loading for performance
  • Commented and qualified javascript code with JSLint

least.js : jQuery Responsive HTML 5, CSS3 Gallery with LazyLoad

least.js : jQuery Responsive HTML 5, CSS3 Gallery with LazyLoad

least.js is ajQuery plugin for Random & Responsive HTML 5, CSS3 Gallery with LazyLoad.

HeapShot : jQuery Stack Image gallery plugin

HeapShot : jQuery Stack Image gallery plugin

jQuery HeapShot plugin is an image gallery plugin with a stack effect.

jQuery Final Tiles Gallery

jQuery Final Tiles Gallery

FINALLY the best gallery for tiled layouts because it doesn’t crop your images while it still offers a complex layout, it’s not the same old boring layout made of columns or rows of same size.

Best results are achieved using images of different sizes. Using images of same size will simply give you a standard grid layout.

jQuery Mosaic Flow : Pinterest like Responsive Image

jQuery Mosaic Flow : Pinterest like Responsive Image

Pinterest like responsive image grid for jQuery that doesn’t suck.

Features:

  • Simple and easy to install.
  • Responsive (shows as many columns as needed).
  • Very fast.
  • Only 1 KB (minified gzipped).
  • You can add some HTML: info overlay for example.


Best jQuery websites design awards