Galleriffic JQuery Plugin

This blog post has been relocated here. I have decided to move this post off my personal blog and onto my new technical blog located here. Please leave your comments at the new location going forward.

Checkout my first jQuery plugin: Galleriffic.

Galleriffic is a dynamic photo gallery optimized to handle a high volume of photos.  I would love feedback on how to improve this plugin.

10/05/2008 Update: Released v 0.7

  • Added support for multiple galleries per page
  • New 0.7 jAlbum skin release

9/30/2008 Update: Released v 0.6

  • Now supports graceful degradation (see example for updated instructions on how to set up your gallery)
  • Added configuration option to specify the number of slides to preload in advance

9/25/2008 Update: Released v 0.5

  • Replaced several lingering hardcoded titles and link text with settings values to allow for internationalization
  • Updated the jAlbum skin

9/20/2008 Update: Released v 0.4

  • Added support for onFadeOut and onFadeIn events (see example for how this can be used)
  • Removed unnecessary iframe that is created when using IE
  • Released a new jAlbum skin that makes creating static albums a breeze (View the demo)

9/17/2008 Update: Released v 0.3

  • Implemented additional options for title and description element selectors
  • To enable the ‘Download Link’, pills a link element selector is now needed

9/16/2008 Update: Released v 0.2

  • Reworked image preloading to load a single image at a time



I was born in a hospital so I could be close to my mom. I was 0 at the time, and now I am 27. I have dark brown hair, hazel eyes, and a lean sexy body. My profession is software development, particularly Web applications. I enjoy orange juice, Thai food, Taste of San Antonio flavored coffee from Central Market, good music, not bad music, Macintosh computers.

116 thoughts on “Galleriffic JQuery Plugin

  1. This rawks. So does Gallerific Plus.

    One thing: in Windows, there’s a refresh sound that’s on by default, and every time the image changes, so does the URL. This can get annoying (“click, click, click, click” as the gallery plays automatically)

    Anyone have a solution for this? :-\

  2. maybe what i have is an old version, butthe image links arent all in a big lump, they are all specified in some js that I can link as an external file, and i much prefer that — am i making sense? anywhere I can find this version again? Id like to use THAT to do mulitipul galleries on a page

  3. Hi Does this gallery have an auto play, so when the page loads the gallery starts to play?

    If so how do i get this to work?

  4. Hi Trent,

    Thanks for this wonderful plug-in. It is really cool. I have a question tho…… it possible that I could switch things around, such as putting the thumbs underneath the main image, and putting the description right next to the main image? Thanks in advance of the help.

    ^_^ Julie

  5. Thanks a lot!

    This plugin help me in a job.

    I’ve only a problem:
    Using facebox plugin (seems lightbox), when i call the file with Galleriffic using ajax request, at every request in same gallery the anchors “#” are added.
    First call: (5 images) #0(1º link), #1(2º link) … #4(5º link).
    Second call: (5 images) #5(1º link), #6(2º link) … #9(5º link).

    How preserve ever the same effect of the first call.

    I want to define a default image when a other thumb out of Galleriffic is clicked using:

    window.location.href = ‘#2’;

    I don’t want hack the plugin.

    Thank you, sorry my horrible english.

  6. Hi Trent, what a fantastic gallery! I’m working on implementing Galleriffic on my portfolio site.

    My one concern is that my site won’t validate any longer because, as the W3C put it, “there is no attribute ‘description'”. Is there any way that I could pull the images, titles and descriptions in from the Javascript file that contains my configuration options? It sounds like that’s the way you originally set it up, but you changed it for accessibility reasons. I’m covered as far as accessibility goes. If Javascript is turned off, my site will still function perfectly well, and I don’t need the thumbs container for my non-Javascript version of the site.

    Any help would be greatly appreciated. I posted my Galleriffic implementation at

    Thanks, Dustin

  7. This is a fantastic plugin. I like the way it displays gallery and the preload function. I’m trying to modify slightly the style to adapt it to my site (in progress).
    I’m also trying to use the jquery.innerfade plugin to replace the FadeIn-FadeOut with a Cross-Fade function, but I think I’m not skilled enough.
    Any suggestion?

  8. This is great, thanks for the work. This is probably something easy that I’m not getting, but how would you limit the thumbnails to two columns? Is this something in the css or in the jquery.galleriffic.js file?

  9. Brian, just reduce the width of the navigation div to something smaller than the space taken by 3 rows of thunbs. You’ll find this setting in the html file. It’s a script in the head, 300px is the default value you’ll find.

  10. What about a graceful degradation on thumbs – hover – activated… (have a look on Galleria) ? Would be a nice effect in my opinion.

  11. This blog post has been relocated here. I have decided to move this post off my personal blog and onto my new technical blog located here. Please leave your comments at the new location going forward.

Comments are closed.