Best jQuery Gallery Plugins & Tutorials with Demo

    jQuery Fullscreen Gallery with Thumbnail Flip

    Fullscreen Gallery with Thumbnail Flip

    In this tutorial we will 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. The big image will slide up or down depending where we are navigating to. We will add navigation controls for the mousewheel and for keys. The thumbnail will have a zoom and and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image, resized to fit in the page.

    Compact News Previewer with jQuery

    Compact News Previewer with jQuery

    We will create a news previewer that let’s you show your latest articles or news in a compact way. The news previewer will show some list of articles on the left side and the preview of the article with a longer description on the right. Once a news on the left is clicked, the preview will slide in.

    How to Make Auto-Advancing Slideshows with jQuery & HTML5

    How to Make Auto-Advancing Slideshows

    One of the most requested improvements over the tutorials presented on this site, when it comes to slideshows, is the ability to have the slides advance automatically. It is actually not that difficult to achieve this effect, and to demonstrate it, in this short tutorial we are going to make our HTML5 Slideshow auto advance with a few lines of jQuery.

    Display Your Favourite Music with jQuery & Last.fm

    Display Your Favourite Music with jQuery & Last.fm

    Use the power of jQuery and the handy last.fm records plugin to create a showcase of your favourite music on your website. We’ll install the plugins to fetch the information from the Last.fm website, then style up the design with a cool retro vinyl record theme.

    jQuery Expand Stacked Images Using Slider with Demo

    JQuery Expand Stacked Images Using Slider

    This time the post will show how to expand the stacked images with jquery, for the illustration, there is a stack of images that have very small margin between each image, and the slider have a function to make the margin larger, really easy to imagine right? Now to make it look stacked I’m using jquery plugin, the rotate3Di and of course the jQuery UI slider.

    Neat Photo Hover Effect with CSS Sprites and jQuery

    Neat Photo Hover Effect with CSS Sprites and jQuery

    Here is a very nice effect for photos or some black and white images. We are using some CSS sprites for the photos to create a darken effect when hovering over the images. This could also be used with other effects. The basic principle is to create the impression that the background gets darker when hovering.

    jQuery Portfolio Zoom Slider with Demo

    Portfolio Zoom Slider with jQuery

    In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.

    The idea is to give the user the option to view details of a portfolio item by zooming it on hover, and to allow a full view by clicking. Moreover, we want to have a couple of images for each item, hence we will create a slider.

    Flip! jQuery plugin with Demo

    flip jQuery Plugin

    Flip is a jQuery plugin that will flip easily your elements in four directions.

    Supersized 3.0 jQuery Plugin with Demo

    Supersized 3.0 jQuery Plugin

    Supersized 3.0 – Full Screen Background & Slideshow jQuery Plugin.Resize images to fill the entire browser window while maintaining proportional dimensions.Fullscreen slideshow complete with transitions, navigation, captions, and preloading.Integrate with existing sites or create your own portfolio gallery.

    imgAreaSelect image crop jQuery plugin with Demo

    imgAreaSelect image crop jQuery plugin

    imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).