Galleriffic 1.0


Update: Galleriffic 2.0 has been released. Read about it here.


At long last, I have released the 1.0 version of Galleriffic, which packs all sorts of new features.

For first time readers, Galleriffic is a jQuery photo gallery optimized to handle high volumes of photos while conserving bandwidth. h0bbel has posted a nice read on some of the benefits of Galleriffic over other photo gallery scripts.

New Features

  • Updated to work with jQuery 1.3 (apparently jQuery 1.3.2 introduces a flicker the gallery advances)
  • OnTransitionIn and OnTransitionOut events that allow for plugging in custom transitions
  • SlideShow auto start option
  • Disable history and url hash writing option
  • Support for showing an element (such as an animated loading image) when waiting for an image to load
  • Thumbnails are now simply shown/hidden instead of being rebuilt which allows for any custom html to be used as a thumbnail
  • Replaced invalid html attributes “description” and “original” with an optional caption element that can contain any custom html
  • Changed the toggle slideshow span to a hyperlink

By exposing both image and page transition events, the doors of creativity are now open for plugging in your own image transitions.  This should also lend to a more modular approach for extending Galleriffic.


Will Galleriffic generate the slide and thumbnail images automatically?

I have been asked a lot if Galleriffic automatically generates the thumbnails and slides.

Galleriffic by itself does not do any image processiong or generation; however, there is a great tool that does: jAlbum.  I have created a jAlbum skin that I use myself for creating my personal galleries.  After installing jAlbum and the Galleriffic jAlbum skin, simply choose your source image directory and an output directory, click “Make Album”, and wallah, you now have a complete html gallery with 3 different size versions of each image.

How can I center the slide image?

Thanks to Cristi for providing a solution to this problem. Click here to read her solution.

How can I change the number of thumbnail columns?

With the stylesheet used in the example, each thumbnail is floated left, and thus as many thumbnails that will fit in the width of the column will be displayed. If you want fewer or more columns, make the width of the navigation panel smaller or larger. I am currently setting its width using javascript with the following line in the html:

document.write(<!-- div.navigation{width:300px;float: left;}div.content{display:block;} -->

It has been pointed out in the comments that a better way to do this is to use the jQuery.css() method just before initializing the gallery.

Where do I submit my issues or enhancement requests?

I started an issues list that I will start working off of for future releases here. Submit your issues and enhancement requests in this list.



    I love your script, the problem is that I’m using in my site with ajax to implement
    the inner pages content, and when i call the gallery page where
    i put the list of my images that gallery doesn’t work.
    It’s like you have to put the gallery list hardcore. to make it work


    @yanine just make sure that you don’t initialize the gallery until after the inner page content has loaded. You will need to initialize Galleriffic in the callback function of your AJAX load method responsible for retrieving the inner page content.


    @John K For the moment, you will need to widen the page width and slideshow container width in the stylesheet to accommodate the larger image sizes. I am midway through the next release of the jAlbum skin which will automatically correct the page width problem.


    What’s a easy way to display # of ## Slides, where # – current and ## is total images.

    I tried currentIndex and index in the onChange function, but it’s all undefined.


    hi Trent,
    I try to use galleriffic. I have problems with the generation of the urls. I use Typo3 an the extension realurl. For this extension it is necessary to set the baseurl-Tag an the head-tag. And this tag is the problem.
    Galleriffic changes the correct link from the image to href=”#0″. The browser read the baseurl and so I get a wrong link, like -> gallerific don`t work, because the browser jumps to the startsite.
    Is it possible for gallerific to generate the hole link, like If is true, how?



    I’ve got a problem in IE 6 + 7 (in Firefox and Safari, everything’s fine):
    When I start a slideshow, on each image reload the page jumps up to somewhere near the top.

    Any idea what might be causing this?

    The gallery has been integrated on a quite old site which is using tables for layout (and the full gallery is in one of those ‘s).
    I know that’s bad but the client wouldn’t pay a full rewrite using clean css layout.
    Could it be that this is disturbing Galleriffic?

    T. Jung


    Ooops, trying to type an HTML tag messed up my posting:
    »and the full gallery is in one of those ’s« should read:
    »and the full gallery is in one of those table cells«.


    I’ve narrowed down the problem a bit:
    – Tables are NOT responsible.
    – The document was rendered in quirks mode. :-/
    After putting it to standards compliance mode, the problem is solved for IE7 but not for IE 6.


    Great gallery. I’m also having issues getting the gallery to work when inside a jQuery fancybox. Exactly as described above, works outside of fancybox fine but when inside I need to refresh the page for the main image to change. Has anyone found a solution for this?




    Hi trent

    Great work. I noticed on your pics (some of yr wedding pics) and mine there are white spots/specs thru the image. Are you aware of this? The image on its own does not have the white specs but when run thru galleric it shows up.

    Is it possible to place the navigation on the top or bottom to cater for panaramic shots. I noticed it works for right or left.



    Ooops, sry just noticed to place suggestions in list, aplogies, denis



    Galleriffic has worked great, thanks..

    I’m trying to pull out the image information during the OnTransitionIn event, to populate tinymce with description, path, and title. Can you help me out? I have not figured out the right combination.



    This is a great little script – I’m using it for a small typography gallery here:

    I have two questions – first, I’d like to have a different hover/focus image (a red version of the same thumbnail) for the current thumbnail. Can you point me in a direction to make the necessary modifications?

    Second, under the PRE | NEXT controls, is there any way to make a counter that would show for example ‘1 | 26’ for the first image, ‘2 | 26’ for the second, etc.?

    Ideias Simples

    This is a great plugin. Simple and very useful.

    I was having a problem with the width of images, it would not fit on my page. The images are on another server and I cannot change the size of images, also I didn’t want to change the size of the layout, just because of the gallery.

    I tried using the onChange event and put a new Image size there, but didn’t work as (I think) it was rendering the image twice, and the second time occurs after the onChange event. On the first rendering it was the size I specified, and then on the second it was returning to the normal size.

    So until you fix that I made a small change in the code, I added a setting “imageMaxWidth: 0” and on the “:buildImage” I added:

    //Resize Image
    if (this.settings.imageMaxWidth > 0 && image.width > this.settings.imageMaxWidth){
    image.width = this.settings.imageMaxWidth;

    I am no expert in Javascript but I think it does the trick, hope you don’t mind but I really needed that change in the code.

    Thanks a lot!!!


    Hi! I’m trying to use the viewer for vimeo videos, is that possible? Thanks 🙂



    I really like your script but I would like to inquire about something…

    Currently, the images come out gracefully after clicking on thumbnails. Is it possible for the images to gracefully come out upon “HOVER” on the thumbnails? If yes, how do I go about it?

    I really would love to hear a response from you soon.

    Thank you!

    Simon Duncan


    Script looks great. Would love to use it (and acknowledge your code).

    Uploaded it to see if it works… and am being driven mad by the pagination navigation.

    What am I doing wrong?


    Simon Duncan


    Got it! (Ignore previous message)

    Sorry… for some reason I was missing a “<" on line 574 of the javascript file.

    Great script.



    Hi! I’m just wondering if this player can be used with vimeo or video in any way? Thank you!


    @Chedie, @Tanya, and @joshuaseo

    Funny all 3 of you asked me the same exact question on the same day. Are you all the same person by some chance? Anyway, I am posting my response to each of you here so that you can collaborate in reaching the solution.

    I have never tried before to make the gallery react to hover instead of click. I imagine it would look something like what you (Tanya) mentioned, changing out the .click event bindings in the script to .mouseover bindings. You probably will want to disable history by setting the ‘enableHistory’ config option to false.

    Let me know how it goes.


    Chedie is working with me on this project and I’m not sure who Tanya is. I changed 4 places that .click was located at then replaced it with .mouseover but it still doesn’t do the exact desirable result.

    On line 167, enableHistory is already false. Unless I’m missing another place. If you’d like to see the example, go here.



    Some thumbnail and original images sometimes have visual problems on
    Internet Explorer 7 & 8. Mostly on the black colors on an image, big white
    spots occur. Those spots sometimes occur bigger, sometimes smaller. On
    Firefox, there is not any problem.

    See here the example ( so open in IE 7 or 8 )


    @Nilez – I found this which may explain the white specs. From Dan Walker
    ( ):

    “After some research, the problem with white dots in IE has something to do an IE bug
    which shows very dark black as transparent with certain opacity filters. See this
    forum post: The white dots
    are the white background showing through transparency in the image. The simple fix is
    to make your background color of the image rotator div black. White dots will be gone.”


    Hi Trent

    Couldn’t get the gallery to work on the site I want to use it on, but was working fine on a test page I made. I’ve got an external scripts.js file with loads of stuff going on in there, so I took out chunks of code bit by bit to try and find a conflict. When I take my other jquery pagination code out it works perfectly!

    So just removing this – initPagination(); allows it to function completely normally! But I need this for pagination elsewhere in the site…

    The script on my page is exactly the same as yours on the advanced one. I’m sure there’s a simple way around this but my script knowledge is pretty lame =P

    Any help on this much appreciated

    Thanks a lot



    @Patz – Could you post a link to your site where you are testing. Galleriffic does build its pagination using a class name ‘pagination’, and it is likely the other script may be selecting the Galleriffic generated elements unintentionally.


    This gallery of images is really well done!
    Many there are, but it contains all the necessary elements:
    2.right images
    4.Link exterior on each image
    5.Effect “on mouse over” on miniatures.
    6. ……

    I’m a Web designer and I’m going to put
    my site such as galleries of thumbnails.

    On some sites that use your gallery is not your name.
    E ‘required to add your copyright ?
    It requested a link to something?




    You can use the gallery however you like without needed to add my name anywhere. I simply ask to email me a link to where you implemented the gallery for reference purposes.