UPDATE: Version 1.0 is now available. Read about it here.
Galleriffic is a dynamic photo gallery optimized to handle a high volume of photos. I would love feedback on how to improve this plugin.
02/03/2009 Update: Released v 1.0
- Read up on 1.0 release in this post.
10/05/2008 Update: Released v 0.7
- Added support for multiple galleries per page
- New 0.7 jAlbum skin release
9/30/2008 Update: Released v 0.6
- Now supports graceful degradation (see example for updated instructions on how to set up your gallery)
- Added configuration option to specify the number of slides to preload in advance
9/25/2008 Update: Released v 0.5
- Replaced several lingering hardcoded titles and link text with settings values to allow for internationalization
- Updated the jAlbum skin
9/20/2008 Update: Released v 0.4
- Added support for onFadeOut and onFadeIn events (see example for how this can be used)
- Removed unnecessary iframe that is created when using IE
- Released a new jAlbum skin that makes creating static albums a breeze (View the demo)
9/17/2008 Update: Released v 0.3
- Implemented additional options for title and description element selectors
- To enable the ‘Download Link’, a link element selector is now needed
9/16/2008 Update: Released v 0.2
- Reworked image preloading to load a single image at a time
hey hey,
using that plugin for a little project. is ist possible to add some sort of loading image to it while the plugin preloads the images?
Hi Trent, great job on the gallery!
I second Marc’s request for a visual preloader.
My other concern is that my site won’t validate any longer because, as the W3C put it, “there is no attribute ‘description’”. Also, if I want to include a link, span, or multiple paragraphs in my description, I have to use html tags within the description’s value.
Is there any way that I could pull the images, titles and descriptions in from the Javascript file that contains my configuration options? Or perhaps it could pull that information from an xml file?
Thanks, Dustin
From Ghismo:
Nice work Ghismo. It is refreshing to have others come along and enhance the script on their own. I have been swamped with my regular job lately focusing on server side apps and haven’t got back around to working with Galleriffic or any other client javascript in a while. When I get some downtime, hopefully sooner than later, I’d like to incorporate some of the earlier enhancement requests along with Ghismos work to finally release v 1.0 of Galleriffic. So keep the ideas flowing and anyone up to extending Galleriffic on their own, by all means, please do so.
Ghismo figured this out, but if you have a link that you would like posted in your comments, you will need to email me (trent [at] twospy.com). Any comments with links will get spammed, and I do not have the time to filter through the roughly 1000 spam comments I get each month.
Thanks for relaying this info, and thanks again for sharing this very nice plugin.
I am designing a site to host multiple galleries using nothing but URL re-writes. One of the things that attracted me to Galleriffic was the history feature. However, it is this feature conflicts with my site.
My URLs go something like #/album/123/
And when you click on a Galleriffic image, it rewrites the URL to #14.
How plausible is it to modify Galleriffic to read/re-rewrite the URL hash to a #/album/123/14 format (where 123=album ID, 14=image ID)?
Trent–First off, I love the plugin; it’s very elegant.
Moving forward, it would be excellent if there were an option to pull in photosets directly from Flickr rather than requiring manual coding of gallery imagery. I began coding out such functionality–but quickly realized the thought required is well beyond my capabilities!
What I came up with works only on a fast internet connection–I could add in a longer delay, but I’m sure there’s a way to more accurately structure the code to remove any need for a delay altogether. See http://rfros.com/portfolio/flickr.php for my test page. Perhaps you will find it useful should you choose to pursue such an approach.
Thanks, Renata
Great looking script! I haven’t had a chance to try to implement yet, but was curious…is it possible for the thumbnails have a transition of some sort when navigating to the next set, rather than simply abruptly loading? Something like a simple fade in/out perhaps?
Thanks for all the hard work!
rvt
Hi Trent,
Do you know if someone has made a Wordpress Plugin of your great Gallery Plugin?
I haven’t seen a wordpress plugin for it yet. Do you want to take a stab at it?
Yes I want to and actually I am trying to
I am trying to make but I never made any plugin before … I read people trying to make plugin for it …
so, what about the visual preloader?
is it possible somehow? or is it possible to
load the first image immediately?
I tried it with the upcoming jquery-1.3b2.js without success. Only for your info.
Thanks for this nice plugin!
Brilliant Ghismo! I was just coming to the site to request that feature and saw your comment, implemented and it works like a charm. Now I just need to minify the JS and it’ll be good to go! Cheers mate.
This rawks. So does Gallerific Plus.
One thing: in Windows, there’s a refresh sound that’s on by default, and every time the image changes, so does the URL. This can get annoying (”click, click, click, click” as the gallery plays automatically)
Anyone have a solution for this? :-\
I received this bit of info from Sara Thornton in an email:
You are awesome,
thank you so much for this!
Does this support video and/or swf/flv playback?
Changing a[@rel="history"] to a[rel="history"] makes Gallerific and GallerificPlus working with jquery 1.3
Awesome plugin. And thank you, very much, haichen, for pointing out that fix!
Awesome plugin. I’m using it as a portfolio and I was wondering if there is a way to have the download link open a new window? I’m using it as a view website link.
Nathan- In your markup, you should be able to add the target=”_blank” attribute to your download link directly. The Galleriffic script only manipulates the ‘href’ attribute and no other part of the link.
Thanks for the quick reply.
I tried adding the target attribute to the item within the a tag and it is still opening in the same window. Any suggestions?
Nevermind. I figured it out. I feel dumb. I was adding it to the wrong tag. Thanks again! Do you offer any paid customization service? I have something far more complex that a client would like to do to the plugin.
Hi Trent,
I have just tried to create my second album and have noticed i have lost the “Download Original” link.
My other question is – How do i edit what camera information i want to show?
Love this template so your help is appreciated.
Thanks
Hey Trent,
Firstly this is a great script! Really loving the functionality and the level of customization it give the end user. Brilliant work. My friend!
Though, there appears to be problems with the plugin not working with the latest version of jQuery (jquery-1.3.min.js). I’m not sure if you are already aware of this issue, but I think at least the documentation should be updated to reflect this. As I had some problems when trying to get this working on my page today until I realized that the version of jQuery I was using was different to the one you’re using on your demonstration page.
Apart from that good work!
Regards,
Josh
hi trent! i’d like to know if is there a way to use just words instead of the thumbs. ya know… like list with images names. i’m not a programmer, so i tried doing changing the markup and css, but it seems to need some changes in javascript. Hope you help me! thanks.
Hi Josh,
read my previous comment from January 16.
Hi, can I change in code numbers of columns displayed for little images? For me was be nice 2 cols then defalt 3.
@gpessusqui – Right now it isn’t possible … but I have an idea which would allow this to work that I will try to get into the next release.
@Jirka – The number of columns is done purely with CSS by floating the thumbnails within a fixed width container. If you want less columns, you could either reduce the width of the thumbnails container or use larger sized thumbnails. Hope that helps.
@Nathan – Send me an email (trent [at] twospy.com) and we can discuss your customization needs.
@Evan – I am guessing you are referring to the jAlbum skin.
To enable the “Download Original” link, make sure that the “Enable Downlaod” checkbox is checked on the Galleriffic tab and that you have set the album to “Link to Originals via Scaled”.
Regarding camera information, at the moment it is all or nothing, otherwise you will need to edit the description attribute of the link tag on line 59 of the skin’s index.htt file.
Hope that helps.
Hey guys I’m trying to get this to work with safari but is running in to troubles when I’m trying to use this gallery inside an iframe. Anyone knows why this happens?
If anyone wants to reproduce this problem just create a blank html page with a iframe that points to the demo site of this gallery and open it up in safari. The gallery doesn’t work when doing this in Safari, but all Internet Explorer versions and FireFox works. Everything seems to load up but nothing happens when klicking on images and links.
Anyone knows what’s going on?
Hi Trent,
I have just come across your site. I was very impressed with how simple and straight forward you have made it to style the page. I was wondering if it is possible to add any image effects to your script?
Currently I am using Galleria to display a small gallery and I am happy with the results but getting there was difficult. This was mostly due to styling because the use of so many classes, siblings, etc. I dread having to make any changes and am somewhat discouraged to use it again. Would much rather use Gallerific but I would like to keep the original look I have achieved. I noticed that both scripts use jquery so it seems possible but I don’t know enough about coding to implement these effects.
Any ideas or help would be appreciated.
Thanks so much!
@Ann – You will need to edit lines 326 and 394 of the script, replacing the fadeOut and fadeIn functions with your desired effect. Hope that helps.
Hi Trent,
I have just had the opportunity to try Gallerific to replace Galleria. I am feeling like an idiot because I can’t get Gallerific working. Is there any more detailed documentation? I have checked out the demo examples source and the main instructions but I am still stuck. I don’t know js so I’m not sure if that is the problem or not.
Thanks
Hi:
This is great…it has a description of the photo and it fades elegantly. Wonderful!!
I’d love to see the thumbnails displayed underneath the main photo, and ideally, they would be displayed with the carousel ajax/js type functionality, so the thumbnails would scroll to the right and left until you find the image you want, at which point clicking the thumbnail would generate the same elegant functionality you have in place now.
That type of gallery using a lightweight JS is the holy grail of gallery solutions IMO and I’ve yet to find a decent solution that has all those elements (main photo, scrolling carousel beneath, photo description).
- Stephen
Hi Trent!
I have a question about defining a custom variable with Gallerific.
I’m using this gallery in a site that requires a which causes problems with the gallerific script. I need to define a custom directory for each gallery. Right now I get mysite.com/#3 when in fact I need mysite.com/customdir/#3 for the image links to work in the gallery. Make sense?
To solve this I added a default variable like so in the Gallerific js file:
var defaults = {
galleryLink: ‘custom directory here’,
etc etc etc
I then changed the proper areas in the script with galleryLink so the correct url was generated. This worked fine so I thought I could set this custom directory in my actual template just as you can define numThumbs, delay, etc.
example:
$(document).ready(function() {
var gallery = $(’#gallery’).galleriffic(’#navigation’, {
delay: 3000,
galleryLink: ’st/gallery/1232945851/#’
numThumbs: 40
});
});
All the other variables work fine being set in my template but I can’t get my custom directory. I’m just learning scripting right now so any help is appreciated.
Thanks in advance for any help!
-Tristan
Hi Trent, this looks really amazing. I was searching for some time for a jQuery gallery comparable to SmoothGallery (which only runs on Mootools and I’n in the process of turning to jQuery) and yours is great. Is there an option to auto-play? I can’t seem to find it. Also is there a way to or will it be implemented ever to programatically switch off certain areas like for instance hide thumbs by setting, for instance, showThumbs: false in JS. Because right now, if I understand correctly, we have to omit the desired DIV’s in HTML..
@Tristan- You’re on the right track. After doing what you’ve done already, you should be able to access the gallerylink value through the settings object like such:
1) Within the scope of the plugin itself: this.settings.galleryLink
2) Outside the plugin: gallery.settings.galleryLink
Watch out for small typos … I see in your example above that you are missing a comma after the “galleryLink: ’st/gallery/1232945851/#’” setting.
@Marko- You can accomplish autoplay at the moment by calling the play() function on the gallery just after initializing it at such:
Regarding showing and hiding different sections, if you do not want to omit them altogether, you could use css and javascript to change their display state. If you look at the Galleriffic example, I am doing something similar. At the top of the Galleriffic script, you will see the following line:
With this approach, you can add the “noscript” class to any element that you want to hide when javascript is enabled in the user’s browser. If javascript is disabled, the style is not written to the document, and these elements will now be visible.
I hope I didn’t completely misunderstand your question.
Hi Trent,
Thanks for the quick reply! Works like a charm now
Tristan
Hey Trent,
I am wondering how I might go about adding a caption to the thumbnail images? Is that possible with your script? I have tried simply adding ‘ Text here’ after the anchor and image tags but it seems to be getting chopped by the script? Any help would be greatly appreciated!
Hi Trent,
good job!
I was just wondering how don’t show the picture when the picture get loads and show it just when the user click on the thumb.
Thanks in advance for your help.
@Michele – Scott was able to do something similar to what you are asking … Check out what he did here: http://www.twospy.com/2008/09/15/galleriffic-jquery-plugin#comment-495
is there a complete download link with the entire working example? the instructions pretty much say look at the source but the usage section on the page shows containers… do those auto fill or is that just there as a placeholder. also as for style, do you have something to work off of? I’m just use to working off example files when downloading programs.
Hi,
I really like your Galleriffic skin for Jalbum!
I would like to see the number of thumbnails per page on the Gallerific tab replaced by the Thumbnail Layout on the General tab in Jalbum. This uses columns and rows and is consistent with Jalbum as your skin combines the index and slide page into 1 elegant page.
This would provide more flexibility for us users.
If this is something that I could do myself I would but alas I have looked through your code but didn’t spot a way to do this.
Jalbum Template file variables
cols = Number of image columns on index pages
rows = Max number of image rows on index pages
thanks
First, let me say, awesome plugin!
I’ve got it loading up in a thickbox, and it is sweet. As someone else noted, in slideshow mode, IE makes a persistant clicking noise. If I then exit the thickbox without pausing the slideshow, IE keeps clicking away. How do I tell galleriffic to stop the slideshow (or unbind)? That way I may be able to add that into tb_remove().
Thanks!
@Dan – just call the pause() function on the galleriffic object.
do i have to create the thumbnails myself? I have images that are different sizes but i’d like to make a perfect 75×75 thumbnail for each image.