20+ jQuery Plugins for Gallery and Portfolio Websites

alt="20+ jQuery Plugins for Gallery and Portfolio Websites" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2010/09/jquery-500x200_c.jpg" />

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.

1. jSquares for jQuery

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-1.jpg" width="750" />

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 ‘href="http://boedesign.com/demos/keystrokes/">Keystrokes‘ – it’s not included in the list because it’s unrelated to our topic today.)

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://boedesign.com/blog/2009/10/22/jsquares-for-jquery/" target="_blank">jSquares – Demo & Documentation

2. SpaceGallery

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-2.jpg" width="750" />

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.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://eyecon.ro/spacegallery/" target="_blank">SpaceGallery – Demo & Documentation

3. LazyLoader

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-3.jpg" width="750" />

Lazy Loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. At first look LazyLoader seems unrelated to our topic today; but mind you, a well-designed web gallery need more than just being beautiful. User experience, too, is a very important factor (and the Lazy Loader simply improve that, a lot).

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://www.appelsiini.net/projects/lazyload" target="_blank">LazyLoader – Demo & Documentation

4. Ad Gallery

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-4.jpg" width="750" />

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.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://coffeescripter.com/code/ad-gallery/" target="_blank">Ad Gallery – Demo & Documentation

5. Nivo Slider

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-5.jpg" width="750" />

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.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://nivo.dev7studios.com/" target="_blank">Nivo Slider – Demo & Documentation

6. GalleryView

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-6.jpg" width="750" />

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 href="http://spaceforaname.com/gallery-light.html">this demo page to see this plugin in action.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://spaceforaname.com/galleryview" target="_blank">GalleryView – Demo & Documentation

7. SlideViewer Pro

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-7.jpg" width="750" />

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.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/index.html" target="_blank">SlideViewer Pro – Demo & Documentation

8. QuickSand

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-8.jpg" width="750" />

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.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://razorjack.net/quicksand/" target="_blank">QuickSand – Demo & Documentation

9. Captify

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-9.jpg" width="750" />

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.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://thirdroute.com/projects/captify/" target="_blank">Captify – Demo & Documentation

10. jqFancyTransitions

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-10.jpg" width="750" />

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.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://workshop.rs/projects/jqfancytransitions/" target="_blank">jqFancyTransitions – Demo & Documentation

11. jQuery Roundabout

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-11.jpg" width="750" />

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 href="http://fredhq.com/projects/roundabout-shapes/" target="_blank">here.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://fredhq.com/projects/roundabout/" target="_blank">jQuery Roundabout – Demo & Documentation

12. YoxView

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-12.jpg" width="750" />

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).

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://www.yoxigen.com/yoxview/" target="_blank">YoxView – Demo & Documentation

13. JCrop

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-13.jpg" width="750" />

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.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://deepliquid.com/content/Jcrop.html" target="_blank">JCrop – Demo & Documentation

14. JQzoom

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-14.jpg" width="750" />

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+.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://www.mind-projects.it/projects/jqzoom/" target="_blank">JQzoom – Demo & Documentation

15. Agile Carousel

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-15.jpg" width="750" />

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!

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://www.agilecarousel.com/" target="_blank">Agile Carousel – Demo & Documentation

16. InnerFade with JQuery

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-16.jpg" width="750" />

InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out. These elements could be anything you want, e.g. images, list-items, divs. You can simply produce your own slideshow for your gallery or even create a newsticker or do an animation.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://medienfreunde.com/lab/innerfade/" target="_blank">InnerFade – Demo & Documentation

17. PickAChoose

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-17.jpg" width="750" />

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.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://pikachoose.com/" target="_blank">PickAChoose – Demo & Documentation

18. Galleriffic

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-18.jpg" width="750" />

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 ;)

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://www.twospy.com/galleriffic/" target="_blank">Galleriffic – Demo & Documentation

19. jQuery MB Gallery

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-19.jpg" width="750" />

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!

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://pupunzi.open-lab.com/mb-jquery-components/mb-gallery/" target="_blank">jQuery MB Gallery – Demo & Documentation

20. Trip Tracker

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-20.jpg" width="750" />

The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://slideshow.triptracker.net/" target="_blank">TripTracker – Demo & Documentation

21. CrossSlide

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-21.jpg" width="750" />

CrossSlide is a jQuery plugin implementing in 2kB1 of Javascript code some common slide-show animations, traditionally only available via Adobe Flash. Internally CrossSlide does not rely on lookup tables, building instead a “chain” of functions. Each function starts a linear phase of the animation through jQuery, setting the next function in the chain as a complete callback. After all the functions are prepared and the animation is started, no other calculations are made. This setup reduces runtime overhead to the absolute minimum, making CrossSlide the most optimized implementation of these effects.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://tobia.github.com/CrossSlide/" target="_blank">CrossSlide – Demo & Documentation

22. prettyPhoto

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-22.jpg" width="750" />

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.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/" target="_blank">prettyPhoto – Demo & Documentation

23. Galleria

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-23.jpg" width="750" />

Galleria is a JavaScript image gallery take a simple list of images and turn it into a foundation of multiple intelligent gallery designs, suitable for any project. The current version of Galleria *(version 1.2) is still in beta and the stable release is set to september 2010.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://galleria.aino.se/" target="_blank">Galleria – Demo & Documentation

24. jQuery Multimedia Portfolio

class="border" alt="jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2010/0826-24.jpg" width="750" />

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.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://www.openstudio.fr/jQuery-Multimedia-Portfolio.html?lang=en" target="_blank">MultiMedia Portfolio – Demo & Documentation

25. TN3 Gallery

class="border" alt="TN3 Gallery - jQuery Plugin and Tools" src="http://www.webhostingsecretrevealed.net/images/2011/0616-1.jpg" width="750" />

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.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
 href="http://www.tn3gallery.com/" target="_blank">TN3 Gallery – Demo & Documentation

More Roundup List For Web Developers & Designers

Like this roundup list? Well, here’s more.

class="nostyle special icon-list">

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/web-tools/8-must-see-seo-and-online-marketing-monitoring-tools/">8 Must-See Monitoring Tools for Web Marketers and SEO

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/web-tools/40-must-see-free-web-design-tools/">40 Free Web Designer Tools

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/web-tools/top-10-web-development-apps-for-the-android/">Top 10 Web Development Apps for Android Users

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/featured-articles/30-must-see-web-generator-for-lazy-webmasters/">30 Web Generators for Lazy Webmasters

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/web-design/top-30-wordpress-hacks-tutorials/">30 Must Learn WordPress Hacks

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/web-design/30-latest-css3-tutorials-you-probably-have-not-read-before/">30 Latest CSS Tutorials You Probably Have Not Read Before

Page 28 – Web Hosting Secret Revealed