Reflection.js 1.0
April 29th, 2006
I’m pleased to release reflection.js v1.0 - a cross-browser script which allows you to add reflections to images on your web pages.
It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 4KB.
What’s new?
The main thing is that reflection.js now works in Internet Explorer. Depending on which browser you’re using, reflection.js will decide whether to use DXImage Transformations or the HTML5 canvas tag.
Unlike previous versions, this version also doesn’t require prototype.js. That means the size of the script has effectively been reduced from 32KB to 4KB.
Demo
See a demo of reflection.js 1.0 in action.
- Javascript , Reflection , Web Development
- Comments(63)
Great piece of JavaScripting… exactly what I needed! One problem though: it adds a linebreak when I add the reflection class to some images that are not in a table.
Ihave something that looks like this:
<p><img xsrc=".." class="reflect" /> <img xsrc=".." class="reflect" /></p>
There shouldn't be a line break and there isn't when I turn off JavaScript but Reflection 1.0 adds a linebreak. How can I prevent this?
I don't want to use tables, it's not the correct way to layout your site (see the XHTML + CSS discussions).
Thanks!
Hi,
I think it's probably because reflection.js replaces the image with a div which behaves differently from images.
There is probably some way of making two divs appear next to each another by default (maybe fiddling with the CSS display attribute). Any ideas?
Sounds like some creative usage of float:left; for the images and a hacky float:clear; div may be required.
Yea i'm having the same problem with my image gallery. I'm using lightbox to view the bigger image and I want to use the reflection with my smaller ones. I use seperate divs for each image because I had them contained in a styled box but now I'm not. I think my problem that is causing the line break might be that the image is contained inside a link attribute.
here is a link to my gallery if anyone wants to take a look at it to see what is wrong http://www.penguin.lhup.edu/~ewhite2/gallery/exgallery.html
I forgot to add something in my post above. I also say that three of my pictures did not have a reflection generated for them.
Why not use blank images instead of divs? This would be more correct in a semantic context, and probably make life less painful when applying CSS.
Reflection.js takes the original image and replaces it with a <div> element containing the original image and the reflection (this will be a <canvas> or a <div>). The <div> acts as a container and any styles which were applied to the image get copied to the <div> and removed from the original image. I don't think images can work as a container element like this.
This solution makes sure the reflection appears below the image but unfortunately browsers treat <div> as a block element and <img> as an inline element. I believe this is the problem causing the line breaks.
Btw Talguy: Your link doesn't appear to work.
here is the new web address
penguin.lhup.edu/~ewhite2/gallery/exgallery.html
the http://www. does not work when it is written in front of the address
I think I see the problem - you've scaled the images so the images are not displayed at the same resolution the thumbnail image is saved as. I guess this would count as a limitation of reflection.js at the moment - you can't use it with images scaled using HTML.
I'm not sure how this issue can be resolved at the moment; my suggestion would be not to scale the images using HTML.
ok so I got rid of the scaling and I see a new problem now. The reflected image is shifted to the left a hair and there is a very small line break between the image and it's reflection. I know that I am posting a lot but it is for the good of other people how are having the same issues with this script and let me say that this is one amazing piece of scripting you have written Cow.
Hi,
I had a look at it; I think this issue is caused by the border around the image because it's part of a hyperlink. The following CSS can solve it:
a img { border: 0; }Again, I can't really think of a good way for reflection.js to counteract this so the best way would be to disable the border. It seems like you don't use the border anyway
Khlo,
thanks a lot i new it was the border of the link that was causing a problem right after i posted my last comment. I didn't know how to solve that problem. good luck on coming up with a solution too the reflection problem when an object is scaled.
Talguy
Thanks for this great script!
Is there a simple way to use this in conjunction with lightbox.js in order to display the large lightbox image with a reflection? I know the answer is probably staring me in the face.
I'm not aware of any simple ways at the moment. I suspect it should be quite easy if the code to add the reflection from addReflections() is extracted and added to the lightbox code.
Would there be any way to make the reflection slightly “angled” or “slanted,” you know, how a real-life reflection might be?
For your information the script make appear an javascript error in ie 5.2 mac on osX
Hi,
I tried to create an angled reflection once - it kinda worked. Unfortunately it doesn't look right because of perspective and there is no way I know of of using Javascript/Canvas/CSS/etc. to get an image to reflect using perspective.
Regarding IE/Mac: if anyone knows of a way to fix this, I'd be more than happy to fix it. However, IE/Mac is a very old browser and I see no reason why the script should have to support it.
Mac user here too… I tested in MSIE 5.2 (OS X) and got no Javascript error. It degraded elegantly, just as it should… and yes, MSIE is so old that I’d agree, it’s probably not worth spending time on. MSIE is officially abandon-ware on the Mac platform. (Again, I didn’t expect the reflection effect to work, and got no error when I tried the page.)
Any Mac OS X user not using Safari, or Firefox, or Camino… in favor MSIE? Probably wouldn’t notice the reflection effect anyway.
Firefox 1.0 (PC) support would be nice too, if that’s possible. I know plenty of folks not quite enthused about 1.5 and are holding off on the upgrade for now.
That said, I’ve noticed a more egregious issue with this javascript in Safari. It works fine in horizontal images, but not in vertically-oriented ones. There’s a big white space that gets inserted. Here’s a pair of screenshots to compare:
http://homepage.mac.com/joshr/trl/reflecthoriz.jpg
http://homepage.mac.com/joshr/trl/reflectvert.jpg
It makes the reflection of “tall” avatars on my forum look odd and even less uniform. Square ones and wide ones reflect fine. It’s just the tall ones. And they display fine in browsers other than Safari.
I’d love for THAT issue to be addressed.
I don't know why that's happening - I don't have access to a Mac or Safari and a web page example would also be useful.
Regarding Firefox 1.0, it doesn't support <canvas> which is required to display reflections in non-IE browsers.
I don't want the ie mac support i just think that it s better if there is no javascript error. Josh look at your preference maybe you don't have check the box alert me when there is an javascript error
Khlo, thanks for your attention. I have created a simple web page example for you to see:
http://www.userfriendlyla.com/reflectiontest/
On the latest version of Safari it renders like so:
http://www.userfriendlyla.com/reflectiontest/screenshot.jpg
As you can see, the image on the right, the vertically oriented one, has a large gap before the reflection appears.
I also noticed that the only way to get the images to appear side by side was by putting them into a TABLE. Is that intentional?
Here is a service (free for 24 hours) that allows you to test coding and javascript in all browsers, including Safari, maybe it will help:
http://www.browsercam.com/
Goetsu, you are correct, I looked in MSIE’s preferences. I had Web Content->Active Content->Show Scripting Error Alerts turned OFF and that’s why I didn’t get any error. Once I turned it on, I did in fact get the error alert on my sample page. Sure, It might be nice for the .js to degrade for that old browser, but it is less of a priority than full support for Safari… the default browser for Mac these days.
Khlo, if there is anything I can do/test to help you add in better support for vertical images and their reflections appearing properly in Safari, just let me know.
Hi,
Thanks for the demo Josh
I think I explained this in one of the comments above; reflection.js replaces the original image with a <div> element which contains the original image and a reflection. However, browsers treat images and divs differently - images are inline whilst divs are block elements. This is why you can't just place two reflected images in the same paragraph and have them next to each another.
It should be possible to have two reflected images next to each another using floats.
Again, my limited knowledge of Safari isn't helping. Browsercam is a useful tool but it's a ton easier actually having the browser in front of you and having debugging tools such as Web Developer Toolbar.
I don't know why Safari is doing that but I do have a hunch. In a table in most browsers, when the row height is larger than the required cell height, the browser will render the contents of the cell in the vertical middle of the cell. It could be possible that instead of doing that, Safari decides to space out the content a little more so it uses more of the cell.
You could try adding a vertical-align: top to the cell and see if that resolves it. Adding * { border: solid 1px blue; } can add an outline to all the elements on the page which could also help determine whether Safari is indeed doing this.
Regarding IE/Mac: could either of you two provide an exact error message which could help narrow down the causes of the error?
Thanks!
Sorry for the newbie-ish question.. but with with regards to your request “You could try adding a vertical-align: top to the cell and see if that resolves it. Adding * { border: solid 1px blue; } can add an outline to all the elements on the page which could also help determine whether Safari is indeed doing this.” Would I make that change to my test HTML file, or to reflection.js? I’ll need some assistance on that I am afraid. Feel free to email me if that’s easier (or can also collaborate via AIM/iChat.) As far as IE/Mac’s error goes, here it is: http://www.userfriendlyla.com/reflectiontest/msiemacerror.jpg
Another issue is that transparent GIFs don’t reflect well in Firefox 1.5.x. They get “jaggies.” Check out the avatars (specifically, kall and extremeslick) on this page: http://www.nzboards.com/forums/news-views-issues/telecom-forced-unbundle-local-loop-27842/
Ironically they look fine in Safari though.
Regarding transparent GIFs, that's probably a bug in Firefox's canvas support. Maybe Firefox doesn't like scaling or rotating transparent images or something. There's not that much that can be done about it.
You would make the above changes to the HTML file.
<td> becomes <td style="vertical-align: top">.
Then to show borders around all elements, add the following code in the head portion of the webpage:
<style type="text/css">* { border: solid 1px blue; }</style>I suspect IE/Mac's problem is being caused by the getElementsByClassName function.
Understood about Firefox’s canvas support. Oh well. Still holding out hope for Safari. I made those HTML changes, the vertical image glitch remains. Here’s a new screenshot: http://www.userfriendlyla.com/reflectiontest/safaritest.jpg
Ok, I’m out of ideas. It’s worth noting the table on the canvas demo page has images of varying heights and doesn’t suffer from this issue.
Khlo: In my testing of this issue I have found that it has nothing to do with the varying heights of the images, but rather it has to do with their *orientation.* Pictures whose dimensions are such that they are wider than they are tall are reflecting fine in Safari. It is only with pictures that are taller than they are wide, that the visual glitch occurs. I suppose this could also be referred to as “layout.” (horizontal vs. vertical, portrait vs. landscape.) It doesn’t matter if it’s one picture, or four, or if they are all exactly the same height or of varying heights. In any case, if a picture’s HEIGHT is larger than it’s WIDTH, there will be a gap where the reflection should start for that pic (in Safari.) Yes, the canvas samples on your page display fine, but all of them are either square, or wider than they are tall. Try this image on your sample page: http://photos1.blogger.com/blogger/1955/1163/400/LabDoor.jpg
I am thinking that it it, too, will not reflect properly in Safari. Hopefully now that I have narrowed it down to this very specific scenario, we can work together to find a solution.
Khlo,
I have to say that I love this bit of scripting that you came up with. I finally got it working with lightbox. I know you have noclue how to fix the scaling by html error we ran into earlier, but what ever.
for all those you’d like to check out my site here you go penguin.lhup.edu/~ewhite2/exgallery.html
It’s not much, I made this site out of pure boredom and have taught myself how to do everything, so i hope you like it.
Ok Josh, that narrows it down
There is one line of code where we used slightly different code for Safari to solve a few issues.
On line 123:
if (navigator.appVersion.indexOf('WebKit') != -1) { context.fill(); } else { context.fillRect(0, 0, reflectionWidth, reflectionHeight*2); }I wonder if this code could be causing the issues in Safari. One thing you could try is to replace that section of the code with the following:
However, I’m unsure whether this will work at all in Safari.
Beyond this, I can’t really help as I don’t know anything about the ins and outs of Safari. If only there was a version of Safari for Windows or Apple made it easy for web developers to actually test stuff in Safari
Thanks for the help, khlo, I think we are getting closer. As you’d suspected, replacing that section of code made it not work in Safari at all. However, when I tinker with the 2nd line just a bit, changing it from, say, context.fill(); to context.fill(0); for example… the reflection appears in with the proper, full height (ie: no gap!) but also, unfortunately, at full opacity. Here is a page about how Safari handles the Canvas tag, maybe it will help?
http://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html
It looks to me that context.fill() doesn’t have any arguments.
When you mean full opacity, I expect you mean the whole reflection is shown at full opacity (no gradient)?. What happens if you remove that line altogether?
Yes, by “full opacity” I mean “no fading gradient.” The “reflection” is still half of the original, upside-down (as always) but now it starts in the right place without the white gap (which is the step in the right direction, I’m thinking.) Unfortunately it’s just mirror image of the original’s color, without the fading opacity/gradient applied. The same thing happens, BTW, if I remove the context.fill(); line altogether. I have emailed the fellow who authored this page, since he seemed to know much about this subject, and his site has good links: http://www.liquidx.net/canvasgraphjs/ Unfortunately he hasn’t written back yet. Safari’s WebKit engine is based on Konqueror (KHTML) if that helps any. I’ve tested the latest build from here, with the same results, BTW: http://webkit.opendarwin.org/quality/reporting.html
The thing that is most vexing about this issue is that it only gets screwy with vertically oriented images and Safari. Horizontal ones get reflected wonderfully.
Screenshot to illustrate what I am talking about. This is what happens when I edit or remove the “context.fill(0);” line: http://www.userfriendlyla.com/reflectiontest/screenshotnoopacity.jpg
So it the script appears to format the reflection properly, but once context.fill is called to make it that reflect fade into opacity, it fails to do so properly on vertically oriented pictures. Wondering if this is a bug in Safari’s handling of the Class tag. Or maybe (hopefully?) there’s a workaround.
Khlo, minor breakthrough over here. If I change the line “var gradient = context.createLinearGradient(0, reflectionHeight, 0, reflectionWidth);” to this: “var gradient = context.createLinearGradient(0, reflectionHeight, 0, reflectionWidth*2);” the reflection renders perfectly for portrait (vertical) pics in Safari. But unfortunately it turns off completely for landscape (horizontal) ones. Any way for the javascript to detect the picture’s orientation, and adjust accordingly with some sort of if/then statement?
And if I change the line to “var gradient = context.createLinearGradient(0, reflectionHeight/2, 0, reflectionWidth*2);” then the faded reflection is lined up in Safari for both vertical and horizontal images. BUT it also loses the effect where the fade gradually increases as it extends downward (and yes, it loses it in all browsers.) Getting closer… Example here: http://www.userfriendlyla.com/reflectiontest/index2.html
Actually, emptying the cache and reloading the page helped. With the line changed to “var gradient = context.createLinearGradient(0, reflectionHeight, 0, reflectionWidth*2);” I am now getting proper reflection in portrait and landscape and horizontal images in Safari. The last remaining issue is that now the horizontal image’s reflections (the ones that were fine before) are much lighter now… almost to the point of being barely noticeable.
Nice
I wonder if you’ve tried version 0.4. It’d be interesting to see whether it worked properly in v0.4; if so this might provide a few clues to the problem. You can find reflection.js 0.4 here. Note you’ll also need prototype.js to use v0.4; just include it into your webpage.
Just uploaded version 0.4 as well as prototype.js (which is not included in your current .zip by the way, I guessed at the filepath on your server) and also included this line in my HTML “”…. but this didn’t work, in Safari or Camino/Firefox on the Mac. No reflections at all on my test page. Not sure if I’m doing something wrong on the install, or if the version just didn’t work. I’m back to version 1.0 just fiddling with numbers having no idea what I am doing, but I certainly feel like I am close.
Dear lordy, I’ve pulled out my fair share of hair over this. I’ve changed every variable, tinkering in an arena I know nothing about. And yet I feel so close, I can taste it! LOL. Khlo, what can I do, send you a Mac? Anything to get me out of this hellhole, please, save me.
Regarding reflection v0.4 make sure your using the following code:
You’ll have to load prototype.js first. The only reason why I think it might be a good idea to check version 0.4 is because no body reported any issues in Safari with this version. The bug could have been caused from a modification I made between 0.4 and 1.0 which would narrow down the possible cause a lot.
I’ve tested it in the three Windows browsers I’ve been able to come across so any issue must be a Safari-specific issue and Apple don’t make a version of Safari available for Windows.
Maybe I’m doing something wrong, maybe the prototype.js I grabbed is the wrong version, but when I reverted to reflection.js version 0.4 and uploaded prototype.js and added those lines to my HTML, I’m now not getting no reflection effect in any browser.
And yes, I recognize that this is a Safari-specific issue, but the fact that I am able to get a proper reflection for portrait images in the browser by changing code to reflectionWidth*2, tells me that it is a problem that can be worked around. Now all that needs to be done is to bring the reflection back to it’s proper level of fade… this “fix” makes the reflection of landscape images barely visible. I volunteer anything you need to help fix this, whether it’s my time, communication via email, IM or phone. You can VPN into my my Mac system if you like. Hell, I’d send you a old Mac laptop to borrow if you were agreeable.
Khlo: if you put up a test page using reflection.js version 0.4 I can check it with Safari and tell you if it works.
Ok, I’ll prepare a page which uses reflection.js v0.4. I’ll also get out my Gentoo Linux install and install Konqueror. That renders using KHTML so it might be a way for me to be able to test it without getting a mac.
I have uploaded version 0.4 of reflection.js here with the monkey picture example added in the readme.html file. I got a reflection in Firefox so it’s set up correctly. I haven’t yet tried it in KHTML.
Hello again khlo. I tested that 0.4 version, and have the same gap issue underneath the monkey. It’s fixed when I change that one like to “var gradient = context.createLinearGradient(0, canvasHeight, 0, canvasWidth*2);” just like it was in version 1.0… but as mentioned before, then reflections of portrait images are much lighter too, as a result. Still getting my own feet wet with javascript, but what about making an if choice? IE: with Safari, if p.height of an image is greater than p.width, do this… else do that. Also, ideally for REALLY tall portrait images, the reflection would be 1/3 of the image, not 1/2.
Yes, that solution could work if it turns out the reason it isn’t working correctly is because p.height or p.width is incorrect.
For the next version, I’d like to add a way of configuring properly how much of the reflection you want to see using classes such as reflect33 for a third, reflect20 for a fifth, etc. Would be nice to also add a scripted way to add a reflection so it’d work with lightbox and stuff.
Would love to try and fix Safari first though
Now I’m hypothesising here, but I wonder if it could be the following line causing the issue:
Now it’s possible that perhaps the gradient is larger than the actual reflection or something and Safari decides to make the canvas larger so it can show the whole reflection. This might account for why by changing it to context.fill(0) it fixes the issue; I can’t think of anything that change actually does apart from disable the gradient.
It’s worth playing with those values (maybe try reflectionHeight/2) and seeing if you get anywhere. I’m (still) trying to set up Konqueror and see whether the issue appears in it.
Just futzing around here… if I change it to var gradient = context.createLinearGradient(0, reflectionHeight*2, 0, reflectionWidth/4); the reflection dimensions are correct, but the fade direction is wrong. It fades from bottom to top instead of top to bottom. If I could only reverse it…
I think maybe I got it? I reversed reflectionHeight and reflectionWidth and added a *4 in there: “var gradient = context.createLinearGradient(0, reflectionWidth*4, 0, reflectionHeight);”
Testing out now, and I’m somewhat in shock, but I think it might be working…
Yep, it works alright, in Safari, for portrait and landscape images. Only now, the reflections don’t fade properly in Firefox 1.5.
Fantastic
That shouldn’t be a problem as it’s possible to do a detect for Safari and to offer Safari that line of code. We do browser detection to give Safari context.fill().
Glad I was able to help. I suppose my work here is done; I’ll wait for you to update the code (with the proper Safari vs. Firefox detection) so I can use the code on my forums. If you’d like to email me or offer the code here for beta testing I’d be happy to check it out.
Ok great. It might take a few days as I’m a bit busy at the moment; I’ll let you know when I have an update for testing.
I made a WordPress plugin out of your reflection.js script, with full credits to your site in my files. May I release it?
Sure, go ahead! It’s open source
Thanks! Here it is:
http://siuyee.com/projects/wp-wetfloor
Looks fantastic!
Great update, thanks khlo. About to incorporate it into the vBulletin mod. Curious to know if there’s a way now to make the script a tiny bit smarter… what I mean by that is, perhaps regress properly in Firefox 1.5 when it encounters a transparent GIF (since they render badly, with jaggies, as mentioned above.) Also would be nice to be able to set it so that landscape images (where “width > height”) get 50% reflection, but portrait images (where “height > width” get 33% reflection. Are those tweaks possible?
Yes, you could but it’s nowhere near as tidy as class="reflect". You’ll have to use a conditional and the Reflection.add() function.
Something like this:
function magicReflect(image) {if (image.height > image.width) {Reflection.add(image, { height: 1/3 });} else {Reflection.add(image, { height: 1/2 });}}And onload="magicReflect(this)" to the image. It’s not as tidy and no promises that it will work but something along those lines should work.
I see you have added reflection.add but where do I modify the Lightbox code to make the larger image have a reflection?
Thanks
Please use the Reflection.js version 1.6 blog entry .