Reflection.js 1.9
March 21st, 2008
Reflection.js is a cross platform 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 5KB.
What’s new?
Version 1.9 fixes an issue in Firefox 3, Safari 3.1 and other browsers which implement the document.getElementsByClassName function natively. In older versions of reflection.js, every second image will get reflected.
Demo
See a demo of reflection.js 1.9 in action or try it out with one of your images on the reflect-o-matic.
The reflection.js download includes some more examples of how reflection.js can be used including varying the height, opacity and responding to user actions.
Thanks!
Thanks once again to everyone who has used the script, left feedback and helped to iron out any bugs or issues over the last years! If you use the script on one of your site or photo galleries, please leave a comment! It’s really fantastic seeing how people put the script to use!
- Reflection , Web 2.0 , Web Development
- Comments(35)
Hi,
Good job it works really well… in Firefox. I have a layered transparent fireworks PNG, and I applied the reflect class to it and in internet explorer it has this black halo around it. Is there any way for me to fix this? Should I just flatten the PNG? I can’t really convert it to another format as it needs to be a high quality transparent file. I hope you can help.
Ben
Hi,
Just to update what I said earlier, I did flatten it but now it is no longer transparent, and just to clarify the blach halo was on the reflection.
Thanks,
Ben
Thanks for Reflection 1.9!
It will be the “reflection engine” for LDDb.com from now on (you might want to update the Readme showing up v1.7) and eventually add the line of code I proposed to avoid showing a HREF border around a clickable picture. Otherwise it looks good! Example:
http://www.lddb.com/laserdisc/46/PILF-2830/Star-Wars:-The-Phantom-Menace-(1999)
Thanks,
Julien
Hi there,
I love your work, many thanks.
I use reflections.js on my web-site, however, today when I implemented greybox http://orangoo.com/labs/GreyBox/, the reflections disappeared, any idea why?
Your help will be greatly appreciated
Thanks
nevena
Hi mate,
Thanks for the great reflection script. I just used it within a project of my own but I had to hack it a bit as I needed the reflection to fill 100% of it’s container which gets dynamically resized.
My code is rather dirty in places and there are some real rough edges that I’m not proud of. That said, it’s definitely on it’s way to being something cool.
Please take a look at how nicely your reflections fit in with my javascript-powered iPod style scroll wheel and cover flow…
http://www.classycode.co.uk/CoverFlow
Cheers,
Raith
Raith:
Your script is simply stunning! Despite what you claim about “rough edges”, I am extremely impressed at how small your script files are. I’ve blogged about this, hope you don’t mind!
http://cow.neondragon.net/index.php/another-coverflow-script
If you don’t mind me asking, how long did the script take to write?
Cow
Why is it reflection.js will not work when I have an onLoad= in the body of my html document. as soon as I remove the snippet of code below, the javascript reflection appears again. Anyone know?
Hi,
I’ve used reflection.js for a blogger implementation. The file that enables reflection on blogger.com is enableReflect.js.
To have reflection on all your blogger posts, have these two lines before in your blogger template.
<script src=’http:///reflection.js’ type=’text/javascript’/>
<script src=’http:///enableReflect.js’ type=’text/javascript’/>
That’s it
Get your copy of enableReflect from here:
http://divyaratna.googlepages.com/enableReflect.js
Please avoid hotlinking to the js file…
If u like it, please send me a note. You can see the script in action at http://www.Hyd-Masti.com
Cheers,
Div
Nice script Div
I noticed though that the enableReflect.js script that was posted above adds a Hyd-Masti.com alt tag to every image. I’m not sure if this is intentional or whether it was just left in.
Great job! Albeit IE5.5+ support isn’t entirely true. Filters are not supported with IE8, nor is any type of opacity or VML (yet at least).
Hi,
it doesn’t work well for me in Safari 3.1 (5525.13).
I try this :
Reflection with CSS
Reflection with Javascript
//
I have a reflection with the first image, but not the second one. This is the code viewed with the Web Inspector :
Greg
Hi Greg! Check you’re using Reflection.js version *1.9* as that problem should be solved.
For more info:
http://cow.neondragon.net/index.php/documentgetelementsbyclassname-compatibility
Hi Cow,
U’re rite…I was using alt to print debug messages while developing the script…I’ve removed it now.
I’ve made a post about this script on my personal blog here:
http://variantday.blogspot.com/2008/04/reflectionjs-blogger-implementation.html
I’ll post updates to the script there…that way it will be more manageable. Do you think it would be easily accessible to many people if you mention this in your list of implementations?
Cheers,
Div
Hi Div,
Looks really cool! And yeah I’ve added it to the list of implementations so all the Blogger users should be able to find your script! Your script is certainly a fantastic addition to our collection!
Cheers,
Cow
I’ve made several failed attempts at this on my own (and failed), so now I’m asking anyone who may know…
I would like to add a gap between the image and the reflection… giving it the appearance of floating. Can anyone point me in the right direction on this?
hi,
its simply superb.
…….really………….cool
Is it just me, or if you apply the reflection on a centered image, it always makes it align to the left?
Other than that, great work!
The reflection tool keeps breaking my inline UL to a new line any ideas?
Does anyone know how to make the images centered with Reflection on????
Please Help!!! =D
actually i found a workaround to center the image. i use css and i do margin=auto
you can see an example of the centered image thing at http://www.lelandrobotics.com
hi!
nice jb!
i use reflection.js from a while, but now i found some problems adding the Fancy Zoom js in my pages.
there might be some variable or something that crash…
so the fanczoom works and the reflection does not anymore..
i’m trying to find out the problem, but njothing yet.
does anyone know anything about that?!
thank you
Looks wonderful, thank you
Would it be able to be used on large text?
Hi,
It’s a very simple solution for adding reflection. But I have a problem in IE6,7. Look here: http://3v-art.ru/picture/1/
Reflection move right from picture. In Mozilla & Opera it’s work correctly.
I fixed it, just added in CSS: img { border: 0; }
Hi,
Just to let you know we’re using it as a component in our CMS. We show a example of a reflection on a normal image + a dynamically created text-image. It’s looking great and hereby want to thank you for this great job!!
If you like it you can place us to on your examples page?! The url= http://www.cms-website-beheer.nl/cms/componenten/foto-met-spiegeling.aspx
greetings,
Chris
Very cool; just what I need !
Trying to get it to work with javascript in-line image replacement where I mouseover a title and the target image gets replaced; the image replaces but the reflection is still from the first image. The ‘Reflect’ class is not getting applied to the new image. Any ideas on how to overcome this annoyance ?
Thanks
-snip-
function roll_over(img_name, img_src) { document[img_name].src = img_src; }
then
onmouseover=”roll_over(’main’,'image2.jpg’);”
and
– unsnip –
Hello,
Can I know v1.9 can work with jquery style? im using v1.6 before.
as the syntax now is …if want add a reflection to an image ( xxx is id of the image )
Reflection.add(document.getElementById(”xxx”), { height: 0.4, opacity : 0.5});
if v1.6 , it can be
$(’#xxx’).reflect( … )
Thanks/Davis.
For me it seems like all classes are gonna be removed from an image after the reflection script runs over. But as “/* Copy original image’s classes & styles to div */” says, I guess it shouldn’t? I loose my padding borders which I don’t wanna add by “style”.
i am using reflection.js 1.9
i found a bug (only in ie6)
/* Fix hyperlinks */
if(p.parentElement.tagName == ‘A’) {
var d = document.createElement(’a');
d.href = p.parentElement.href;
}
example: when p.parentElement.href like this(php)
and $o is other language, than
this link will become wrong.
In April, Droogie wrote “Why is it reflection.js will not work when I have an onLoad= in the body of my html document. as soon as I remove the snippet of code below, the javascript reflection appears again. Anyone know?”
I see that it works OK in Opera, but not in Firefox3, IE7 or Safari3 (all on WinXP).
I’d like to use this script as it’s really cool, but can’t if it’s incompatible with “onload” functions.
Alistair
I recently tried to use this on a private installation of “Ampache” - a web-based music library/playback app. The only thing is, the app uses ajax to refresh some parts of the page periodically. The images refreshed in these areas seem to be ignored by the reflection code, and when I tried to call the code directly as part of the refresh process, only some of the images got reflections, while some didn’t. Do you have any idea why the latter occurs?
Hi Jonny,
Are you using the onload=”Reflection.add(this)” event? I’d recommend putting an onload onto the actual image: perhaps it’s not working because the event is being called before the image actually loads.
The script would be great, if it didn’t mess around the layout.
If you have a “float: left” (no matter how small) it will never render the image (no matter how small) beside the floating element. It will always render it below
Too sad. If you have pages with no layout it works perfect…
Hi!
Great script. Although it makes no practical difference I prefer to use prototype events rather than hijack the onload handler.
e.g.
Event.observe(window, ‘load’, function() {
addReflections();
}