Galleriffic 2.0
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.
April 4th, 2012 at 4:42 pm
Never mind–it’s in example-4.html
awesome
April 10th, 2012 at 9:33 am
It is not just great, It is super great.
I have lot of picture and the pagination here will be very helpful, I search a lot of time for something like this.
If you can add option that the picures will be open in something like div over the another pictures Instead of the site that even will be greater
April 10th, 2012 at 2:00 pm
Great stuff!
I did notice one error in this example and downloaded code. When you click on a photo the error is: “e is not defined”
http://www.twospy.com/galleriffic/example-4.html#bigleaf
thanks again!
Jamy
April 11th, 2012 at 6:17 pm
How can I add a “ken burns” effect to gallerific? (Meaning a smooth, automatic pan-n-zoom on each slide).
April 12th, 2012 at 9:38 am
Hallo.
I need help from you.
I want to disable switching to next image when I click on the big picture in the gallery.
Thanks for your help.
April 16th, 2012 at 4:13 pm
hey, it’s such a great script, but yet, need to be improved for installing. I just want make a loop, when the slideshow finishes it should start again.. how can i do that??
April 25th, 2012 at 6:15 pm
im using this gallerie on a site and i need to use a jquery cycle plugin, when i do that the gallerific doesnt work. how can i fix that?
April 27th, 2012 at 3:43 pm
Can you explain How can i add more effects to gallery?
April 30th, 2012 at 11:27 am
Thanks so much for this script — I used it in a gallery website for an artist friend. I’d like to use it again for a website I’m putting together for an online t.v. station. Can you use youtube links in the gallery instead of images? If so, how? (I tried just putting the link in but it didn’t work). Regards, Cheryl
May 2nd, 2012 at 6:27 am
Very nice gallery slideshow, but how to resolve the conflict that it makes with Go Back browser button?
When I use Galleriffic, the Go Back button of the browser does not work, what to do to make them both work?!
May 4th, 2012 at 5:23 am
Hi I would like to know on how I can implement the onmouseover it will pause then on mouseout it will play again
May 8th, 2012 at 9:39 am
How do i get the herf or img src from the image that I select? Thanks!
May 8th, 2012 at 7:17 pm
This is an awesome slide show Trent! I really love it. Glad I found it, I’m using it for my client’s site! – but, I’m having an issue… How can I make it so that when I mouseover a thumbnail, it will change the slideshow to show the image related to the thumbnail. Is that possible?
Thanks for any suggestions, they would be deeply appreciated!
May 9th, 2012 at 1:34 pm
I am trying to build a gallery: Thumbnail rollover effects and slideshow crossfades, but I would like to turn off the function of changing the picture, if I click on the bigger picture. I should stay the picture. please help, thanx
May 16th, 2012 at 8:08 pm
Love it in Firefox, but in IE- When you click on a thumbnail photo- it stalls out- the error is: “e is not defined”? Any thoughts how to fix this?
May 21st, 2012 at 1:33 pm
Hey there,
I am a little newer to javascript and I was wondering where you put the slideshow img. I get the thumbnail img to show and put the large image in the “href” like you had it, but it doesn’t show the large image. And when you click on the thumbnail it takes you to the image, but not in the gallery, by itself. Any help would be greatly appreciated thank you.
Laci
May 24th, 2012 at 3:44 am
hello,
i have a very long page with galleriffic galleries and so i wanted to lazyload the site (http://herrfischerhamburg.de/bal/mallorca-ll.html) everything works fine but he won’t load the gallery pictures. any idea?
May 27th, 2012 at 10:05 am
Hi, i would like to know how can i integrate the new gallerific with lightbox? the Gallerific plus is using the old gallerific. can you please guide me how?
May 31st, 2012 at 3:00 pm
Hi, This is an awesome project and it’s super useful. The only problem I am having with it is when I’m using jquery 1.4.4+ there’s an extra thumbnail that appears when I have hover over an image as I’m loading the next or previous page. Happens nearly every time I hover over an image right after I select another page and pushes all other content down. Do you know how I can fix this issue? I’m using jquery 1.7.2 specifically. Thanks!!!
PS: The issue I’m seeing is not solved here (it’s totally different): http://code.google.com/p/galleriffic/issues/detail?id=139
Really appreciate the help, since I’ve tried a dozen times to fix this!!!
June 2nd, 2012 at 6:40 pm
It is not just great, It is super great.
June 5th, 2012 at 6:10 am
You really, REALLY need to host some kind of forum for this content.
People are trying to get feedback for this plugin with practically zero response anywhere out there; certainly not on this website, and very, very few on jQuery.com.
What is the point of releasing something if there is no community hub available to allow users to discuss and assist with issues in trying to deploy your software???
June 6th, 2012 at 8:46 am
Hi Eugene,
Did you figure out how to get both Lightbox and Galleriffic working together?
June 12th, 2012 at 4:40 am
Amazing issues here. I am very satisfied to peer your post. Thanks so much and I’m having a look ahead to contact you. Will you kindly drop me a e-mail?
June 14th, 2012 at 12:28 pm
Any plans to add video support?
June 16th, 2012 at 1:29 pm
I have a very simple need to perform basic record navigation wrapped in a slider. Top of “pane” will be the image and the bottom “pane” will be some details about the image. I am assuming this can be handled with this plugin, what is the basic setup to make this happen (is there an example which has a similar construct)
June 16th, 2012 at 4:59 pm
Hello,
First of all, many thanks for a so good plugin.
I want to take “play slideshow, next and previous” line to bottom of big image.
I try to change div.controls margin value, but , it doesn’t make what I want.
Is it possible to change the location of top line?
Thanks at advance regards
June 18th, 2012 at 11:26 pm
I have a strange problem… I have installed Galleriffic 2.0 in my website and in the page there is a “Contact Form”… and it doesn´t let me put “spaces” in text inputs or textareas… which is the cause??
Thanks!
Francisco
June 20th, 2012 at 2:32 pm
Hi,
Is it possible to play the slideshow in full screen?
Like as a background.
gr,
S.
June 23rd, 2012 at 7:02 am
Hi there,
Thanks for creating this great script, it’s much appreciated. I’m wondering how I can tailor it to my specific requirement. I need a really basic slideshow which will display images in a container regardless of whether they’re portrait or landscape. Let’s say I want the container to be 600px wide and I position it on a page. I’d like the images, regardless of their size/aspect ratio to fit into this box. I don’t need controls or any kind of slick animation, just the images changing.
June 28th, 2012 at 2:13 pm
Hi,
The last image loads when we have paging. need to upload first image of current page
June 30th, 2012 at 10:36 pm
I do consider all of the ideas you have presented to your post. They are very convincing and can definitely work. Still, the posts are too brief for novices. May you please extend them a little from subsequent time? Thank you for the post.
July 1st, 2012 at 3:27 pm
The page navigation shows up above and below the thumbnails…I don’t want them twice – just on the top. How do I remove the bottom one?
http://www.twospy.com/galleriffic/example-2.html
want to remove the “1, 2, next” on the bottom.
Thanks!
July 4th, 2012 at 7:59 am
Is there a way to have the large image that loads (not the thumbnail) repeat itself?
Thank you.
July 12th, 2012 at 7:04 am
I just want to thank for the plugin. It really saved me some sleep tonight.
Live long and prosper!
July 24th, 2012 at 1:17 am
hi trent, trying to get this to work, but i am not enough of a programmer and don’t really understand the jquery thing. am trying to do a simple slideshow for my business site. will gladly pay you if you can implement one page for me and i can take it from there.
July 24th, 2012 at 4:35 am
Dear sir,
I have change somthing in your gallery and now i see a mistake in Firefox and safari. Can you help me. Look for it with ie9 and firefox the img will not load on the right place. I wil se your comment.
Cees Bout
July 24th, 2012 at 8:19 am
I have found the probleem. Sorry for the first request. gallery is a nice program.
Cees bout
July 24th, 2012 at 10:06 am
Hi Trent,
I see a lot of comments but zero responses. So I am wondering if there is another way to seek advice? Maybe you only respond by email then?
OK, I’ll ask anyway. The thumbnail images have a black background (e.g.: square thumb area with landscape image) but I can’t find anything in the CSS or jQuery that controls this. If I wanted the background to be white or any other colour how can I set that up?
July 24th, 2012 at 2:19 pm
Very nice script, I have spent a few weeks modding it. One thing I can’t figure out though. How do I make it stop at the last image? I dont want it to start over when I reach the end. Thanks!
/Tommy
July 30th, 2012 at 3:10 am
I want to use this script, example-5 in particular but I need a white background, main images 900X600 pixels, and no links or text on the page, just the thumbnails at the top and the image when people click on thumbnails… can you help?
Thank you so much, Rosa
July 31st, 2012 at 10:44 am
Hi,
Can’y see a contact anywhere so I am posting here. I love the script but I also need to link to video footage and have it display in the main box.
Can you please contact me on my email if possible.
Thanks
August 5th, 2012 at 1:25 pm
Like the poster above, I too couldn’t find your contact info and so am posting here.
Ianted to share where I used your galleriffic plug in: http://annablueberry.com/july2012/july2012gallery.html
it is great and I love the general look and feel of how it operates. I’ve modified it a little to fit my site better.
I do wonder however if instead using page prev/1/2/next on top of the thumbnails container,
If I could turn each section that I’ve worked into the thumbnails clickable and the thumbs within that section to then show on either hoover or click?
I don’t know if I am asking for something too complicated or not but am curious if there was a way to rework my sections so that it looks better.
Would be very much appreciated.
This really is the best css gallery that I’ve seen so far. But am quite lost with jQuery.
~Anna
PS I too, as with the above poster, would be interested in knowing how to make video footage play in this slideshow as well.
August 14th, 2012 at 10:05 am
Somebody essentially help to make significantly articles I might state. That is the very first time I frequented your website page and so far? I surprised with the research you made to create this particular put up incredible. Excellent process!
August 15th, 2012 at 5:47 am
How to share image in Pinterest and facebook from your gallery.
August 22nd, 2012 at 9:39 am
Hi,
I´ve an issue with galleriffic:
Is ist possible to display more than 13 thumbnails in more than one row?
I habe an gallery with about 30 pics and I want to show 3 rows with 10 thumbs in a row. But it isn´t possible. Or is there a way? I want to pay for a solution. This is very urgent.
Best regards, Carl.
August 28th, 2012 at 10:13 pm
Hello,
My name is Cristian and I’ve used your jquery gallery in one of my projects, I think is very nice, but I have a problem, I would like to change the font in the part of “image title and image description” This part has a kind of pixel font, and I wolud like to change it by one I am using in my web. I’ve tried using CSS but it didn’t work, so, Can you show me how can I change the font? Hope you can help me, have a nice day!
September 6th, 2012 at 7:58 pm
Cool gallery, Using your gallery, I was able to make it so anyone can create it from within photoshop. Just download the PSD file from http://jadii.com/docs/psd/Gallery1.psd than add the images to the group folder. Can see the example psd. Than save and reupload the new PSD to http://www.jadii.com and it will create the jquery gallery for you in html/css.
September 9th, 2012 at 7:45 pm
I am using Gallerific 2.0 for my photo galleries on my website. Last week, I noticed that the gallery page is not loading correcting in Safari (it is cutting the top third of the large image off). It worked fine a few weeks ago and I have not made any changes to it. It works fine in IE and Firefox.
Is this a global issue or can you provide any suggestions. I have a portfolio review in school on Wednesday and it has to be fully functional by then.
Thanks in advance for your help.
September 19th, 2012 at 3:21 am
One big problem that all thumbnails are loading at startup, i recomended that we just load thumbnails in current page.
Thanks
September 19th, 2012 at 2:19 pm
I love your product — am working off of ‘example-1.html’– using the UL LI for text. I have moved the slideshow to the left and the UL to the right. I cannot find what is keeping the UL wide. If I set the width to 719px (see CSS), the UL is forced below the slideshow, instead of next to it.
div#page {
width: 850px;
background-color: #44A6EB;
margin: 0 auto;
padding: 0px;
text-align: left;
border-color: #ddd;
border-style: none solid solid;
border-width: medium 1px 1px;
}
All behaves for me except getting the overall width down to where it needs to be. Here’s what it looks like.
http://client.montclairdesign.com/galleriffic-2.0/example-1.html
Thanks – Bob