Best jQuery Gallery Plugins & Tutorials with Demo

jQuery Horizontal Gridfolio Pro

jQuery Horizontal Gridfolio Pro

Horizontal Gridfolio Pro is a fully responsive media grid plugin that allows you to display media content with an unique and original layout. It’s perfect for presentations, for anyone that want to obtain a great impact on their visitors.

Horizontal Gridfolio Pro features a large variety of options, it can have any number of categories and each category can have any number of images. When a thumbnail is pressed you can choose either to display an original media lightbox which we have coded, no action or open a webpage. The lightbox can display images, iframe (html pages) and videos loaded from YouTube or Vimeo.

Features:

  • Responsive / Flexible / Fluid layout: the grid can be used with three display types, responsive/fixed, fluid width or fullscreen.
  • Autoscale: The grid can resize it’s height proportional to the width this way on smaller screens it will keep a correct ratio and it will be completely visible (optional).
  • Drag or Scroll Function: The grid can be dragged with the mouse/finger or scrolled like a regular HTML page.
  • Mouse wheel support: The grid can be scrolled with the mouse wheel (optional).

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.



Best jQuery websites design awards