Image galleries, sliders and slideshows have become increasingly popular within webpages over the last year or so, and with jQuery becoming ever more popular, more and more developers have been creating these amazing powerful, versatile and sleek galleries. Thank you jQuery.
Below you will the most powerful, the most creative and most versatile of jQuery plugins and tutorials built using jQuery.
Galleriffic jQuery Plugin
Link : Galleriffic jQuery Plugin →
Description : This sleek plugin is great, its simple to use and implement, fast, looks amazing and feature rich.
Features :
- Smart image preloading once the page is loaded.
- Thumbnail navigation (with pagination).
- Support for bookmark-friendly URLs per-image.
- Slideshow gsallery (with optional auto-updating url bookmarks).
- Events that allow for adding your own custom transition effects.
- Support for image captions.
- Flexible configuration.
- Graceful degradation when javascript is not available.
- Support for multiple galleries per page.
Demo : Galleriffic Demo →
Supersized – Full Screen Background/Slideshow jQuery Plugin
Link : Galleriffic jQuery Plugin →
Description : Supersized is the first fullscreen image gallery/slideshow that I have seen that really looks amazing, its transition effects are hypnotic and its controls are simple. The most amazing thing about Supersized is that it gives the impression of being a desktop application. Amazing plugin.
Features :
- Resizes images to fill browser while maintaining image dimension ratio.
- Cycles Images/backgrounds via slideshow with transitions and preloading.
- Navigation controls allow for pause/play and forward/back.
- Almost endless options.
Demo : Supersized Demo →
Building a jQuery Image Scroller
Link : Building a jQuery Image Scroller →
Description : In this tutorial, you’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. This scroller will be different from the others in that it will be completely autonomous and will begin scrolling once the page loads.
Demo : jQuery Image Scroller →
Sliding Boxes and Captions with jQuery Tutorial
Link : Galleriffic jQuery Plugin →
Description : All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through. Nice effect.
Demo : Sliding Boxes and Captions Demo →
Create a Resizable Image Grid with jQuery
Link : Resizable Image Grid →
Description : Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa. Thanks to some clever CSS and the jQuery UI, fluid image grids are now surprisingly simple to implement on the web.
Demo : Resizable Image Grid Demo →
Create Sliding Image/Reveal Content
Link : Sliding Image/Reveal Content →
Description : This tut does exactly what it says in the title, hover over the image and the text content will be revealed. Great first tutorial from Suciu Vlad.
Demo : Sliding Image/Reveal Content Demo →
Creating an Image Slider
Link : Creating an Image Slider →
Description : In this tutorial you will learn how to create an image slider that when a holder is hovered over, the top image slides down to reveal the image underneath. You will also learn how to use position absolute to float an image in the top right to show the image is new.
Demo : Creating an Image Slider Demo →
Galleria jQuery Plugin
Link : Galleria jQuery Plugin →
Description : Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS. Very cool plugin.
Features :
- Unobtrusive javascript.
- Degrades gracefully if the browser doesn’t support javascript or CSS.
- Lightweight (4k packed).
- Displays the thumbnail when the actual image is loaded.
- CSS powered – create your own gallery style.
- Super fast image browsing since the images are preloaded one at a time in the background.
- Can scale thumbnails and crop to fit in thumbnail container.
- Can be used with custom thumbnails.
- Stylable caption from image or anchor title.
- jQuery plugin – takes one line to implement.
- Can adjust the history object and enable the back button in your browser.
- Can fire events so you can customize the images behaviour onLoad.
Demo : Galleria Demo →
Create a Beautiful jQuery Slider Tutorial
Link : jQuery Slider Tutorial →
Description : This tutorial shows you how to develop a beautiful jQuery slider with added image description and name. The final result is a very smooth and visually pleasing slideshow which could be easily integrated into any site.
Demo : jQuery Slider Tutorial Demo →
GalleryView jQuery Plugin
Link : GalleryView jQuery Plugin →
Description : GalleryView is a content-gallery plugin capable of displaying any HTML content in an animated gallery view. This plugin is bounding with options and you would be hard pressed to not use this plugin. GalleryView does require the jQuery Timers plugin to facilitate timing of animation events.
Demo : GalleryView jQuery Plugin Demo →
Simple JQuery Image Slide Show with Semi-Transparent Caption Tutorial
Link : Simple JQuery Image Slide Show →
Description : In this tutorial you will be shown how to create a simple image slide show with a semi-transparent caption using jQuery. The final result will be suitable to display news headlines, or an image slide show on your websites homepage.
Demo : Simple JQuery Image Slide Show Demo →
jQuery Morphing Gallery Tutorial
Link : jQuery Morphing Gallery Tutorial →
Description : In this tut you will learn how to create a simple image gallery that when an image is selected, it will “morph” into its relevant size.
Demo : jQuery Morphing Gallery Demo →
Zoomimage – jQuery plugin
Link : Zoomimage – jQuery plugin →
Description : Present your images in a stylish way, with this plugin. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border. Nice and simple.
Demo : Zoomimage – jQuery plugin Demo →
Full Screen Image Gallery Using jQuery and Flickr
Link : Image Gallery Using jQuery and Flickr →
Description : This is a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It uses the flickr search engine with thumbnail preview, captions, preloader and some other excellent goodies. It scales the image using CSS only (some JS for IE6) and developed with jQuery.
Features :
- Flickr search using jQuery and JSON.
- Full screen with kept ratio using CSS only.
- A png raster to even out up-scaled jpegs.
- Thumbnails with loader indicator and a nice hover effect that shows a bigger thumb (or description).
- A preloader loads the large images one by one for super-fast viewing.
- Fetches the biggest image from flickr using their API.
- Caption that can be turned on or off.
- Navigate by clicking on either half of the image, or use the thumbnails..
Demo : Image Gallery Using jQuery and Flickr Demo →
Easy Slider 1.5
Link : Easy Slider 1.5 →
Description : The Easy Slider plugin enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.
Demo : Easy Slider 1.5 Demo →
