Article by Jerry Low
Geek dad, SEO data junkie, investor, and founder of Web Hosting Secret Revealed. Jerry has been building Internet assets and making money online since 2004. He loves mindless doodling and trying new food.
It’s time for another goodies roundup. In this article, I present a list of 24 jQuery plugins for those who want to build some beautiful image-based websites. Some of these plugins are ‘image sliders’ that come with fancy transition effects; some are light-weight codes that create cool hovering effects; and some simply help create entire gallery-style website – all in all, these jQuery plugins provide creative alternatives to display images on your websites.
I know some of you will question why ‘LightBox’ series wasn’t in the list – but since they are already so popular I believe you don’t need me to tell you more about it.
So here we go, the list of 24 handy jQuery plugins for gallery- and portfolio-style websites.
Developed by Jordan Boesch, jSquares is a beautiful plugin that pops up an image and a paragraph of text on hover. It’s basically identical to the image grid found on www.ted.com. (Sidenote: Also check out the developer’s another interesting project named ‘Keystrokes‘ – it’s not included in the list because it’s unrelated to our topic today.)
SpaceGallery helps create a web gallery instantly with zero coding work and cost. Check out the developer’s website for complete code downloads and demo.
Ad Gallery is a great jQuery plugin that helps organize images into a gallery with nice transition effects. The plugin comes with dozen of great features (ie. auto scaling your images into the container) and is compatible with most latest version of web browsers.
Nivo Slider is not the kind of regular jQuery image slider you see else where. It’s a powerful plugin has nine unique transition effects built in along and works perfectly with most latest version of web browsers.
GalleryView is a content-gallery plugin capable of displaying any HTML content in an animated gallery view. The plugin requires jQuery Timers to facilitate timing events plus the developer also recommend using jQuery Easing for smoother transition. Check out this demo page to see this plugin in action.
slideViewerPro is a fully customizable jQuery image gallery engine wich allows to create sliding image galleries. Each gallery generates a user-defined number of thumbnails wich can slide automatically; as with slideViewer, everthing is generated by writing just few lines of HTML such as an unordered list of images.
Ever seen how CoreAnimation creates those useful and eye-pleasing animation effects? Well that’s what the developer of this plugin aimed to achieve – QuickSand is a jQuery plugin that helps reorder and filter items with a nice shuffling animation on your website. There’s a nice demo on the developer’s website and I think everyone should go check it out.
Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. According to the developer, this plugin was inspired by ImageCaptions, another jQuery plugin for displaying captions like these.
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects, including Wave, Zipper, Curtain, Fountain Top, Random Top, and so on. The plugin is fully tested and is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+. Personally I love the ‘Wave’ effect and think it’s a sin not to visit the website and check out the demo.
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable interactive area. The simplicity and the animation effect of this plugin is simply mind blowing. At this time of writing, the graphic movement comes in 11 different styles – including the classic Turntable-alike, Figure 8, Square, Water Wheel, Conveyor Belt, etc. A demo of all these movement style can be found here.
YoxView is a free Lightbox-type media and image viewer jQuery plugin. Okay, I admit YoxView is not ground-breaking but you have to give credit to its user-friendliness (and yet, feature-rich).
jCrop provides an easy way for onpage image-cropping. At first look this feature seems a little… unnecessary. But on a second thought (and after some detail investigation on its demo), I started to appreciate what the plugin does and believe certain webmasters (for example, photography website owners) will appreciate it very, very much.
jQzoom is a great and a really easy to use script to magnify what you want. The plugin works on most modern web browsers, namely Internet Explorer version 6+, FireFox version 2+, Chrome version 1.0, Opera version 9+ as well as Safari version 2+.
Agile Carousel is a jQuery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!
Pikachoose is a (very popular) lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well… all around easy.
Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. One funny fact: The developer of this plugin actually wanted the name ‘Gallerific’ or ‘Gallerrific’ but it was eventually mis-spelled as ‘Galleriffic’. Moral of the story: You don’t need to be good at spelling to be a good coder ;)
If you want a full featured photo gallery with comprehensive navigation functions such as navigation toolbar, thumbnails, autosize frame – jQuery MB Gallery would be it! The plugin is a huge stunner when first released during late 2009 and the latest version MB Gallery even support demostration of Flickr photo sets!
prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.
jQuery Multimedia Portfolio is a plugin that will automatically detect the extension of each media and apply the adapted player. This piece of plugin was released quite some time ago but it was revised and a newer version was released early this year.
TN3 Gallery is a full fledged HTML based customizable image gallery with slideshow, transitions and multiple album options. Compatible with all modern desktop and mobile browsers. Powered by jQuery.