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.
Hi,
I’ve decided to release a bit of code that could help some people integrate Galleriffic/Wordpress/NextGen Gallery.
http://blog.mondayinthesun.com.au/2010/07/integrating-gallerifficnextgen-to.html
Good luck,
Francois
An excellent skin.
I used it with Jalbum to create picture galleries of Rodos and Symi islands, with links to DeepZoom images:
http://www.aridolan.com/deepzoom/symi.aspx
http://www.aridolan.com/deepzoom/rodos.aspx
DeepZoom is a technology for viewing and manipulating very large pictures (as done in Google Earth).
My question:
In chrome, in the case of symi.aspx, which containse many pictures, only three thumbnails are shown properly while the others flow vertically and loose the text data. The problem does not exist with rodos.aspx which uses fewer pictures, nor in Firefox and IE browsers. Any solution?
Thanks,
Ariel
Hi, I may be just missing something, but I’m not having any luck finding docs on the API. I’m trying to add a custom set of Next Image/Previous Image buttons, and I’m having no luck at all. Any thoughts?
how can I limit my thumbnail row to only show 4 images per page?
I would also like to disable the “play slideshow” option…
any tips would be greatly appreciated.
many thanks!!
Hello. I can give a pause of 3 seconds and after a fadeout of images?
Hi,
I am really impressed with your work. I jsut Want to know that if these slideshows are free for commercial use?
Hi,
It’s nice plug-in. When I tried to keep the aspect ratio for the thumbnails. The thumbnails don’t align nicely on left side. Is there anyway to configure it?
Hello,
I am trying to get the number 5 example to work, but I am having trouble. I am using modx as my CMS. I can get the number 1 to work great, but when I move to the others the images never show up. I want to tap into example five for the detail information to show up with the images… van anyone help?
Thank you
Jeff
First off, this is a fantastic script and through trial and error I have it doing almost exactly what i want.
http://www.sugartart.ca/Portfolios/packaging.html
BUT, the images scroll through the thumbnails from right to left, rather than left to right as the demo does. I played around so much with it that I am not sure what i broke. Any clue what prompts the next image to move R-L ??
Thanks
I am looking to have the image captions flush left under each image.
I want the titles to “attach” to each image, adjusting position depending on the size of image.
Any feedback would be greatly appreciated!
When downloading galleriffic-2.0.zip I get “archive is either in unknown format or damaged”. I am using Winrar 3.93 can anyone help me?
Hi Thanks for the slideshow code. It looks great.
I have one problem. When I replace the image urls with my own, those images are not showing in thumbnail size. They are showing full images. which spoils layout.
Can anyone please tell me how to get the thumbnail size look for my own images?
Thanks,
Raj
Raj – you asked about thumbnail size. You can play around with the sizes, but I used 80px. Not sure which script you are using, but the sizing can be set in the galleriffic – X.css for whichever one you are using. EXAMPLE – in galleriffic-5.css, fin the css for ul.thumbs.li and add the following:
height:80px;
width:80px;
overflow:hidden;
Then, in the ul.thumbs img set the following:
width:80px;
Hope this helps!
Torian
Raj – addendum – seems you are using your own full-blown images instead of thumbnails – so am I, and I’m working on getting the images from a database and putting them in an asp.net listview. Doing well with this so far.
I said to find the css for ul.thumbs.li – but I meant find the css for ul.thumbs li (no period between thumbs and li.
HTH – Torian
Torian, any tips on attaching the captions flush left under the image? Thank you!
I too would like to know about the possibility of attaching the caption to the image. Right now, some of my images are much shorter than others and that leaves a big space between the bottom of the image and the caption.
Michael/Lorri –
Since I am using example 5, I don’t know much about what you’re asking, because I’m not sure which example you’re working from.
Bear in mind that the divs often align side by side. If you want to ‘push’ one div under the other (i.e. the Caption/Title), you’d need to know enough css to align the divs below one another. I’m not a css person, and I’m struggling, too – just happened to have found the answer I think Raj was looking for!
Another thought is to post under ‘issues’ in the issues forum and request an enhancement. Sometimes, they provide the explanation for you right there.
Go back to the main Galleriffic page and find the link for ‘post an issue’. Be sure to make your type of issue ‘enhancement request’ instead of ‘issue.’
HTH – Tory
What about the white pixels in the absolute dark areas?? Any clue to solve this problem in IE??
http://www.destacados.cl/fficha_carmeister4.asp?COD=115468
Open with IE … picture 6 got the most white pixel area
Thanks!
masterbip and others -
There are a lot of answers to the issues you inquire about on the actual issues list for the project.
The main open issues list is here:
http://code.google.com/p/galleriffic/issues/list
The answer to masterbip’s issue is under issue 49 here
http://code.google.com/p/galleriffic/issues/detail?id=49
HTH – Tory
masterbip –
There has already been an answer for this issue – which appears to be an IE issue.
Go to the front page of the galleriffic site and check the ISSUES LOG for your issue. Answer is there under Issue 49.
I answered this earlier with the exact link but apparently it was removed, without any explanation as to WHY. Sorry about that.
HTH – Tory
Love the plugin…would you consider adding a ‘full screen’ option to resize the gallery to fill the entire browser frame? Or, can this be achieved by modifying the existing implementation?
Thanks!
Hey there, the Next / Previous buttons in my Galleriffic viewer are not working under IE, if I run the error console in FireFox I am getting this error
Error: e. is not defined
if (e.button != 0) return true;
The viewer is working in FireFox, Safari, and Chrome, just a problem in IE7 and 8.
Any ideas?
Thx.
Marc Musial
Is there a way to have the transition only affect the image, not the caption text? In other words, I want the text to simply switch without a transition. I still want the image to have a transition, but not the text. Any ideas? Thanks.
Very nice Gallery dude! This is what I’m looking for which is very similar to Facebook… Thanks a lot for this!
hi… i’m trying put two galleries one above…
can someone help me with this??
i’m getting a lot of issues.
I am using your code for the portfolio page for my company’s site and I want to change the position of the thumbs from the bottom to the left. Where can I find it in the code to make these changes? Can you help me out please? Thanks.
Before I dive into galleriffic, I would like to know if it’s possible to do a couple things.
Can I…
1) Rather than having the click on the large image functionality just advance to the next image, would it be possible to divide the image into two to have prev/next functionality for each half (i.e. click on left side to go back, the right side advances forward). I will be using square, horizontal, and vertical images. If so, what would be the best way to implement this?
2) I would rather keep the thumbnails invisible until the user wants to see them. Is it possible to have a thumbnail button that only loads thumbnails over the large image area with the same transition effect and that would ‘remember’ what large image was last viewed? Here’s an example of the type of functionality I’d like to implement: http://www.tinyvices.com/gallery/132883?page=portfolios (click on the thumbnail icon in the navigation bar to activate the thumbnails). Again, if this is possible, what would be the best way to go about this?
Thanks in advance for any insight.
Query about transitions and waiting for images to preload.
When my images first load, there will be a period of time where the first image has transitioned out, showing the empty ’slideshow’ div and the loading div, before the next image transitions in.
I thought the first image wouldn’t transition out until the next image has finished loading. Have I neglected to specify something? I have preload set to 1 and sync transitions: true. I’ve looked through the .js but it’s a bit over my head.
What I would like is for the first image to remain on-screen, with the loading div appearing over-top while the next image loads. Then once loaded, the loading div disappears, and the two images transition in sync, with no background appearing.
What should I do?
Cheers,
Chris
I’m having the same problem Chris, and it seems to be triggered by me changing the code so the caption “follows” the image instead of having a absolute position. This is where my big problem is.
If anyone has a way to have the caption position right under images with variable heights and STILL have non-doubling transitions. Please help us.
The jAlbum skin seems to actually do this:
http://www.twospy.com/galleriffic/demo/index.html
But since I don’t know enough about the scripting being used here, I can’t seem to convert the plugin javascript to a .js file I can use simply without any other add-ons to my site (which is not a jAlbum or using jQuery). So yea, could someone tell me what differences in the jAlbum javascript is getting rid of the transition craziness?
Hi, I am wondering if it is possible to used a wipe transition from right to left instead of the fade? Can you aqdvise me about this? Thanks.
Never mind I fixed the problem. Hey Chris check if your javascript at the bottom of your main page has:
syncTransitions: false, // Specifies whether the out and in transitions occur simultaneously or distinctly
because mine was set to “true” and i had to set it to false to get rid of my problem. Did you try changing it to false?
Hi! again about white dots on black images. Say me plz, where i should change div’s color to black on this page http://www.rezcov.ru/index.html#17 (IE
Galleriffic is so beautiful, and the fact it’s css blows away all the flash galleries.
I have only 1 big problem:
Is there really no solution to put external links in the images? So that instead of just loading the next image, clicking on them can send to another page of my site? If only we could put the link we want in the href of “advance link”, Galleriffic would become a powerful way to navigate through a site.
Thank you
I agree with Seb. For now I changed the “Download Original” link to a ‘jump’ button.
Hi,
Excellent script!
One question, is it possible tu put two different gallery in the same page?
If a copy / paste the code, the second gallery doesn’t show. Any suggestion?
Thanks in advance