Galleriffic JQuery Plugin
This blog post has been relocated here. I have decided to move this post off my personal blog and onto my new technical blog located here. Please leave your comments at the new location going forward.
Checkout my first jQuery plugin: Galleriffic.
Galleriffic is a dynamic photo gallery optimized to handle a high volume of photos. I would love feedback on how to improve this plugin.
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
15 Sep 2008 Trent
I love this Plugin :) Thank You!
Nice plugin bro! I used a lil php trickery to build out the data object array dynamically so there is no need add them dynamically (with the exception of the title and the description). Will work on a script to grab from a MySQL DB for title and description. For more info on how, contact thru my website: http://www.subprint.com
Sweeeeeeeeeeeeeeet! I’ll check back often to see if any recommendations were implemented. Thanks a million!
Joe,
You’ve got the right idea. I developed the plugin to be easy to integrate with whichever server side backend you are using, whether it be php, asp.net, ruby, etc. I am also about to whip together a jAlbum skin that wraps this plugin to use on this site to replace the existing photo galleries.
Thanks for the feedback!
Trent
Hello, I’ve been searching for a jquery or mootools or prototype/scriptaculous gallery for 3 days, and i think the one you designed is the best. I think I’ll use it on a photographer portefolio website. I’ll let you Know, thanks a lot !
Hey, great work on your jQuery plugin. Only thing I believe is missing is a return false; on navigation, so the webpage doesn’t go to #.
Hey Trent,
So far the gallery is working great. Wrote the php to create the thumbs for thumbs directory and dynamically generate the data object array. I’m torn between creating an xml file for the title and descriptions (as the php only currently grabs the contents of the slides, original, and thumbs directories which are the images themselves) or should I just convert the whole thing to pull from a MySQL DB where I enter all the data manually for each pic and it is built on the fly…What do you think?
Joe
http://www.subprint.com
Joe-
If you do not need to show titles and descriptions, then you can skip it altogether by just constructing the data object with the ‘slide’, ‘thumb’, and ‘original’ properties. And if you do not need a Download Link, then you can even skip the ‘original’ property.
I updated the plugin earlier today to be a little more flexible by having each feature be optional. Essentially, to enable a feature, you configure the selector for that feature using the plugin settings. If the selector (i.e. Title Container or Description Container) is not set, then it gets ignored.
If titles and descriptions are important to you, besides using a database, you could try generating your titles and descriptions by accessing your images EXIF metadata. Check out: http://us2.php.net/exif_read_data
Thanks again for the feedback and I look forward to seeing what you come up with.
Trent
Lunks-
I actually am attaching a click event handler to all navigation links (thumbnails, next, previous links, etc) and returning false. I will see what I can do about the page scrolling (which I am assuming is the issue you are seeing). The links are by design manipulating the page url using the ‘#’ so that each image is bookmark-able.
Trent,
Whats up man. Nice plugin. I just logged into AIM since college and saw all these id’s I had long forgotton. Anyway, went to your(this) site and thought I would say hello! I was on the senior design project team with you. Anyway, glad you are doing well. I am currently in Williamsburg, VA, but will be going back overseas next summer (spent the entire time since graduation overseas for the stinkin’ fed gov). Anyway, take care and congrats on the marriage!!
Later bro,
Josh
…forgottEn…I guess I didn’t learn much in school. :)
I just released a jAlbum skin that wraps this plugin. It should ease the process of creating static albums.
Bonjour (hi)
Ce plugin est une merveille, (beautifull).
Toutes les fonctions attendues pour une galerie de photo sont présentes. Et en plus j’ai réussi facilement (easy) à le mettre en place (je ne suis pas toujours doué)
Alors un grand merci, (thanks)
ce plugin sera installé sur la release de mon site, avec toute la publicité voulue.
Bravo (?)
Nice plugin! Thank You.
Plese help me. How can i get params of current image? I want to use it on $.post and get image comments on php
Hi…I’ve just tried your jalbum skin and ran into a few problems. It doesn’t seem to show a second index page-it’s there, but no way to get to it. Appears I’m limited to 15 thumb nails. Looks like it could be a nice skin though. If you could also publish a true sample album, that would also be a big help. Thanks…Al
Thanks for the wonderful plugin – really love it.
Just dropping this one in your lap: the title Attributes for “previous” and “play” links are hardcoded into the JS File, so if you’re implementing a different language, update the code on lines 72 & 79.
K2,
You can get to the current image data that the gallery is aware of like this:
gallery.data[gallery.currentIndex]
Hope that helps.
Al,
Make sure that you ignore the rows and columns values in your settings and that the product (multiply them together) of those values is more than the number of photos you working with for the entire album. You can the configure the number of thumbs per page on the Galleriffic tab of the settings. Hope that helps. I’d love to see your resulting album.
Click here to check out one of my albums using this skin with a modified css stylesheet to match this site.
Anna- Thanks for catching the hardcoded titles. I’ve updated the plugin to correct this in v.0.5.
Great plugin! One suggestion: provide failover for browsers that don’t support javascript support… like some mobile browsers. It’s frustrating but necessary to code for this condition.
Nick- You and several others have asked for this. I am open to ideas on how to best accomplish this, but let me first explain that the purpose of this plugin is to deliver a highly-performant photo gallery. To accomplish this, I designed it to:
1) Load all images after the DOM is ready – this is to avoid having to wait for all the images to load before being able to use the gallery (which is how many gallery scripts out there currently work)
2) In the background after the gallery is usable, perform image preloading of the rest of the images in the gallery in a smart way – this is so that you don’t have to wait for each image to load on demand (also how many other galleries behave)
My first recommendation would be to simply include a link within the noscript tags that takes you to a completely different page to display the images without javascript. This would prevent the image load overhead for the majority of the users with javascript enabled. This also gives robots a link to follow to a page where the images can be indexed. For the small minority without javascript, they will need to make one extra click. I can accept that.
This is the first thing I can think to do to maintain the gallery’s goal of achieving optimal performance. I’d love to hear more ideas.
Very nice plugin, I like it.
Just a suggestion: keyboard navigation :) (optional of course)
So with some ideas from Carl, I changed how the gallery is setup so that it will support graceful degradation. See the updated documentation for instructions on how to set up your gallery in this new manner.
I also changed up how the image preloading behaves. There is now a new configuration option “preloadAhead” to specify the number of slides to preload in advance relative to the currently displayed slide. This is useful for hosting environments where bandwidth is limited or for very large galleries to prevent unnecessary loading of images that may never be viewed.
Again, thanks for everyone’s feedback.
Hey Trent
this is a great plugin! Thank you for your hard work and for making it available to others.
I would like to add the jquery lightbox function to the main image when you click on it. How can I remove the function that moves to the next image when you click on the main photo?
Many thanks
Matt
Matt-
Inside the buildImage function definition of the plugin, find the following line of code:
// Setup image
this.$imageContainer
.append('')
.find('a')
.append(image)
.click(function() { clickHandler(gallery); })
.end()
.fadeIn('fast');
You will need to do two things:
1. Remove the href attribute from the hyperlink generated by the above code
2. Replace the click handler above with a delegate function of your own for launching the lightbox
Hope this helps.
thanks Trent..
the link has been removed, I’m having real trouble trying to get the lightbox to work. I’m using the jquery lightbox plugin but not too sure how to get the functions within that file working in your js file for the gallery.
Also, is it possible to have more than one instance of your gallery one one page?
I’ve tried it, and it doesn’t seem to work, even when renaming the id’s of the div elements.
Many thanks
M
Hi Trent…just tried Jalbum (8.1b3) with Galleriffic .6. If I select “Link to Scaled Down Images Only” (no originals copied), it’s throwing a error:
Evaluation error on line 1:
Details:
Sourced file: inline evaluation of: “ originalPath.replace(“\”", “\\\”") ;” : Attempt to resolve method: replace() on undefined variable or class name: originalPath
Maybe it’s just me, but thought I’d pass it along. I also made sample album earlier at http://mrag.jalbum.net/Galleriffic_Test/
I think an “if exists” test (flash?) might be good in case there are images without EXIF (the situation in some images in my sample).
Really like the skin and Galleriffic. Thanks…Al
Matt, I haven’t tried multiple albums on a single page. I would think it would work though, you just need to make sure you call the galleriffic init function on different elements, for example:
$(‘#gallery1′).galleriffic.init(…);
$(‘#gallery2′).galleriffic.init(…);
where #gallery1 and #gallery2 are the IDs of two different DOM elements.
Regarding the lightbox … I’m not sure how much help I can be without seeing your script. Feel free to email it to: trent [at] twospy.com and I’ll check it out when I get a chance.
Al, Thanks for the heads up on the bug. It should now be resolved in the 0.6.1 skin release along with a config setting to enable/disable showing EXIF metadata.
Thanks Trent
Have emailed you the source code.
I’m having a really slow day today (brain-wise) so please forgive the stupid questions..
I added the second init for the gallery, but not sure how to reference the second div element.
The standard gallery init uses the gallery var, which I cannot see in the HTML code. The DIV tags are content, controls, slideshow and navigation. Where does the gallery DOM element come from?
When I try and init two instance on the same page, the second (latest) gallery works fine. The first gallery shows the controls and the thumbnails but no main image.
Many many thanks
I’m having the same problem as Matt. I’m trying to build up more than one gallery in the same html/php file and already tried renaming the ids (not just the main container, I tried renaming slideshow img container and navigation ul container also).
Still no luck at all.
Project where I’m trying to implement gallerific is here, In case you need to take a look ( http://creacionuno.com.ar/web_new/web.php )
If I get to make It work you’ll be the first one to know :)
Thanks
PS: Great JS Scripting *hats off*
pls help me
http://jalbum.net/forum/thread.jspa?messageID=176374#176374
thanks
Matt & Fak, I just released version 0.7 of the plugin which now supports multple galleries on a page. Check out the multiple gallery demo.
To everyone- Notice that you now call galleriffic directly instead of calling galleriffic.init. Make sure you change your code when you upgrade to version 0.7 or later.
Hello Trent
This is a great looking Gallery, but I’m having trouble incorporating it into the Album module for CMS Made Simple http://www.cmsmadesimple.org/.
You can see how far I’ve gotten http://multiintech.com/galleries/testing-new-gallery.html
It seems to make the links for images as #1, #2, etc. and this just sends it to the home page, and as you can see it doesn’t set an image in the main box, I have know idea how to change JS w/o instructions and any help would be appreciated, thanks in advance.
mark-
I took a look at your gallery. The links you are using for each thumbnail is something like “http://multiintech.com/index.php?mact=Album,m4,default,1&m4albumid=18&m4pictureid=239&m4returnid=133&page=133″ which is not a url of an image. These links should refer to the src path for the slide(main) image. Hope that helps.
Thanks Trent
That was it ;)
When I look at the source I see a warning:
Warning: <a> proprietary attribute “description”
The tag contains an attribute that is proprietary to Netscape or Internet Explorer.</a>
Hmm, I don’t think we’ll need to worry about the description and original attributes. If this is actually causing a problem somewhere, please let me know. I could try changing “description” to “desc” if “description” has an alternate meaning to those browsers. Anyway, the only time these attributes will actually ever be a part of the DOM is when javascript is not enabled. So this is the case we will need to test for.
Hey Trent,
Sorry it took so long to get back with you but saw this link on the homepage of delicious.com and figured I’d come back.
Perfect that you updated the plugin to have the option of those parameters. Makes it set for exactly what I need. I will link you to the production site that I plan on using it on when I gets live.
Cheers!
Joe
subPrint.com
As far as the “original” and “description” attributes go, I would advise you find a way different way to incorporate them (though if I understand you, they are not actually used by your script but merely part of a fallback if js is disabled).
The problem is that non-standard markup like this (“description” and “original” are not part of the HTML specification) will cause a web page that uses it to fail validation, which could in some instances trigger a browser to render the page in quirks mode, and is in general just not a great practice.
Maybe you could think of another attribute to use, e.g. move the description into a title attribute in img? Just a suggestion.
Nice work otherwise on this plugin btw!
Trent,
New plugin rocks! Check the url if you wanna see how it came out. http://creacionuno.com.ar/web_new/web.php
It’s like a 3 level navigation in just 1 file.
Once again, thank you very much for your effort in making this jQ plugin, really rocks!
Cheer!
Trent,
this is fantastic! Thank you for updating the plugin for multiple galleries and for all of your hard work.
One question – it appears as though the app doesn’t create and resize the thumbnails automatically anymore.. is this correct?
Sorry, ignore the last message about the thumbs.. I’m being stupid due to lack of sleep (ah, the joys of being a developer!)
Does anyone know how I can integrate the gallery and use the jQuery Lightbox plugin for the image?
I want to open the Lightbox when the main image is clicked, whereas at the moment it scrolls to the next image in the list.
Many thanks,
Matt
Lightbox issue resolved… I have a working version :D
Can the image data still be passed in using the data variable, or do they all have to be hardcoded into the HTML list?
I’d love to see how you integrated the lightbox.
You should be able to pass a data array still, but it is prefered to use the new method for accessibility.
I’m using facebox and would like to do the same thing you have acheived Matt, some insight on how you achieved it would be great.
Also I would like to be able to control the delay of the slideshow, play, option. Trent is there a method for doing this already?
All the best,
Jay
Jason- Use the ‘delay’ option to set the number of milliseconds to wait between slides.
Hi guys
I’m still finalising the code with integrated lightbox, but will aim to have something posted to you within the week. Trent, would you be happy for me to do this?
Matt- Absolutely. I am thrilled to have others want to use the plugin and even more, improve it. Let me know if you would like me to host it for you.
Excellent, thank you!
There wouldn’t be a plugin to work on or use if it weren’t for you, so the thanks all go to you mate. :)
Now that I have you here, I have one small snag. Can you email me, and I’ll send you the details.
I’m sure you’ll have no problem resolving it.
Cheers
I have to stop posting in a panic and before I’ve had coffee!! Problem (once again) resolved. All working as it should.
I’ll get a finished version sorted by (hopefully) next week and share the scripting love.
Sorry about the many comments everyone. :)
Love the gallery – but I don’t know what I am doing wrong, I can’t get it to work. I downloaded the files, created a simple css to go with it, but the thumbs don’t load into any type of gallery (they just load down the page) and once clicked they load into a new page. I’ve tried it on Firefox and Safari but had no joy. What should I be doing?
Hi
I had a question , it’s my page don’t have” Download Original ”
, and I had check the ” Enable download ” box, can you help me to know how to setup ?
thanks!!
tw- It sounds like the script isn’t initializimg. If you could point me to where you are hosting it, I can try to tell you what exactly you might be missing.
kerr, Make sure you select ‘Copy Originals’ and possibly ‘Link to Originals via Scaled’ options. I forget the exact combination, but the Galleriffic defaults should work.
Hello~Trent
thank you for your reply , but I check and download again skin , still can’t , I use jalbum v8.0 , the verion is ok ?
thanks^^
Hi!
I’ve detected that the topPager’s container is always appending even when you put enableTopPager to false. You have to exchange lines 442 and 443 of your Javascript code like in rebuilding bottom pager
Thanks for your plugin. Congratulations.
I’m feeling dumb, but I’m just not getting the documentation. Or maybe I don’t get what the plugin does for you vs. what you have to do for yourself.
I’m assuming (hoping) that the plugin creates thumbs and screen display versions from a hi-res original. True?
What HTML does one actually use? The docs say to create HTML containers with ids in curly braces like this:
I can’t figure out where I’m supposed to use the curly braces (if at all) and where I’m supposed to use literal id names and literal image paths. Obviously, there has to be at least one literal image path per image in the thumbnail container, but where is it used?
Could somebody please post a real-world HTML code example? Thanks.
(In my post above, the div tag with the variable expression in curly braces inside it didn’t come out, but you know what I mean, I hope.)
Hi Trent
I have released the primary working version of the extended plugin, now featuring lightbox functions.
GallerificPlus
Everyone and anyone can now download the plugin from:
http://www.mattgifford.co.uk/projects/gallerificPlus/
Once again, thank you for all of your help and support, and for creating this awesome plugin in the first place.
great work. but user cannot allowed to go previous page using back button.
Hi this is just what i have been looking for:
I was wondering is there a way of having the slideshow start automatically?
thanks
sorry for hasseling but i was wondering if there was also a way of having it play where when the user clicks back on their browser and it goes to the previous page and not the previous photo?
I think this is what parcacik is refering to also?
cheers
Really nice work! An option for transition (zoom, fade, slide, etc) would be good.
To make the slide show start automatically, call the play() method after initializing the gallery like such:
gallery.play();
var gallery = $('#gallery').galleriffic('#thumbs-container', settings).play();
Thanks Trent, really nice gallery by the way.
Hello trent, i’m very interested with this plugin, very nice…;)
But, i have a little problem, how can i change the play, previous and next button with an image?…
So it isn’t use text only…
Anybody can find out this?…
thx, before.
dinivian-
You should be able to style the Prev, Next, and Play/Pause links using CSS and the background-image style. Hope that helps.
GREAT plugin!
I’m putting together a new site for myself (artist). This does much of what I’d started to put together – but you’d already done the work and very nicely. Thank you.
The only significant edit/hack I’ve made so far is to have clicking on the main image open up a larger version of it rather than navigating to the next image. While clicking on the image is easy, having it not open a larger view is, IMO, a little counter intuitive.
My dream is to be able to have a block of text display where the large is when the gallery first loads.
FWIW,
http://www.conary.org/work
This is an Expression Engine site with the thumbnails generated with phpThumb from a list of entries. It is, of course, a work in progress.
Nice Plugin :) thanks for this great work.
An additional feature for a future release could be to
integrate a lightbox function in it. So, when clicking on
the larger image a light-/thickbox opens to see it in
“full size”.
cheers
Florian
Scott and Florian- You should check out Matt’s GallerifficPlus. He extended Galleriffic to do just what you guys are talking about.
Trent
Thank you.
Any guess as to how you’d go about having a gallery start with a clump of text instead of an image? I can see the code where it sets the image from the URL, history, or to the first image if neither is specified. I’d grab a clump of text from a div if there was nothing in the URL or history, rather than setting the image index to zero. But then… hmmm…thinking out loud…
Any interest in making a couple dollars or bartering or… ? :)
My time to do this has just about evaporated.
Scott- You could add whatever content you like inside the image container (imageContainerSel) statically in the pages html. In my example, that would be the following element:
<div id="slideshow" class="slideshow"></div>
// Build image
var hash = getHash();
var hashGallery = (hash >= 0) ? getGallery(hash) : 0;
var gotoIndex = (hashGallery && this == hashGallery) ? (hash-this.offset) : 0;
this.goto(gotoIndex);
Thank you for your assistance.
Commenting out that portion of it breaks the script.
Thank you for this nice plugin.
When I load a page where there’s no gallery, I get this error: imageData has no properties
I fixed it by adding on lines 207 and 326:
if (! imageData) return;
Trent,
I added a conditional check to see if getHash() == -1 in a few spots and had the script either skip a step if it did or reset a variable (for the slideshow). Now the opening text displays until someone selects an image or starts the slideshow.
http://www.conary.org/work
Not yet done, but a little closer.
Hello.
Very good galerty ;) I used is in my project.
but i saw this galery didn’t work in Opera 9.5.
I hope yor fix this bag.
Thank’s
What’s the chances of making it work in IE6?
I’ve minimally tested it in IE6, and it appears to work. What exactly are the issues you are having?
Hi, nice work, but i have one question – how i can upload images exept editing html for each image?
hello.
today i fix some bags with Opera 9.5.
There is a modifer script
http://x-prom.net/jquery.galleriffic.js
p.s.
nice script ;)
Thanks for the plugin, works great!
Started my developer page: http://www.webfixtech.com/developers.php.
All credits to you, I just did a bit of styling around.
Hi there!
This gallery is just awesome! Setting it up as well as modifying is very easy!
And finally it works in every browser, also including Internet Explorer 6 or Opera 9.6!
So thanks for that fantastic script!
Cheers!
Thanks great work !
Is there a simple way to get rid of the history if the user hit the back button ?
thanks again
Great work!
It’s guys like you that make the internet world go round.
I found your plugin easy to understand and implement. I am generating the code server side with PHP. –works like a charm.
Just one suggestion (or question): It would be nice to have status indicators for the photos that take a little longer to load. Example: sometimes when I click on a thumbnail the main image will not display immediately. This is due to a slower connection – not because of an over sized image.
Is it possible to just have a clickable image rather than the thumbnails too? Or Do the thumbnails play an integral part of the functionality?
Thanks. Love this thing!
Great work!
I consider including your plugin into a website, so I was wondering if there was any licence attached to it?
Thanx for sharing!
I am licensing it under the MIT license. Feel free to use as you wish, just leave my name at the top of the javascript plugin file.
anybody? sorry I’m a noob…..
Is it possible to just have a clickable image rather than the thumbnails too?
Hello,
I loved it. One more suggestion — is to built in category or folder section. (in case if you have several things that you want to present)
Otherwise, thank you.
Alexander
Is there an easy way to turn off the thumbnails and just have the slideshow portion?
Trent,
I’ve been playing around with your very nice script. I’m trying to get your script to accept an image dynamically after being uploaded by the AjaxMultiFileUpload jquery plugin. Once an image is uploaded I want to dynamically add it to the thumbsContainer and have it appear in the slideshow. I’ve tried a number of ways of doing it. I can get the thunbnail to appear in the thumbnail list but I can’t get it to appear in the slideshow and the onClick handler is not being attached to the thumbnail.
Do you have any ideas for me to explore?
Thanks!
Hello and thank you for this nice plugin. I have a question: is it possible to set the speed of the fade in/out, and also, i would like to know how it would be possible to have no fade at all… !
Thanks a lot.
In Safari, due to changing the location.href, if you are at the bottom of the page, it will jump up to the top when the next picture shows.
Any way around this?
tigrou- Both are possible with a little hacking around the script. The fade in and out are currently simply a single jquery method call (‘fadeIn’, ‘fadeOut’). If you change these to ‘show()’ and ‘hide()’, you will get your desired effect. Also, you can set the speed of the fade as an argument to the fadeIn and fadeOut methods. I am currently slammed with work and haven’t had much time to make enhancements to the script, so I hope digging around in the script will work for you for now. One day when my schedule opens up again, I will incorporate more configuration options such as this into the script.
RRV – This could be a little bit tricky. There are several things you would have to do. You would need to update several variables: galleryOffset, numPages. You will also need to build an image data object and add it to the ‘data’ array (see the ‘buildDataFromThumbs’ method as a reference for how to do this). That should get you started.
David and Erik – This is possible. To do this, you will need to build an array of imageData objects (see the ‘buildDataFromThumbs’ method as a reference) and pass this array instead of the ‘thumbsContainer’ selector as the first argument of the galleriffic function. Hope that helps. This is actually how Galleriffic previously behaved. I changed it so that the preferred method is to pass the selector of the thumbsContainer in order to support accessibility requirements. The script is still backwards compatible though with the original method. Hope this helps.
Trent,
Great script! Thanks!
I’m trying to integrate it into a WordPress plugin at the moment – I’ll let you know how I get on.
As for feature requests, a rollover effect on the thumbs would be nice (opacity fade type of thing). Just a thought.
Keep up the good work.
Ade.
Hi
Great Plugin ! Thanks you !
Maybe you can use metadata plugin to make your plugin pass the x-html strict DTD validation.
What do you think about that?
Yoh
Thanks man!
Hi Trent,
your work is fantastic!
I’ve a question: I want to use only the navigation thumb of your galleriffic, that lunch straight large images in lightbox; how can i do this? can you help me, please?
tanks!
this is exactly what i needed for my site. thank you
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? :-\
Nice Plugin ! Thanks you !
This looks like an amazing gallery! Could someone please create a WordPress plugin for it?
Thanks
gr
maybe what i have is an old version, butthe image links arent all in a big lump, they are all specified in some js that I can link as an external file, and i much prefer that — am i making sense? anywhere I can find this version again? Id like to use THAT to do mulitipul galleries on a page
Hi Does this gallery have an auto play, so when the page loads the gallery starts to play?
If so how do i get this to work?
Hi Trent,
Thanks for this wonderful plug-in. It is really cool. I have a question tho……..is it possible that I could switch things around, such as putting the thumbs underneath the main image, and putting the description right next to the main image? Thanks in advance of the help.
^_^ Julie
Thanks a lot!
This plugin help me in a job.
I’ve only a problem:
Using facebox plugin (seems lightbox), when i call the file with Galleriffic using ajax request, at every request in same gallery the anchors “#” are added.
Eg.
First call: (5 images) #0(1º link), #1(2º link) … #4(5º link).
Second call: (5 images) #5(1º link), #6(2º link) … #9(5º link).
How preserve ever the same effect of the first call.
I want to define a default image when a other thumb out of Galleriffic is clicked using:
eg.
window.location.href = ‘#2′;
I don’t want hack the plugin.
Thank you, sorry my horrible english.
Hi Trent, what a fantastic gallery! I’m working on implementing Galleriffic on my portfolio site.
My one concern is that my site won’t validate any longer because, as the W3C put it, “there is no attribute ‘description’”. Is there any way that I could pull the images, titles and descriptions in from the Javascript file that contains my configuration options? It sounds like that’s the way you originally set it up, but you changed it for accessibility reasons. I’m covered as far as accessibility goes. If Javascript is turned off, my site will still function perfectly well, and I don’t need the thumbs container for my non-Javascript version of the site.
Any help would be greatly appreciated. I posted my Galleriffic implementation at http://www.dustinyerks.com/galleriffic/worklogos.html
Thanks, Dustin
This is a fantastic plugin. I like the way it displays gallery and the preload function. I’m trying to modify slightly the style to adapt it to my site (in progress).
I’m also trying to use the jquery.innerfade plugin to replace the FadeIn-FadeOut with a Cross-Fade function, but I think I’m not skilled enough.
Any suggestion?
This is great, thanks for the work. This is probably something easy that I’m not getting, but how would you limit the thumbnails to two columns? Is this something in the css or in the jquery.galleriffic.js file?
Brian, just reduce the width of the navigation div to something smaller than the space taken by 3 rows of thunbs. You’ll find this setting in the html file. It’s a script in the head, 300px is the default value you’ll find.
edit: i meant 3 columns of course
Nice work! Speedy and pleasant to the eye. A few suggestions on first sight: introduce an optional parameter to stop playback at the end of the slideshow, a lightbox plugin/integration would be very nice.
What about a graceful degradation on thumbs – hover – activated… (have a look on Galleria) ? Would be a nice effect in my opinion.
This blog post has been relocated here. I have decided to move this post off my personal blog and onto my new technical blog located here. Please leave your comments at the new location going forward.