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.
Michael Tank you for your answer, i try to delete the calling to history….(sorry but i dont are a expert) were i need to delete this? in jquery.galleriffic.js? or in which file? thank you very much for youe interesting
Galleriffic is a top-class plugin!
My implementation is here: – ImageArcade – Photography By Steve Ayres
Hi Trent,
Great script, many thanks. I have one question: Galleriffic appears to center images which are smaller than the display area both horizontally and vertically in the area. For our implementation it would look better if short images were top-aligned. I can’t locate anything in the css or script which does this centering, and would be grateful if you could tell me what to tweak.
The larger images appear at the bottom of my page instead of at the side when I view in IE, Firefox is fine if I make the image smaller.
Hi Trent,
Great script, many thanks.
My implementation is here: http://mobila-cmc.ro/index.php?page=prezentare&item=mobilier bucatarie
I have a request, i will like to know how to put something ( an imagine for exemple) in the slideshow div,during louding process.
I can’t locate anything in the css or script which does this, and would be grateful if you could tell me how to do this.
thank you very much
Hi Trent,
Great script, many thanks.
My implementation is here: http://mobila-cmc.ro/index.php?page=prezentare&item=dressinguri
I have a request, i will like to know how to put something ( an imagine for exemple) in the slideshow div,during louding process.
I can’t locate anything in the css or script which does this, and would be grateful if you could tell me how to do this.
thank you very much
Hi, there is this old issue with integration of the Galleriffic with lightbox. Is there easy and universal solution for that?
Thanks
Hi! First of all thank you for creating this fantastic script. I’ve tried to use other gallery systems but had much trouble trying to get them to work the way I wanted.
After implementing Gallerific into a site I’m working on I found that it works fine in every browser I’ve tested with the exception of Chrome. I primarily use Chrome personally and believe it displays sites better than most browsers, however neither the thumbnails nor the main image work after uploading the site to the web. Any idea what could cause this would be a huge help!
Thanks!
This is a great picture viewer. I am unfortunately running into issues… I know it is prob. posted somewhere but I can’t see to get my 570×700 images to load up top like they should. The pictures load from the bottom under the “loading” image. I know it is because the images are larger then the container but I am not sure what to change in the CSS. Every-time I change something it just furthers the problem.
Can anyone help me with this? Everything else is working fine. I am working with the Minimal implementation version for what I need it for.
-Thanks.
Hi! First of all thank you for creating this fantastic script. I wanted to ask one question…Is there a way to start the slide show as you land on a page. Is there any part of the script to set to true or false.
Thanks for your help and the script.
Hi Ras,
In the JQuery JS there is an “autoStart” variable. Set it to “true”.
Cheers,
Steve
My Gallerific Implementation is here: – ImageArcade – Photography By Steve Ayres
Hey there,
Thanks for this wonderful script.
One question, is there any way to set up the gallery so that it accesses images from a folder rather than having to list the image source for each file in the code? I’m working on a site for a photographer — lots of photos. It sure would be nice to just point the gallery toward an existing folder and let it do it’s thing.
Thanks!
Gabe
Hi!
Galleriffic is a great tool, I’ve been searching something like this long time.
I can only see it a caveat: I still haven’t found a way to “open” a gallery in a photo different than the first one. Is there a way to do so?
Thanks very much.
Ok, I’ve found the gotoIndex function. Now galleriffic makes everything I need.
Thank you for the good work.
I installed on my site more, I would like if possible are loaded 5 of 5 miniatures because when I open the gallery it loads all the thumbnails at once. Is it possible?
Hi,
You did a great job on this gallery. Very useful!
But One thing i noticed, the animation on rollover is not smooth,
Is there a way to make that effects fast? I just felt my processor slowing.
Thanks.
Any idea why, when clicking “Next/Prev Photo” links, it skips an image. If I’m at image 1 and I click Next, it goes to image 3, but if I hover over the “Next Photo” link, it shows that the link is to the next photo, not to the next next photo.
I’m not sure why this is happening. Any idea as to how to fix it?
Thanks,
Hristo
I would guess he doesn’t have time to answer your questions regarding gallerific since none are actually responded to.
Suggestion: learn jquery.
Hiro10x , you can try this into the gallerific file with this code below it works for me..
float: left; height: 100%; position: relative; width: 752px;
Hey, this plugin is awesome, but does anybody know how to tell the gallery to start in a picture that is not the first one?
For example, I have to start the gallery in the 4th picture or even in the picture named “crabs”…is there any way to do this in the gallery initialization?
Thanks a lot!!
I am trying to use this for a portfolio site and I need to to open a set of images on thumbnail click. Is it possible to open a swf or iframe instead of a jpg? I don’t have much time so any help would be
greatly appreciated.
Thanks
Mike
Pretty works!!
Anyone here has idea how to disable the pause funtion in order to make the slide show plays all the times. Any help would be greatly appreciated.
Does anyone have a different transition effect working? I can see where to hook them into the API, but I’m not quite good enough at jQuery to visualize how to use them successfully in an abstract way. If anyone has a transition other than fade working, or understands how I might go about it, I’d like to see/hear about it. I wish there was more documentation at all about using those hooks…
I’m at zed@zedmartinez.com if anyone has any help, thank you all.
PLEASE HELP!
Hey thanks for this great gallery.
However, I cant get it to work on my site. (The slideshow-container doesnt show)
It shows the thumbnails, but when I click on them, it takes you directly to the
image url and it doesnt show up in the slideshow-container…
-I’ve checked and the files (js,css) are all uploaded to my site and referenced in my HTML
-The rollover funciton works, but the slideshow-container doesnt show up
-Oh btwm, I used the example html
But I dont see any “gallery” class defined in the galleriffic-2.css
I’d appreciate if someone could help!
Thnx
Robo
I am trying to use this for a portfolio site and I need to to open a set of images on thumbnail click.
Is it possible to open a swf or iframe instead of a jpg? I don’t have much time so any help would be greatly appreciated.
Thanks
Mike
@Mike
This isn’t possible out of the box, but you may be able to swing it writing some javascript to manipulate the DOM during the onTransitionIn event handler.
Great script! The only issue I have found so far is if you try to use the newest version of jquery (1.4.2), when you use the click next page/previous page, the thumbnails move out of place and then back. Not a huge issue, but something that can be annoying to users.
I know this is a CSS issue, but your example #5, the positioning of the navigation in FF2 doesn’t work. I am looking into fixing that now. If someone already has a fix, please post. Thanks.
I have a solution. Change these two divs:
div.navigation-container {
float: left;
position: relative;
width: 841px; //width of the thumbnail area
}
div.navigation {
display:table-row;
display:table;
position: relative;
margin: 0 auto;
}
For IE6 and IE7, I put it in a conditional CSS:
div.navigation-container {
text-align:center;
}
div.navigation {
display:inline-block;
}
div.navigation {
display:inline;
}
I made some simple websites for artists using Gallerific. Then they sold some artwork (because of the great Gallerific, I guess!) and want me to overlay a diagonal “Sold!” banner across certain images. I struggled to do this, but thought perhaps it is a common enough problem someone else may be willing to share a solution?
Just so I don’t seem too lazy to try first before asking, here’s what I tried (which didn’t work (obviously):
I changed:
to
Then I added this to the gallerific.css:
This does in fact put the sold.gif onto the page, but only as a background image. Am I on the right track? Any helpful hints highly appreciated!
-Henry
OK, I’m trying to create a gallery that’s inside a lightbox. I’d like to resize the lightbox after the new image has completed it’s transition – but when wiring my resize function to the end of the onTransitionIn or slideChange events, it seems to resize based on the previous image. Do I need to add a timeout, or is there something else I can use as a loaded event?
@Brian- If the gallery is configured to perform synchronized transitions, both the previous and the current image will be present in the DOM, with opacities 0.0 and 1.0. Make sure you are selecting the correct DOM element in the onTransitionIn handler.
Has anyone modified Galleriffic for use with a Flickr API key?
Tim Radnidge wrote a great tutorial on pulling images into Galleriffic using a Flickr JSON feed. http://tinyurl.com/ygmog3r
The problem I have is that the public JSON feed for a Flickr Set doesn’t return the photos in the order that they are arranged in the Set in Flickr. I think it is possible to get the photos in the right order by using the Flickr API key.
There is this other jquery gallery that uses a Flickr API key to display flickr sets ( http://tinyurl.com/ydxwtyt ). I’m not really a programmer and can’t figure out how to adapt it to Galleriffic. Any suggestions? Thanks!
Dear Trent,
I am also trying to enable the show captions toggle, by default. Could you please advice?
In other words enable the text on the big picture in content window as default on page load instead of having to click show/hide for it to appear.
Many thanks for your excellent gallery
Hi Trent, thanks a lot for the last reply.
I’m not a scripter, so I have to found another solution for my problem.
Another question: is it possible to delete/take out the function which goes to next and prev image, when clicking on the big image itself?
Which are the function-related code lines?
Kudos! This is exactly what I want to showcase my photos.
Unfortunately, I have an *extremely* naive question: Can I simply replace the image links on a demo page with my own? The demos work great, but replacing the links in example 2 (rollover) with those to my images results in a page that shows the thumbnails but none of the large images. The maximum width or height of my images are less than those of the demo. Do I also need to change something in the scripts or css? Could my html editor be messing up the code?
Thanks in advance for any help…I’m about to reach for the aspirin
Hi Trent,
Nice Script!! I have a few questions (and these can be answered by anybody if they can). I would like to move the thumbnails to the right side and the full image to the left. What ccs part(s) do I need to modify? Also, I would like to add a caption underneath each thumbnail. Again, which part(s) of the css do I need to modify?
Thanks.
Thank you Igal Steklov for your pointer about the missing (e) in function(e). It seemed to be corrected in the archive I downloaded but it also applies to the history function lower down in Example 4.
$(”a[rel='history']“).live(’click’, function() {
should read:
$(”a[rel='history']“).live(’click’, function(e) {
Thanks trent for a great plugin.
In regards of enabeling the toggleCaption function so it loads onpageload as default. I figured it out and I am putting it out there for those who may have the same need. Its quite simple actually and I should have thought of it sooner
// Enable toggling of the caption
var captionOpacity = 0.0;
$(’#captionToggle a’).click(function(e) {
var link = $(this);
var isOff = link.hasClass(’on’);
var removeClass = isOff ? ‘on’ : ‘off’;
var addClass = isOff ? ‘off’ : ‘on’;
var linkText = isOff ? ‘Skjul beskrivelse’ : ‘Vis beskrivelse’;
captionOpacity = isOff ? 0.7 : 0.0;
link.removeClass(removeClass).addClass(addClass).text(linkText).attr(’title’, linkText);
$(’#caption span.image-caption’).fadeTo(1000, captionOpacity);
//ADD THESE TWO LINES(OR COPY ENTIRE SECTION)
if(e)e.preventDefault();
});
$(’#captionToggle a’).click(null);
With php and modifications to your script I made my personal gallery.
I wanted something like Apple MobileMe gallery app. I drop pictures from iPhoto inside a folder and app. does ‘the magic’. It will make little preview thumbnails and it’s capable of reading EXIF information embedded in photo so I can quickly review the settings used when taking the image.
http://www.tagtaxa.com/projects/taggallery/
Thanks for your excellent script.
Hi there,
Loving the plug in, thanks a lot!
Sorta a newbie question, but is it fairly easy to configure the images to slide (left and right) on transition rather than fade in and out?
I’m trying a few things but not having any luck, so I might just be missing something straight forward. Plus not the most advanced JS’er here.
Thanks
how can I disable keyboard shortcuts? (like space to change image, etc )
Ave! Great script!
How can i disable next/prev navigation buttons? or change their position at least?
Thanks!
Hi, Love the gallery – I’ve managed to install and all fine so far, but if anyone can help would be grateful – I would like the main image to not move on to next image when clicked. Ie only change when using the “next” and “previous” link. Post above from Mike asks same question, but I haven’t seen an answer – did you solve it Mike?
Thanks
S
My bad… I got it working so disregard my previous comment. I answered my own question – my “WYSIWYG” HTML editor was messing up the code, editing the actual code fixed it.
Once again, thanks — it’s working just great for my needs.
Hi. i cannot seem to figure out if its possible to determine the size of the larger images.
any suggestions are welcome.
Hi, I’m using Galleria, but in Safari when the images come up, they appear as a strip, or only half the image appears, however when I hover off the thumbnail the image appears as normal..?
Any thoughts?
is there a way where if i have the captions have some javascript in them (let’s say a call referencing facebox, or just any jquery code…) that I could have it get executed when the div is written? what would the callback function be?
First of all many thanks for such a wonderful plugin. I have a query ( might look a bit naive ). I wish to change the transition effect of the thumbnail as well as that of the larger images but dont know how to go about achieving it. Need Some Help Guys..!!
Hi, thanks for wonderful script but could you implement like this,
when i click on the thumbnails it should appear in the show area and when i click on the active image it should pop up and display image as light box with black background hiding the rest of the content.