Galleriffic 2.0

Say hello to Galleriffic 2.0.

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

  • Keyboard Navigation
  • Support for synchronized transitions (image cross-fades)
  • Ability to add or remove images after the gallery is initialized
  • Support for custom hash identifiers (when using history)
  • Better API to make it easier to customize
  • Smarter pagination
  • Integration with the jquery.history plugin for history support

Warnings to users attempting to upgrade from version 1.0

  • The onChange event in 1.0 has been renamed to onSlideChange.
  • All transition event handlers have new signatures, so you will need to make sure to update any transition event handlers you have implemented.
  • Using synchronized transitions requires changes to your stylesheet – primarily the additional of relative and absolutely positioning so that two images can occupy the same space at the same time.

There are now 5 examples, each builds on the previous.  For a visual treat, check out the last example, whose colors I inverted.



    Is there a way to re-enable the browser back button when using Gallerific jQuery.history plugin?


    Hi – Is there a way to trigger the gallery so that it rereads the page?

    I am incorporating a multiple gallery option, where the user can click on the gallery name,
    and I would do an Ajax call to replace the
    thumbs section of the code, with new code.

    I haven’t tried it yet, but looking over the way you have it set up, you have it set up as a variable instead of a function.

    Any ideas?



    Is there a way to resize the images so they preview larger? When I resize the slideshow div’s and container it auto-loads the images smaller. Is there a reason for this?


    I have a problem with gallery. I can’t use space button to write some text to the textarea if I use Galleriffic on page. Can you help me?


    I LOVE this plugin for photos; it’s the best there is, and CLOSE to PERFECT for all my needs. However, I also use it for genealogy documents, and here’s the scenario: I’ve accessed the larger photo from the thumbnail perfectly. What I’d love to change for myself is that if someone clicks the LARGER photo, it would zoom by X degrees, maybe one or two times.
    I’m a net coder, but not that familiar with javascript or jquery, so I can’t figure out where in the code I’d replace the onclick that goes to the next slide with onclick ZOOM, nor even a notion how to do that. Can you advise? Best scenario would be to zoom it to a modal window and shade the background until the window is closed. THANKS FOR THIS WONDERFUL TREAT!


    Actually, another choice would to be able to figure out how to replace the viewer of the large image with AJAX Control Toolkit’s version of SeaDragon, which I already use elsewhere. That has its own zooming controls which are great. I have the jpg thumbs to build the thumbnails.


    Ya setting up some kind of forum area for people you want ta use this plugin, pal. Kind of pointless if there ain’t a central hub for discussion of code you want us all downloading and promoting unless it is possible to exchange ideas and resources for the thing.


    Having major issues with the tag, although I am very impressed with the widget, however, what i”m finding is that north of 100 images, the page and performance degrades significantly. I have moved to call the image data and associating LI tags via an ajax call, but at a magnitude of 1000 images in a gallery, the processing time is extremely slow since it needs to load the entire LI list set. Any thoughts on how to limit things? I am hoping effectively to, when a user selects to start at image 600 (for example), that the widget only attempts to load images 600-610 (if there are 10 thumbs per page). Rather than loading the entire list of 1000 images and then finding the 600th image position and displaying it. For all the obvious reasons this would be more effecient. Do you have any recommendations on optimizing a extremely large image set, or am I working with the wrong widget? For what its worth on a smaller set, this is a fantastic widget. Finally i’ll point out that i”m working with version 1.0, if version 2.0 has significantly improved things, please let me know.




    Re: “Events that allow for adding your own custom transition effects”.

    I would like the transition to slide from right to left. Any example code would be good.



    Hi there! Really nice plugin you got here 🙂

    But I got a problem when the slideshow loads a new image. The disapear and the next image loads below for a few seconds before it hops up to the correct position.


    John Porter

    I was wondering if there was any way to get the plugin to not transition the main image when the thumbnail pagination is moved to the next/previous page?

    Joe Williams

    I have to write and thank you for this extremely well crafted plugin! Your code is clearly written and properly formatted, your naming conventions make sense and are easy to follow, your CSS is actually clean. Even though I don’t know javascript, I am able to understand yours and customize the program for our needs…, very well done!

    I am updating the above site for the College of Southern Nevada Foundation. Look for publication in a couple of weeks if you’d like to see your work in action. I tried a couple of other gallery plugins from the ‘net before finding yours, and what a relief. It is great to see that there are still programmers out their who get it!

    Thanks so much!


    Is there anyway to incorporate so that the thumbs are auto created by that script?

    So far I have had little luck getting this script and that one to play nice together.


    Great plugin, i use “Alternate layout using custom previous/next page controls” but can i insert multiple photos in one slide? like when they are arranged one bellow another?

    Chinmay Mashelkar

    Hi i;m getting error thumbs noscrpit css not found even thoghu i hve loaded all css & all path are correct.Plsseae help waiting for u r reply


    I cannot get the main image to display at larger than 600px wide. Am I doing something wrong? Any help would be much appreciated.

    UI Designer

    Could you please advice me how I can add next/previous icon in the image on mouse over. Thanks in advance


    I would like to use Gallerific for an HTML/CSS portfolio site I am building for myself. I am a newbie when it comes to jquery and am wondering if Gallerific will work on a static non-blog site.


    Sorry if this is a stupid question, but I’m a complet newbie.

    How do I get the alternate view ( the one with the thumbs above the picture)? I’m using the zenphoto theme zpardose which uses galleriffic.

    Abdullah Khan

    Hi, i am trying use this in an internet site using an iframe. So, i’ll need to reduce the canvas size of the slideshow. can any one tell me exactly what i can do in order to adapt the size of the slideshow for my site?


    i’m using your plugin ,very good work . Is possible stop the loading of the first image in gallery when this is initialized ?i would like to begin with empty space .Please can you help me?


    YO! thxGRT plgn!
    BTW: take out the /Safari support/g in jquery.history. it doesn’t need that support anymore. or should i post that anywhere else? commit..

    Kenneth Yucha

    I have the gallery working (option 5) but when I add more than 18 images to the gallery they fail to show in the player, suggestions?


    Is it possible to remove the page numbers for navigation and have maybe a next and previous arrow below the thumbnail grouping for navigation? Or maybe even just a horrizontail scroll bar so all the images can be viewed just by scrolling?
    Thanks in advance, and great plugin…

    Ivan Manoel

    this is an incredible script already utlizo the years in my projects, but every time I look for a newer update and find nothing, someone could tell me where can I find a newer version because the latter is the year 2008 someone would have some latest version of 2.0.1 or if no hint is for us to create a community to help improve this great code hugs to all …


    I love this plugin and would really like to use it. It is much better than anything else I have found on the net. However, I need the thumbnails row to show up beneath the large photos. When I move things around using the css file, the links stop working correctly. Is there a way to move the thumbnails row from the above the large photo to beneath it?

    Isabel Verplaetse


    I’m rather new to webdesign and would like to make a gallery to show may portfolio.
    I followed the instructions and I see colored spaces where my fields are (colors later will change) but the 2 thumbnails that i’ve made aren’t showing. What am I doing wrong.

    Many thanks.
    Isabel Verplaetse


    Hi Trent,

    Awesome plugin. I got everything lined up nicely using example 2. However, I’m stumped on what to change to pull the pics locally and not from Flickr. Thank you in advance.


    Nice plugin, but found a bug.
    Have confirmed it and the bug is present in the downloadable example as well.

    Have downloaded the example here:

    Having opened example-1.html in firefox, clicking multiple times on the title to open the corresponding image, the image is loaded multiple times.
    How can this be fixed?


    Is it possible to use this plugin with Drupal?


    is it possible to rotate the photos to 90deg while displaying the photos.

    Rob te Riet

    Why does example-4.html not work in IE. All the buttons, except the play slideshow button, don’t react. So prev and next image don’t work. Also when you click on a thumb the bigger image is not showing.
    I tested example-4 in FF and Safari and with these browsers all works as it should…

    Tomy Sebastian.

    Really a beautiful plugin.
    I want to CLEAR ALL existing images in the gallery, and insert NEW fresh images in the gallery through javascript or jQuery.

    Is it possible to do it? Issuing of gallery.removeImge() several times is not a good idea.

    Also, when I deleted allimages, and then tried to insert it at position 0, there was no error, but no image was inserted.!

    This problem is posted at ID 279


    Nice plugin, but found a bug.
    Have confirmed it and the bug is present in the downloadable example as well.

    Have downloaded the standard Gallerific package from the site.

    Having opened example-1.html in firefox, clicking multiple times on the title to open the corresponding image, the image is loaded multiple times.
    How can this be fixed?


    Hi. Great work on Galleriffic. However, I’ve hit a snag, which having done several searches seems very common:

    If you define a Doctype, Galleriffic fails in Internet Explorer 8.

    I need to define the Doctype as the page layout goes wrong and other elements on the page are reliant on it.

    I noticed someone raise the issue way back at the beginning of 2011. Has anyone found a solution?

    Tomy Sebastian.

    Really very nice plugin, but found a very serious bug in it when tested it on IE, and Chrome.

    I removed ALL images one by one from example 4 by calling the function gallery.removeImageByIndex(0);.

    (I passed the INDEX as 0 so that first image is always removed.)

    Then I tried to insert a new image by calling the function gallery.insertImage(‘XXXX’, 0);

    It shows no errors, but the image is NOT inserted. So, when there are no images in the gallery, INSERTION is not possible!

    Could you please give a solution to it?

    Ace Web Design

    For those that are having issues with the images not showing, I had this issue, and when i removed the line-height out of the css, they all appreared. Not sure if this will work for everyone, but it did for me. Hope that helps.

    Anup Das Gupta


    The plugin is great. And in the js file you have given comment about various functionality. But I think you should add one more section on your plugin page. May be you can call that section as documentation where you can add the functionality support(detail of various methods like pause and so on).

    One more thing, can you please try the big image with various image sizes. I think it gives some Firefox style issues when image is larger than the content area.


    Hi, thanks for your work

    is possible add next/previous icon in the image on mouseover?

    Richard Bland

    Hi Trent,

    I have featured your plugin on my new website:

    If you are interested I would like the opportunity to “fork” your code and bring it up to date. Email me if you can. Thanks


    Is there any movement on making this responsive?

    John Hancock

    Hi, last weekend I adapted your scripts to make a new website. It works great, if a bit confusing on the adding additional photos and making them work right. you can see it in action at my site: I am also going to rework my other site using your script. If you are still accepting paypal I wish to donate to you. But I don’t want to if you not still operating. I notice your last post seems to be from 2009. please advise, Trent


    I love this script (if I could use it). I have not seen any answers to the Question about changing the size of the main image… is there an answer? I changed the size in the galleriffic.css from 550 to 580px, and changed the number of thumbnail columns from 3 to 2 (in order to make room for a larger main image).
    Is there any way to change the size of the main image depending on the device used for viewing (to make it a responsive page)?
    I am fairly new and using Dreamweaver 5.5, is there a plugin for it or am I reduced to texting it all in?
    Are you still accepting donations on this site?
    Thank you!


    Hi, is there any option to show the images random?

    Huw Rowlands


    How do I modify the JS so that the it uses hover instead of click? So when I hover over a thumbnail, the larger picture changes.



    Could you please include an example on how to bind a lightbox-a-like effect on click? I tried but it didn’t work since the href of the A attribute is replaced by #1,2,3,… ? Why?


    Is it possible to reverse the direction of the slideshow play back?


    Galleriffic works only on the main page but how can I make it work on the inside pages of the website?

    Dalibor Sver

    Hello, nice plugin!
    Is there a way that caption text could be not fixed, but to be below the image, regarding different heights of images?


    Very nice gallery. One thing I would like to do is be able to specify a default image other than the first, IOW go directly to a specific image in the set via URL: galleriffic.html#hash. How could that be done?