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.

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.

Tags: javascript, jquery, photo gallery

This entry was posted on Tuesday, February 3rd, 2009 at 11:38 pmand is filed under javascript. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

427 Responses to “Galleriffic 1.0”

tmlabs Says:
July 31st, 2009 at 7:35 pm
The centering method that Cristi supplied didn’t work for me (jquery 1.3.2) So I used the following in the onTransitionIn function:
```
jQuery('.image-wrapper').width(jQuery('#slideshow span a img').width()+5);
```
And also added to galleriffic.css:
```
.image-wrapper {
	display: block;
	margin: 0 auto;
}
```
Cliff Says:
August 2nd, 2009 at 5:37 pm
This is a fantastic script! Thank you very much.

You mentioned you were looking for feedback.
I’d like it if the pagination included a First and Last link. This would be helpful if there were thousands of images.
Also, for the pagination, if it could always be at the bottom, it might look a little nicer.

Anyhow, thank you very much.

Best regards, Cliff
Cliff Says:
August 2nd, 2009 at 6:16 pm
Me again.

Along with the pagination displaying at the bottom, the it might also look nice to have the caption div at the bottom.
jvirtuel Says:
August 3rd, 2009 at 12:35 pm
hello, i am looking like crazy to find a way to make the slide show stop at the last picture, this is a gret script and i really want to keep it..

Please, is there any way, this start to be really frustrating

Thank you
Jake Says:
August 4th, 2009 at 3:28 pm
@trent You stated this below would you be so kind to give an example?

@Jake – You can get to the original data by accessing the data property of the gallery. This property returns an array of metadata objects for each image. The metadata object has the following properties:
Jake Says:
August 4th, 2009 at 3:54 pm
here is what i have attempted
onChange:

function(prevIndex, nextIndex){
var id = $(“ul.thumbs li:eq(” + nextIndex + “) .itemID”).text();
CallPageMethod(“GetDescription”, onGDSuccess, onFail, “ID”, id);
$(‘#gallery’).data[nextIndex]);
George Says:
August 5th, 2009 at 7:09 am
Best looking and speed-wise image gallery. Very much appreciate how you kept the look and userability to a min…

Here’s my question —-> how can I default to a certain thumbnail? For example, I call the image gallery from the parent page via a certain thumbnail (can be any thumbnail in the set) and I want the gallery top open up but have that thumbnail as the default diaply.

Doable?!? Went throught he JQUERY but got absolutely lost
Leah Says:
August 6th, 2009 at 5:22 am
Love this gallery. I changed the width of the thumbnail columns to display more per row, which works except that the rows don’t always fill up before a new row starts, such as (where each X is a thumbnail):

X X X X X X
X X X
X X X X X X
X X X
X X X X X X
X

Any idea what might be happening here? I have tried so many things but can’t get ti right. Thanks!
Leah Says:
August 6th, 2009 at 5:25 am
Me again… in my diagram above, the “short” rows (with 1 or 3 X’s) actually align to the right (right-justified)… (I entered it that way but I guess all the left spaces are ignored).
Trent Says:
August 6th, 2009 at 9:36 am
@Leah – I’ve seen this happen when the image heights of the thumbnails are not consistent. Otherwise I’m at a loss, we are at the mercy of the browser and CSS now.
Trent Says:
August 6th, 2009 at 10:11 am
@Jake – Assuming the variable name you are assigning the result of the galleriffic function is called ‘galleryAdv’, the following should work within the onChange event:
if (galleryAdv) alert(galleryAdv.data[nextIndex].title);
The tricky thing here is the first time the event is fired, the galleryAdv variable will not be initialized, thus the null check. In a future version of Galleriffic, I am going to move the event handlers from the settings object to the gallery object itself, so that within the handler the ‘this’ special variable will refer to the gallery and we won’t have to perform the null check.
Trent Says:
August 6th, 2009 at 10:46 am
I just moved the SVN repo to Google Code: http://code.google.com/p/galleriffic/

I also started an issues list that I will start working off of for future releases
here.

Start submitting your issues and enhancement requests in the list.
Leah Says:
August 6th, 2009 at 4:38 pm
Trent – thumbnail height was indeed the problem. The original images were from scanned prints, so after reduction the height of the thumbnails varied by 1 or 2 pixels. Cleaned that up and it’s working beautifully.

Thanks!
Vibha Says:
August 7th, 2009 at 1:33 am
Thanks………
It’s great…
Daveed Says:
August 7th, 2009 at 11:55 am
For Trent in response to Cory regarding the hover.
I couldn’t get it to work with
$(‘#gallery-adv’).goto((+index));
I guess the issue is what does #gallery-adv refer to.

This did change the image but did not advance the URL
galleryAdv.goto((+index));

This advanced the URL – which then changed the image.
window.location=$(this).find(‘a.thumb’).attr(‘href’);

Not sure if either was the intention Trent.
kitrik Says:
August 12th, 2009 at 12:59 pm
hello
how can we make to show title and description on slideshow image itself at top or bottom of image, on a 50% transparent box.
thanks
Avo Says:
August 12th, 2009 at 2:01 pm
Hi,

I am using Scala and lift in a comet application. The flickr feed generates the ul li needed by galleriffic in an ajax call. Is there a way to tell galleriffic to reload based on selector? document ready is not called.

Thanks,
Avo
François Says:
August 12th, 2009 at 6:27 pm
Hi,

I’ve been playing around with Galleriffic and NextGEN Gallery on a WordPress website. The final result is visible on http://louisebaker.com.au

Thanks,

F
Cliff Says:
August 16th, 2009 at 4:16 pm
Hi Trent,

I am using this for a page with about 7,000 small images. To get to the end is quite cumbersome.

If you’d be willing to modify the pagination, I’d make a small donation. I’ll be happy to make the donation in advance.

I’d like two things.

First, move it to below the image / caption area so it can span wider than the links listed directly above.

Second, make it more user friendly for large numbers of images, i.e.:
« First|‹Previous | Page:1 … 5 6 7 … 386 | Next›|Last»

Thank you for your consideration,
Cliff
Jason Hartsell Says:
August 17th, 2009 at 9:52 am
I am trying to add sets of images for specific thumbnails. So if I click on a certain thumbnail it may have 2-4 images for that set. I want the pagination or nav to show up when I click on those sets. Does anyone know how this is done?
Dan Says:
August 18th, 2009 at 3:50 am
Hi Trent,

Really love the gallery and I’m attempting to use it for my portfolio site. I have one question. I would like you use the gallery to showcase videos that are kept on Vimeo. Is this possible?

Many thanks,
Dan
Sami Says:
August 19th, 2009 at 3:39 am
Hey thanx for the plugin,

but i have an issue with that!
In Firefox and Safari everything works fine, BUT in all Internet Explorer versions the fade-effect doesnt work! So the image just apperas suddenly without any transition…

This is what i hav in my html-page:
…
onTransitionOut: function(callback) {$(‘#slideshow-adv, #caption-adv’).fadeOut(‘slow’, callback); },
onTransitionIn: function() {$(‘#slideshow-adv, #caption-adv’).fadeIn(‘slow’);}

THANK YOU FOR UR HELP,
Sami
Tom M Says:
August 19th, 2009 at 8:57 am
Hello,

Is there any way to not use the hash tag “www.example.com/gallery/#2″ and use the filename or date instead? I’d prefer a date, possibly something pre-set?

Thanks for an amazing gallery plugin!
Ollie Says:
August 20th, 2009 at 4:22 am
Hi,

Such a great script, but experiencing problems with Safari 2.0 (Mac) and Google Chrome (PC). Chrome problem is gallery does work when clicking the thumbnails or next/previous. Safari 2.0 the thumbs/main images do not show. Both poor browsers but clients still use them.

All works well in IE6/7/8 Safari 3.0+.

Anyone experienced this or have ideas how to fix this??
Jonathan Says:
August 21st, 2009 at 3:16 pm
Hi,
first of all, awesome gallery.
second, I need to put several galleries on the same page. How would you do that?
Dave Says:
August 21st, 2009 at 6:41 pm
I appreciate that creating plug-ins is a lot of work – I know it’s not my place to say it, but I’m getting increasingly frustrated with vague documentation.

In the example is the line “var gallery = $(‘#gallery’).galleriffic(‘#thumbs….”

What is #gallery and why is it there? Can it be omitted, or can we specify a different div? There is no reference to it elsewhere.

What exactly are these? Where do they go – what do they do? What is needed at minimum?

Apologies
Dave Says:
August 21st, 2009 at 6:45 pm
The commenting system stripped out the example container element mark-up – it was to these I was referring with the questions “What exactly are these? Where do they go – what do they do? What is needed at minimum?”
Dave Says:
August 22nd, 2009 at 9:49 am
OK, I’ve worked out what’s what and have successfully integrated it within my site.

Many thanks for the plug-in Trent.
KMCB Says:
August 25th, 2009 at 7:56 am
Thanks for the script. I was able to integrate it as a TinyMCE plugin.

Thanks Again,
KMCB
ShenSF Says:
August 28th, 2009 at 9:33 am
Hi,
So nice the plugin is!
But when I use it, I found there are some memory leaks.
And I find that the memory leak occurs while binding the onload event on the image.
How to solve this problem?
karima premji Says:
August 28th, 2009 at 2:10 pm
Hello Trent:

I love the look of this gallery. I’m using version 1.0, with jquery 1.3.2min, and i have placed everything required on the page, including the jscript at the bottom. The only thing I can see are the thumbnails with the caption below each of them in block style – no floats. In the CSS, the only thing I changed is the width and height of the slideshow to match my images. nadda. I’ve used jquery before, but i’ve never experienced this. any clues?

PS i’m not a coder, or at least i don’t write syntax in anything other than html/css, and maybe basic php.

I could really use some assistance to at least see the slideshow, then i can tweak.

thank you.
kp
Kasper B Says:
August 28th, 2009 at 4:39 pm
Heya,

This is just absolutely the most complete gallery out there! Just brilliant! Only thing that possibly be added would be key support like in facebook when you press one arrow right you go to the next image. That would be the final touch imo!

Best Regards
Kasper
karima premji Says:
August 28th, 2009 at 8:04 pm
got it working, i guess I wasn’t thinking. question: is there a list i can refer to that will give me available transition names and possible settings?

kp
Umar Ali khan Says:
August 30th, 2009 at 9:28 am
Can you integrate Lightbox functionality in to Gallerific as done in another plugin named GallerificPlus OR could you tell me how to integrate lightbox with Gallerific?
A Drew Says:
September 2nd, 2009 at 2:44 am
Hi,

Very great gallery! One issue I am running into is that I am trying to resize the images dynamically and it is not letting me. I find I need the actual image size to be at least 980px x 980px. But I want it to set the width and height to 440px x 440px.

Can you please let me know if this is possible.

Thanks in advance!
Emily K Says:
September 8th, 2009 at 3:20 pm
Hi, I have the same issue that A Drew above me has – I am trying to dynamically resize the images. One way to do this would be to add a css class that changes the height/width when the image is loaded, but I’m unable to do this because of how the images are called in the plugin. If anybody has a solution please post. Thank you.

Great work. I’m sorry I’m kind of bankrupt right now and cannot donate any money.
Maz Says:
September 15th, 2009 at 8:15 am
hey trent, first of all – a superb superb plugin! i absolutely love it, and when my next stipend cheque comes in, i’ll be donating for sure.

but i have a bit of a problem and was wondering if you’d come across this before. this is my first time using jquery so forgive my green noobiness. the following page works beautifully in localhost but as soon as i move it to the remote server, the caption and slideshow divs aren’t displayed. i have no idea why.

http://eighthsamurai.com/hiromi/gallery.html

any ideas would be massively appreciated.
Trent Says:
September 15th, 2009 at 9:12 am
@Maz It looks like the urls for your slideshow images are bad:
<a class=”thumb” href=”./gallery/full/uni1.jpg” …
Maz Says:
September 15th, 2009 at 6:05 pm
Trent, you’re an absolute star! thanks a lot dude, i owe you one. filezilla changed all my .jpg’s to .JPG’s. i’m an idiot, should have checked there first. you saved my bacon!
Irwin Says:
September 17th, 2009 at 5:15 pm
Hey Trent, Galleriffic is awesome. Fantastic job. I’m a beginner with jquery/js and I have a problem that hopefully you or someone else can answer.

Everything work perfectly but I want to allow the users to adjust the speed during play and I can’t seem to figure out how to target the “delay” variable. Eventually I would like to have a slider or something where the users can adjust the speed (might be good for Galleriffic 2.0).

This is what I have:

$(“#faster”).click(function() {
$(‘#gallery’).galleriffic(‘#thumbs’, {delay: 1000});
});
$(“#slower”).click(function() {
$(‘#gallery’).galleriffic(‘#thumbs’, {delay: 20000});
});

I know I’m probably doing this all wrong, but hopefully that’ll gives you an idea of what I’m trying to accomplish.
nihilator Says:
September 21st, 2009 at 1:30 am
will this work on a super beginner kind of web developer like me? Cuz i really don’t have any experience in jquery. All i know is HTML and i just want to have a super cool gallery like this but it doesn’t seem to make any sense cuz when i tried to follow the instructions, all i get is, actually nothing.

here’s what i do:

1. i downloaded query.galleriffic.js and put it on a relative path.

2. i put this on the header of my html:

3. and then this:

… graceful degrading list of thumbnails (specific format specified below) …

4. and then this:

(Any html can go here)

… (repeat for every image in the gallery)

of course i edited the source file of my image paths but it still doesn’t make any sense.
Ben Says:
September 21st, 2009 at 11:26 pm
I’m making a custom cms at the moment for swenflea.com and would love it so much if you could me make some sort of script so that I have say 3 divs on a page with a class of post. So down the bottom there will be a lis of all the pages like on you jquery plugin. Any help at all will be great.

P.S. If you know where another script that dose the same thing please tell me.
Bryan Says:
September 23rd, 2009 at 10:16 am
Trent, I echo the sentiment of how great this script is.

I want to also reiterate the question posed above by George about how to start the slide show at a particular image. I know that I can use anchors, but those are just a linear index. If I am on another page, and I click on a thumbnail or something, I want to be able to load the gallery and start at that specific image in the set (by passing into the page my own ID). Any chance of adding a class or something that could indicate an alternative starting point (say a “start” class assigned to the li)? The gallery would then start at that image and cycle around.
Trent Says:
September 23rd, 2009 at 10:38 am
@Bryan – Good news is that I am halfway through implementing a feature in the next release of Galleriffic that allows you to provide your own image ids in place of the auto-generated index. This is how it will work:
» Galleriffic will inspect each a.thumb html node for a name attribute
» If a value is present, Galleriffic then checks that is hasn’t already been used
» If the value passes the unique check, it is then used as the key for the image, otherwise an automatically generated index is assigned the image
I think having this feature should solve your problem. Sorry I can’t make any promises on the delivery date, but you can monitor the svn repository for the most up to date changes.
Michael Says:
September 23rd, 2009 at 4:14 pm
Very impressive work! Thank you for making this available.
As a newcomer to JQuery, I am having tremendous fun taking apart the code and learning what does what.

I was wondering how you enforce the height of the #page (the white container that is the master container for the entire Gallery) based on an offset of the caption from the picture as you have it in the Advanced live Demo? The version I have aligns the bottom edges of the caption and the image and setting it to absolute positions does nothing to enforce the page height. It would seem that this is being set directly in the .js file… Can you point me to the correct line?
John K Says:
September 24th, 2009 at 8:06 am
Hi, great album, however I have a problem. My photos come out fine in Firefox, Safari, Opera and Chrome, but, surprise surprise, not in IE8, they get cut off. An example is here http://www.moversandshifters.co.uk/index.html.

Any thought on this would be appreciated. This is the only album that does what I want.
Eric Says:
September 25th, 2009 at 12:01 pm
Trent,

let me say I find your Galleriffic the far best JQuery gallery implementation out there! It is also a wonderful replacement for Simpleview (which is Flash based, lacks customization options and has a ‘promo’ label on its free version).

You did a very good job in separating logic from presentation, so we can customize the Galleriffic view by changing html and css.

I’m using it with Drupal and Imagecache.

Greetings,
Eric
gurjeet dhoal Says:
September 26th, 2009 at 12:13 am
how can i put video into this gallery. i try but i did’t work
Matt Says:
September 28th, 2009 at 6:52 am
Hi.
I have been implementing the excellent Galleriffic into a website for a photographer friend who has very specific ideas on what he wants. I have been able to setup everything he wants, with the exception of the navigation aspect of the gallery.

He wants to have simple Up and Down arrows above and below the thumbnails (I have it setup as a single vertical column of 4 thumbs, and the full size pic to the left) that will jump down to the next or previous set of 4 thumbs – much like pressing the PREV or NEXT pagination links. Is there a way I can assign the PREV and NEXT links to an image to make this work?

Thank you for your help.
Rgds, Matt.
Louise Says:
September 28th, 2009 at 8:47 pm
I too am looking for a solution for the image size A Drew and Emily. Is there a way to dynamically size the full size image…I tried adjusting the size of the div which looks ok in Firefox but looks scrunched in IE7.

Hope you can help….that way, it would only require 1 image for both.

Thanks,
Louise

P.S. – EXCELLENT WORK!!