*************************************************************
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.
FAQ
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.
Recent Comments