10 Awesome jQuery Image Galleries and Sliders

By Scott Stanton | 11 comments | Programming, Roundups, Web Development

Tweet

One of the most common requests I get from clients is to have some sort of image gallery on their site.  Whether it’s a sliding image gallery on a homepage displaying promotions or a robust gallery full of portfolio images showing off the quality of work, jQuery image galleries area a great way for displaying multiple images on a website.  They are search engine friendly, iPad and iPhone friendly, and lighter weight than a lot of the Flash slideshow galleries on the market.

TN3 Gallery

  TN3 Galleryis an elegant option for anyone looking to display a large series of photos on their site.  It supports galleries, has thumbnail navigation, and a fullscreen mode.  There are various download and pricing options ranging from free to just under $250, with cost dependent on whether you want the TN3 logo replaced with your own, and how many sites you intend to run the script on.

Supersized

  Supersizedis a fullscreen background slideshow, with play, pause, next, previous, and thumbnail navigation options.  You also have the ability to hide or display the image thumbnails at the bottom of the gallery.  A very cool gallery if you’re looking for a true fullscreen image gallery, or even if you’re looking for a base to create website with a fullscreen background image off of.

JQuery LightBox

  jQuery LightBoxis a simple and unobtrusive jQuery photo gallery option that will overlay images on top of the current page.  It has previous and next browsing capabilities as well as the ability to easily and elegantly incorporate captions along with each picture.  Installation is so simple that step 3 tells you to, “Have fun!”

Polaroid Photo Viewer

  Polaroid Photo Viewer is an outside-of-the-box kind image gallery concept.  You’re able to move images all over the page, bring them to the front, and rotate them.  This concept might not be the best on a professional site, or one with lots of images, but it certainly is fun and a unique spin on standard image galleries.  Click here if you’d like to download the source code files.  

Gallerific

  Gallerificis a jQuery plugin that allows you to easily handle a large volume of images while keeping bandwidth to a minimum.  It also features smart image preloading after the page is loaded, bookmark-friendly URL’s for images, keyboard navigation, captions, and thumbnail navigation.  You can also display multiple galleries per page and when javascript isn’t supported, the gallery will break itself down nicely.

Cycle

  Cycletakes a rather interesting approach on how to display images.  Rather than the standard slider, or gallery with thumbnails, their transitions give their photo browsing experience and almost human-like interaction.  The shuffle effect is like shuffling through a stack of photos in your hand, while others like zoom or scrollRight remind me of viewing photos on an iPad or iPhone.

Pretty Photo

  PrettyPhotois another lightbox style image gallery that will overlay your images on top of the current page.  One of the nice things about PrettyPhoto is that it adds in social links so viewers can easily like or tweet a photo.  As if that wasn’t cool enough, it was also built to hand videos, Flash media, YouTube, iFrames, andajax!

Yoxview

  I’ve used Yoxviewon a project before and was extremely pleased with it.  Not only was it a robust design that made navigating through images simple and clean, thanks to the keyboard navigation and icons that you can set to only appear when hovered over, but it was extremely easy to install as well.  You can also set Yoxview to pull images from your Flickr or Picasa galleries, heck you can even have it pull from your YouTube channel because it supports video, Vimeo, YouTube, Flash, and iFrames as well!

S3Slider

  S3Slideris a great option for an image slider to help spruce up a homepage.  Its got a clean, simple, and sleek look that allows you to easily add a bit of text along with your image.  You can easily manipulate the S3Slider to take on various shapes, transitions, and even have your text displayed in different positions.

FancyMoves

  FancyMoves is a jQuery image slider that operates similar to the Cover Flow song browsing option in iTunes.  The central image is the largest, while the ones entering and leaving the screen shrink in size to give the transition an almost 3D effect.  Modifying the slider width and how much of the next and last image to show is a breeze, you can feature multiple FancyMoves sliders on a page, and the last image loops back to the first image.

About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder. Follow him on Twitter @TheScottStanton.