20+ jQuery Plugins for Gallery and Portfolio Websites

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

jQuery Plugin and Tools

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

 jSquares – Demo & Documentation

2. SpaceGallery

jQuery Plugin and Tools

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.

 SpaceGallery – Demo & Documentation

3. LazyLoader

jQuery Plugin and Tools

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

 LazyLoader – Demo & Documentation

4. Ad Gallery

jQuery Plugin and Tools

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.

 Ad Gallery – Demo & Documentation

5. Nivo Slider

jQuery Plugin and Tools

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.

 Nivo Slider – Demo & Documentation

6. GalleryView

jQuery Plugin and Tools

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.

 GalleryView – Demo & Documentation

7. SlideViewer Pro

jQuery Plugin and Tools

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.

 SlideViewer Pro – Demo & Documentation

8. QuickSand

jQuery Plugin and Tools

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.

 QuickSand – Demo & Documentation

9. Captify

jQuery Plugin and Tools

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.

 Captify – Demo & Documentation

10. jqFancyTransitions

jQuery Plugin and Tools

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.

 jqFancyTransitions – Demo & Documentation

11. jQuery Roundabout

jQuery Plugin and Tools

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.

 jQuery Roundabout – Demo & Documentation

12. YoxView

jQuery Plugin and Tools

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

 YoxView – Demo & Documentation

13. JCrop

jQuery Plugin and Tools

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.

 JCrop – Demo & Documentation

14. JQzoom

jQuery Plugin and Tools

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

 JQzoom – Demo & Documentation

15. Agile Carousel

jQuery Plugin and Tools

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!

 Agile Carousel – Demo & Documentation

16. InnerFade with JQuery

jQuery Plugin and Tools

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.

 InnerFade – Demo & Documentation

17. PickAChoose

jQuery Plugin and Tools

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.

 PickAChoose – Demo & Documentation

18. Galleriffic

jQuery Plugin and Tools

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

 Galleriffic – Demo & Documentation

19. jQuery MB Gallery

jQuery Plugin and Tools

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!

 jQuery MB Gallery – Demo & Documentation

20. Trip Tracker

jQuery Plugin and Tools

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

 TripTracker – Demo & Documentation

21. CrossSlide

jQuery Plugin and Tools

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.

 CrossSlide – Demo & Documentation

22. prettyPhoto

jQuery Plugin and Tools

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.

 prettyPhoto – Demo & Documentation

23. Galleria

jQuery Plugin and Tools

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.

 Galleria – Demo & Documentation

24. jQuery Multimedia Portfolio

jQuery Plugin and Tools

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.

 MultiMedia Portfolio – Demo & Documentation

25. TN3 Gallery

TN3 Gallery - jQuery Plugin and Tools

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.

 TN3 Gallery – Demo & Documentation

More Roundup List For Web Developers & Designers

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

23 Comments

  1. Hey in all these plugins the images are saved in a folder n then displayed.What if i want images that have been retrieved from the database to be displayed in the slideshow,how do i go about it?

  2. I enjoyed this list and I learned a lot.

    I’ve got to stop working on other people’s websites and begin working on my portfolio – This was enormously educational.

    My thanks – with best wishes…

  3. merci breaucoup pour ces exemples de slider des photos j’aimerai bien si il y a des nouveauté n’hésitez pas de le mettre

  4. thank you for these breaucoup slider examples of photos I would like if there are new do not hesitate to put

  5. Hi im am desperately looking for a multimedia gallery like the AD Gallery that can handle both images and videos… any info will be highly appreciated thanks :)

Leave a Reply

Thanks for sharing! Stay connected with us on Twitter (@WHSRnet)