Best jQuery Gallery Plugins & Tutorials with Demo

jQuery Flickr Photobar Gallery with Demo

jQuery Flickr Photobar Gallery with Demo

After we got a lot of great feedback for our image galleries we decided to follow some of the suggestions and create a gallery that uses the Flickr API. The aim was to build a bottom photobar that one can easily integrate into a website. It is hidden initially and slides up when the handle is clicked. First, the photo sets are shown and when one of them is chosen, all its images can be viewed as thumbnails. When a thumbnail is clicked, a full image view appears as an overlay.

inflickity : jQuery Never-ending drag n’ flick content with Demo

inflickity : jQuery Never-ending drag n' flick content with Demo

inflickity is a jQuery Never-ending drag n’ flick content.

NETEYE Touch Gallery : jQuery Photo Viewing in Mobile Browser

NETEYE Touch Gallery : jQuery Photo Viewing in Mobile Browser

Touch-Gallery brings the look and feel of native jQuery photo-viewing apps to yhour mobile browser.Open this page in your iPad or iPhone 4 and click on any of the thumbnails in the left column below.

iPicture : A jQuery Plugin For Tooltip your Images With Demo

iPicture : A jQuery Plugin For Tooltip your Images With Demo

iPicture, a jQuery plugin, is perfect for such cases and allows us to place tooltips over any desired location of images.

Once the user hovers/clicks the pointers, the tooltip is displayed with its pre-defined content.There are several options for customizing the functionality including the ability to use different pointer images for each tooltip or their animation types.

Also, iPicture has a handy initialize function that saves so much time by enabling a configuration wizard where we can place pointers + set their definitions with drag ‘n’ drops and the JSON output to be used in the code is created automatically.

SliderWall : jQuery image slider with Demo

SliderWall : jQuery image slider with Demo

SliderWall is a jQuery slider plugin that helps you to create all types of content sliders. The plugin is entirely based on HTML5, CSS3 and JavaScript.SliderWall is a very flexible tool, meaning that you can use it to create many types of sliders, from content sliders to image sliders.

And you don’t have to start from scratch! SliderWall offers you several different templates – along with cool transition effects – that can be customized in CSS so that they match your website’s design.

Photo Wall : jQuery plugin with Demo

Photo Wall : jQuery plugin with Demo

jQuery photo wall gallery plugin (like in google).

filtrify : jQuery HTML5 Advanced tag filtering with Demo

filtrify : jQuery HTML5 Advanced tag filtering with Demo

Filtrify is an advanced tag filtering plugin, inspired by Chosen multiple select feature and Orman Clark’s Vertical Navigation Menu.

Advanced because you can search tags within tags and filter items by multiple tags from different categories and get a live feedback on the number of items containing related tags.

Hoverizr : A responsive jQuery Image manipulation and overlay plugin

Hoverizr : A responsive jQuery Image manipulation and overlay plugin with Demo

Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. Currently, it features three effects: grayscale, blur and color inversion. Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one.Hoverizr takes advantage of the <canvas> element to do all the image processing.

Flippy : Flip effect jQuery Plugin with Demo

Flippy : Flip effect jQuery Plugin with Demo

Flippy is a cross-browser flip effect plugin for jQuery which allows you to flip whatever html element you want.The Flippy plugin works fine for every modern web browser except Internet Explorer 8 and before (of course…).
In this demo I used the excanvas.js file to allow the use of canvas in older IE versions.

Parallax Content Slider with CSS3 and jQuery

Parallax Content Slider with CSS3 and jQuery with Demo

Today we want to share a simple jQuery parallax content slider with you. Using CSS animations, we’ll control the animation of each single element in the slider and create a parallax effect by animating the background of the slider itself.

The idea for this comes from the slider of the Kendo UI homepage, a framework for modern HTML UI. After we got some requests and questions about how to do something like that, we decided to recreate the effect.



Best jQuery websites design awards