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.
March 9th, 2010 at 8:05 am
The best one I found till now
Excelent!!!!!!!!!!!
March 9th, 2010 at 10:14 am
Hi there,
It was mentioned in a comment a while ago – but this script has some issues when used in conjunction with the latest jQuery release (1.4.x).
Are you planning to add support for jQuery 1.4?
March 9th, 2010 at 5:21 pm
Hello. I am working that will be using a lot of image slideshows and your jquery photo gallery is awesome for it. I’ve gotten it working on a regular html site just great, but I cannot seem to get it working on a WordPress site. Do you have any documentation handy for integrating your jquery script with WordPress? Google searches have so far proved fruitless with all my trial and error. I’m surprised no one else is asking this question, so I’m posting it here.
I’m currently setting up the files like thus:
in the header.php:
I put this script code between the meta tags and the css:
<script type="text/javascript" src="/scripts/jquery.galleriffic.js”>
<script type="text/javascript" src="/scripts/jquery.history.js”>
<script type="text/javascript" src="/scripts/jquery.opacityrollover.js”>
Then in my regular index page, I have the content divs of the photogallery.
Finally, in the footer.php, I have added right before the tag:
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$(‘div.navigation’).css({‘width’ : ’300px’, ‘float’ : ‘left’});
$(‘div.content’).css(‘display’, ‘block’);
…… –and on til the closing tag.
This does not work. I’m unsure of the correct procedure for WordPress to display this correctly. I added the css of galleriffic to my own style sheet, because I didn’t understand how to get WordPress to load galleriffic.css. Viewing the page source does show the javascripts were loaded. I also tried adding the actual photo gallery content divs into a Page from the WordPress admin, but that proved fruitless too. I also do not know in what exact folder WordPress expects my thumbnail and regular size images for this gallery to be. I could upload them all one by one from the WordPress admin, but since I am working locally via Mamp, it would seem easier to just put the images in the right folder. But what folder would that be?
Is there documentation somewhere that can highlight the correct procedure for integrating this jquery gallery into WordPress? I did find a plugin that claims to be similar to your Galleriffic gallery, but I’d much rather use yours, since it’s so great. Any help you can provide that can get this working would be greatly appreciated and thanked with a donation
March 9th, 2010 at 6:44 pm
Hello Trent –
Superb plugin. I’ve tested many, and Galleriffic is certainly my favorite. I’m currently building a site for a artist. In pursuit of minimalism I’ve added a button to toggle the thumbs off/on, but I cannot discover how to set them as ‘off’ by default.
Here’s the script to turn off the navigation panel:
$(“a.thumb_btn”).click(function () {
$(“.navigation”).fadeToggle();
return false;
});
The button works, but any attempt to disable or hide .navigation on pageload results in the permanent hiding of the entire gallery – any thoughts? Thanks again,
Reed
March 9th, 2010 at 6:51 pm
Ah, and here’s the link to the site with the toggled thumbs:
http://www.benplattes.net/art.html
March 10th, 2010 at 8:28 am
I had some missing information in my previous post. I would like to add that I do have the code: in the header.php area as well as the callouts to the other javascripts. Any help or documentation on integrating Galleriffic with WordPress would be greatly appreciated. I’m sure someone has tried to add it to their WordPress site before, so someone must know how. I’m sure it’s something so simple, but I’ve hit a brick wall and could really use some help here. Thanks!!
March 10th, 2010 at 8:44 am
It looks like the php code will not show up in comments but it’s the enqueue script to call jquery.
March 10th, 2010 at 10:59 am
Love the gallery but it is not valid XHTML. You have used 2 attributes in the tag, ‘original’ and ‘description’, which do not validate. Is there a workaround for this so I can still use the gallery, including a title and description, but using valid HTML code?
March 10th, 2010 at 11:02 am
Sorry, my last post should read “2 attributes in the ‘a’ tag…”
March 11th, 2010 at 5:50 pm
Hey,
getting this erroer with win explorer 8 in regular and capatibility mode. – viewing your demo page ( 4 )
firefox and safari work perfectly.
any work around?
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Win64; x64; Trident/4.0; GTB6.4; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Thu, 11 Mar 2010 22:44:49 UTC
Message: ‘e’ is undefined
Line: 479
Char: 6
Code: 0
URI: http://www.twospy.com/galleriffic/example-4.html
Message: ‘e’ is undefined
Line: 479
Char: 6
Code: 0
URI: http://www.twospy.com/galleriffic/example-4.html
March 12th, 2010 at 9:25 am
As regards my issue with WordPress and jquery, I figured out what was wrong by asking the WordPress forums. You have to call the external javascripts AFTER the wp_head tag in the header.php. You use the enqueue script to call jquery before the wp_head tag. And the images are called like thus: <img src="/photos/images.png” width=”114″ height=”111″ alt=”title” /> Hope that helps anyone else encountering this problem.
March 12th, 2010 at 9:26 am
That tag should read img src=” php bloginfo(‘template_url’); /photos/images.png” width=”114″ height=”111″ alt=”title” , but add the proper greater than and less than signs.
March 13th, 2010 at 5:36 am
Hi supporters,
I meet the problem with display image in the slideshow content. The position of image display incorrected. All image that upload to server that i changed dimention into 500 x 500. I already change to many other size 600×600, 1000×900, 700×700…But the problem still remain. I also try to change width and height value in the css file. But can not fix this issue.
Many thanks to yours if any one can help me.
Thanks
March 14th, 2010 at 4:01 pm
Hi,
Love Galleriffic!
I just combined it with jquery-flickr JS. To see it in action download it from http://github.com/wmernagh/jquery-flickr-galleriffic
Will
March 15th, 2010 at 8:22 pm
Wow! Amazing gallery code!!! Thank you for developing and sharing it!
March 16th, 2010 at 3:01 pm
Hi,
I have a blog, http://gez-ye-ic.blogspot.com, and I post photo-albums each of them consists of more than 20-30 photos.
Also, I stored my photos at picasa web album.
I wonder if I use gallerific? İf yes, what do I have to do for blogspot?
Especially how do I drive albums from picaseweb.
thanks at advance,
regards
March 16th, 2010 at 9:49 pm
@Jon Scott,
I had the exact same problem and found a solution. On line 478, look within the line for
function()
and simply change (just that one bit) to
function(e)
I hope this helps.
Pam
March 17th, 2010 at 11:52 am
I have a big problem!
On the same page I have gallery and form. Now I can’t type space in input fields. No errors – nothing. Just space won’t work.
When I erase this line : imageContainerSel: ‘#slideshow’,
It is working (form), but then gallery won’t work.
Thank you.
March 18th, 2010 at 2:08 am
Hi there,
First of all this is a great jquery photo gallery.
May I ask how can I remove the link on the large images.
Thanks
March 18th, 2010 at 2:55 am
Awesome plugin – top marks.
Would appreciate some advice on how to interact with the code externally e.g. pause a playing slideshow programatically. I have altered it to allow showing of multiple galleries that can be selected by anchors drawn further down on the page, BUT if the slideshow is playing it all goes pear shaped. How can I stop a playing slideshow and then carry out other commands?
Any response greatly appreciated
March 18th, 2010 at 12:55 pm
La mejor galería de este tipo sinceramente. Tiene una gran varidead de útiles opciones y es muy fácil de modificar, exelete, muchas gracias. =)
March 18th, 2010 at 6:09 pm
Hi,
I am trying to do an implementation of Galleriffic. I love the Gallery script. It is by far the best jQuery gallery plug in! My only issue would be that it does not create the links correctly on the thumbnails if I have jquery.curvycorners.min.js in the same page. If I remove that script from the page it works fine. Unfortunately I cannot get rid of that script. Anyone run into anything similar? The proper link should be “http://www.mywebsite.com/gallery.aspx#leaf” but the script sets the link as “http://www.mywebsite.com/gallery.aspx#27″. I am using the same setup as example-2, except I added 2 of my own images at the front of the list.. any ideas anyone?
Thanks to any who can help and thanks Trent and crew for the fantastic script!
March 18th, 2010 at 6:28 pm
Hi Trent
I like the script, but I tray to put multiples slideshows on the some page and only one works.
Can’t you send me an exemple of a script of multiple ones?
Best regards
March 19th, 2010 at 11:54 am
I use galleriffic for one of my website, i must change somethings and use the .load() function to load the html content of some html into a div with the same pictures format as use galleriffic, but how i apply the behaviour for this new html?
March 19th, 2010 at 12:48 pm
HI dear,
hoping you in good health,
you have done an excellent art work…
it would be a my big mistake, if i would not mention your efforts.
regards
March 19th, 2010 at 2:00 pm
Hi…how can I tweak the code in order to open a shadowbox (modal, using jquery smartmodal) when clicking the large gallery image, rather than moving to the next photo in the stream?
Thanks.
March 19th, 2010 at 2:15 pm
I have a problem. I want to include galleriffic on my website but want to restrict the width of galleriffic to 735 px. The thumbnails are in two columns but the gap between the larger images and the thumbnails is too big. Is there any way I can reduce this gap to say 10 px?
Thanks for any help.
March 19th, 2010 at 3:25 pm
I think I’ve found out what I need to do. I need to reduce the container size surrounding the main image. There’s about an inch of space between the right and left hand sides which I need to eliminate so the container exactly fits the width of the image. Question is, how do I do it please anyone?
March 20th, 2010 at 11:37 am
Hi there!
Is it possible to have a mouseover effect on the big image?
I’m trying all the time but it doesn’t work…
March 21st, 2010 at 12:45 pm
Using Safari, haven’t tried other browsers, double-clicking the thumbnail causes two images to appear in the #slideshow div.
March 22nd, 2010 at 12:57 pm
Hi all.
Can anyone tell me how to correct my two problems. The first is that the thumbnails are lower than the main images and I need them to line up with the top of the main images. The second problem is to center the text below the main images. Any ideas how I can resolve this please? Link below.
http://bajor.servers.rbl-mer.misp.co.uk/~sunridge/photob.htm
March 22nd, 2010 at 2:42 pm
Hi,
Thanks for great plugin! I’d like to know how to position large images middle in MSIE. Images with vertical alignment look good, but the ones with horizontal alignment are displayed at the top of div “slideshow”. It happens in MSIE (v 6, 7,
only.
Thank you,
Nadya
March 22nd, 2010 at 3:29 pm
@Hovard: You need to adjust this line in terms to put your thumbnails up: $(‘div.navigation’).css({‘width’ : ’300px’, ‘float’ : ‘left’}); Make width smaller than 300px.
Regarding centering image title: div.caption is responsible for your title position. What I would do:
1. Replace Sample Title
with Sample Title in your html file
2. Add
div.caption h3{
text-align: center;
}
to your css file
3. Style h3 as you want
Nadya
March 22nd, 2010 at 6:31 pm
Please take a look at http://ardenwoodaffairs.com/gallery/gallery.html to see what I mean about vertical alignment issue in MSIE. Take a look at images with landscape orientation. I really need to display them in the middle, not at the top.
Note: I tried to play around with vertical-align property and absolute positioning, but nothing worked out.
Thank you,
Nadya
March 22nd, 2010 at 10:25 pm
It works great with jquery 1.3.2, but not jquery 1.4.
Any chance this will be updated to be jQuery 1.4 compatible?
March 23rd, 2010 at 4:08 pm
Hello Nadya
Thanks for your reply but the width you refer to is only 200px
March 24th, 2010 at 2:35 am
@Zec
I had the same Problem with the Form and the Gallery on the same Site.
Look for the following code in the file jquery.galleriffic.js (around line 938)
case 32: // space
gallery.next();
e.preventDefault();
break;
I just commented it out, since I don’t need keyboards function. Strange that for me the Line “enableKeyboardNavigation: ‘false’,” didn’t work?
Hope it helps
Greetings
Georg
March 24th, 2010 at 5:21 am
Is there a way to open a gallery on a specific image by means of a url?
Something like “http://www.twospy.com/galleriffic/example-1.html#4″ to open the 4th picture. Or in other words, how do you show a specific image to a friend?
Thnx, Dieter
March 24th, 2010 at 3:51 pm
Magnific slider!!!
I’ve got one problem : if i want to put 2 slider on the same page.
I have to duplicate the script an rename the id name and class in the page?
or i just have to rename the id name and class and ad them in the script?
Thank you for this script
, i’m sorry i don’t speak english well.
Christophe
L’Usine du Web
March 24th, 2010 at 7:38 pm
Resolved the positioning of thumbnails but got another problem. In Internet Explorer there’s a thick black line at the bottom of the thumbnails when clicked on. The line is larger than the other border lines and this only happens in IE. In firefox,safari and opera all the border lines are of the same thickness. Any ides how to make the all equal please? Link below.
http://bajor.servers.rbl-mer.misp.co.uk/~sunridge/photo2.htm
March 25th, 2010 at 2:59 am
Howard,
Have you change anythings in the stylesheet?
For IE and Safary add : img {border:0;}
March 25th, 2010 at 1:44 pm
Hi Trent,
Any idea what I’m doing wrong here? I’m at a loss.
http://www.jameskennard.com/index.php?/test/
March 26th, 2010 at 7:11 am
Hello Christophe
Thanks for the reply.
Tried adding img {border:0;} but still not working.
March 26th, 2010 at 7:14 am
Hello Christophe
No changes in stylesheets.
Where do I add img {border:0;} please?
March 26th, 2010 at 7:14 am
James. Your page cannot be found.
March 26th, 2010 at 2:11 pm
Love Gallerific but when I try to view in IE7 I get the message ‘e is undefined’.
Anything I am missing?
March 27th, 2010 at 11:43 am
I am having trouble with the history plugin in Drupal. The live() method is only supported in jQuery 1.3 or higher, but those versions break other modules in Drupal so I have to stay with 1.2.6. Is there an alternative to the live() method that will keep the history plugin working, or should I just remove the history plugin?
Error:
$("a[rel='history']").live()is not a functionMarch 28th, 2010 at 3:26 pm
Hey,
I am getting some conflict in your plugin…I am using another Tooltip plugin on the same page i am using galleriffic plugin. Please let me know how can i get rid off this conflict.
I will be very thankful to you i may get your quick response. I am really really bothered.
Thanks in advance
March 30th, 2010 at 9:30 am
The history version does not work with Google Chrome 5. Any ideas on how to fix this. Also without using the history version (because it does no work with Chrome) how can we do like Dieter says and link to a specific image.
Many thanks, looks good just wish you would respond to some of us…
March 31st, 2010 at 4:49 am
Hi. is it possible to resize the larger images. because it seems in my page. if its too big. it jumps down below the thumbnails. and does not look pretty. and the caption text is displayed on top the images.