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.


862 Responses to “Galleriffic 2.0”

  • Beattie Says:

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

  • Doug Says:

    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?

    Thanks.

  • beth Says:

    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?

  • Valeriy Says:

    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?

  • Torian Says:

    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!

  • Torian Says:

    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.

  • Si Says:

    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.

  • Adam Says:

    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.

    Regards,

    Adam

  • Hasan Says:

    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.

    Thanks

  • David Says:

    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.

    Link: http://re-accessories.com/products/lookbook/

  • John Porter Says:

    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 Says:

    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!
    Joe

Leave a Reply