Reflection.js 1.8
March 7th, 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?
There are several improvements especially for Internet Explorer – firstly, reflections now show below the image as they should in IE standards mode. With scaled images in IE, reflections are no longer stretched. As some modern browsers support document.getElementsByClassName out of the box, Reflection.js will no longer overwrite this function. And finally, a copy of reflect-o-matic has been bundled with the download for ease of use.
Demo
See a demo of reflection.js 1.8 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! I’m very pleased that the script was downloaded from this website for the 100,000th time this month. 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!
| About Ken | |
 | My mission is to demystify the world of mobile technology for general audiences and to communicate how mobile technology can enhance our every aspect of our daily lives. I've been maintaining the Ken's Tech Tips website since 2004. I have experience communicating mobile technology and presenting new mobile products both online and offline at various trade shows and events. If you'd like to get in touch, please drop me an e-mail. |
- Javascript , Reflection , Web 2.0 , Web Development
- Comments(23)
I primary had a small issue with it in IE7. When I applied a padding CSS to the image (on which class=”reflect” was set), the reflected part of the image was wider, exactly the amount of padding pixels on the left + padding pixels on the right wider.
I solved this though by using margin in place of padding.
It’s just a notice, and I hope it’ll help other people having problems with this.
Further, great release you got here! Absolutely a high-quality script
Is the Reflection.js file licensed under any licenses (e.g. GPL, Apache)? I would like to include it in a theme that I am contributing back to the Drupal community.
Hi,
Yes. Reflection.js is BSD-licensed which means you can modify, edit, redistribute and so on as you wish providing you leave the credit and copyright in!
http://www.opensource.org/licenses/bsd-license.php
hallo Cow! just one short question regarding this script. I tried to use it but somehow it doesn’t show up namely here at http://www.synthdicate.com/2008/03/10/patenbrigade-wolff-demokratischer-sektor, so i wonder it is enough to just upload the js file to the server, call it from the header.php and then use it via html as …img class=”reflect” src… with default sets?
or this class should be described in CSS somehow?
thanx a ton!
Hey,
No, you shouldn’t need to describe it in CSS. Try including reflection.js after your other JS files – it’s possible that another of the scripts is overwriting reflection’s window.onload event so the script doesn’t add reflections when the page loads.
hi again! yes you were totally right, this script is conflicting with this one http://www.synthdicate.com/wp-content/themes/dreams/includes/applesearch.js which make search bar looks like an apple thing.
and reflection works only when i disable applesearch script… maybe soem sort of a workaround if you don;t mind?
and as an addition it turns out that applesearch.js has a priority somehow rather than reflection.js no matter in what consequence they both are being called from header.php…
That’s odd, Reflection.js should preserve existing onload events if you load it after other scripts! But if it isn’t, copy the onload code from reflection.js into Applesearch’s onload function; that should do it.
ok, you mean copy only
window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }
or the whole
var previousOnload = window.onload;
window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }
?
Yeah addReflections(); is all you need to start the script off and going.
i’m sorry Cow, i’m not really experience with js, so would like to bother you again.
thus i need to put the only this line
window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }
into the very end of applesearch.js, right?
I’ve noticed that with Safari 3 and Firefox 3 (Mac), if you have more than one image using reflection, then only every image gets reflected. The issue exists just by viewing the demo page. Great script otherwise tho!
well Cow i think ive overcome it due to your support!
check it at http://www.synthdicate.com/2008/03/10/patenbrigade-wolff-demokratischer-sektor
now seems both JS work smoothly altogether.
hope the same result on your side!
many best regards for your concern!
This is a great script, just amazing. I’m using it in a photography portfolio site I’m building for a friend. I’m having trouble centering images with reflections though, they are centred for the instant before the reflection pops in as the page loads, but as soon as it does, the image pops over to the left. Can you think of any reason for this?
I’m using it here for example:
http://www.cliveframpton.com/index.php/gallery/landscapes/empire-state-building/
It’s all very unfinished, but eventually you will be able to browse through the images on pages like this.
Any ideas?
Once again, GREAT script…!
®
The onload-trigger substitution does not work in Safari and IE7, if a XML/XSL-page containing ‘reflection images’ is interpreted by the browser. FF2 does it. Commenting out the onload-lines in your script-file and adding the class-call-function addReflections() directly into the XSL-script does work
Maybe you give a hint in your description, how to do it manually, if there are load-problems.
It would be also nice, if you include a complete (BSD or MIT) licence-description-file in your download-zip … as usual behavior we like & need it.
Hello!
Nice little piece of script to make display pictures a little more appealing. It work great for me (some reflections not working with FF3 though) but I have a problem with IE7: when “reflecting” a picture that happens to be a link as well, even though the original has , the reflection will generate the default blue border corresponding to a link.
Is there a way to detect the border size in the script and avoid generating it?
Example of what I mean: http://japanld.online.fr/_misc/reflect-border.png
Rgds,
Julien
Richard: I’m not sure whats happening but you can check out some of the demo files I provided for examples of aligned images, etc.
Wolf: Good idea! Will do!
Julien: Try setting the border of canvas to 0 in CSS e.g. canvas { border: 0; } You could make it only apply to reflected images using the class .reflected
Hey!
Thanks for the great script. Just thought I’d let you know of a bug that occurs with the new webkit (Safari 3.1) build:
Safari now supports a native ‘getElementsByClassName’. Your script checks to see if the document already has this method installed (rightfully so in the event someone uses your script with prototype or another framework, etc.), and if so it delegates to it vs. the internal means of creating the elements stack.
The problem is – the way safari’s ‘getElementsByClassName’ works is it appears to return a stack of the elements by class name, but when you modify the class name of those elements, the stack itself updates (they are no longer present). So in essence, when your add reflection method changes the class to ‘reflected’ – those elements are no longer popped from the ‘elementsByClassName’ stack and end up messing up its evident length.
The result is only every other element renders because the pointer/count is messed up…
Workaround options:
- force your script to use your own internal ‘getElementsByClassName’ since it does not make a reference to a stack that elements get removed from as their class names change
- do not change the class names to ‘reflected’
- in your auto-render method, loop backwards from the max element to 0 so that when element’s class names are being modified they are always the last element in the stack (lifo).
Hope this helps!
Cow,
Thanks for the tip on the cover (I found it in a earlier post too, I guess I was too lazy to look backwards, sorry about that). Instead of changing my img or canvas still as CSS level I simply added:
reflection.style.border = ’0px’;
A few lines after:
var reflection = document.createElement(‘img’);
And it seems to achieve the same thing!
Thanks,
Julien
hallo Cow! one more question: what parameter should be changed in the reflection.js to make the image look a bit turned from left to right?
well to illustrate my mean visit this page http://www.majorrecords.de/news
there are albums’ covers on the right-middle part of the page, under AKTUELLE-VEROFFENTLICHUNGEN section
see?
Thanks for the heads up alinear! I decided to go for the first option. I figured that for backwards compatibility I’d need to provide a getElementsByClassName function and that given it was being defined by the script, it might as well be used. It’s been renamed to document.myGetElementsByClassName. I had given thought to getting the script to work with the native getElementsByClassName function which may be much faster but it’d add another code path.
I’ve released version 1.9 with the fix!
And iSynth: I’m afraid that website has the album cover and reflection as an image! You could check out a script called reflex.js which is very similar to reflection.js but allows you to tilt images, etc.
Hi!
is there any workaround to have reflection for more than a class?
i.e.: Class1: reflected, Class2=imagereflect
I really like the script but I was wonder if there was a way to make the reflection overlap divs below it? As in I am using it for part of a header and would like the reflected image to overlap the top part of the body div which is located right below the header div.