Reflection.js 2.0
September 30th, 2008
I’m pleased to announce the release of Reflection.js 2.0 - a cross-browser script to add reflections to images on your webpage.
It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome and Opera 9+. 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 2.0 adds support for the new Google Chrome browser. Cheers to Levenez for the heads-up on this. This version has also been tested in Internet Explorer 8 and works absolutely fine and dandy!
Demo
See a demo of reflection.js 2.0 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(19)
Digg
StumbleUpon
Just updated my site and it works great! Keep up the great work!
Just added the script to my blog to try it out.
Just tested it, works perfect in most of the browsers.
Just a correction: It does not work well on IE6 so, on the readme page, where it says that it’s supported from IE5.5 up it’s not very accurate.
Other than that, thanks and great job
Do you how how to make to get CSS Tooltip work with reflection.js? I tried many CSS Tooltip (info bubble) samples, but none of them work due to the way reflection.js wraps everything in a div tag.
It seems Safari and Firefox do no react the same way. As soon as i remove the “reflect” attributes to me images, tooltip css works like a charm.
Here is the code I use :
a.tooltip {
position:relative; /*this is the key*/
z-index:24;
}
a.tooltip span {
display:none;
}
a.tooltip:hover {
border: 0;
position: relative;
z-index: 25;
text-decoration:none;
}
a.tooltip:hover span {
font-style: normal;
display:block;
position:absolute;
bottom: 0px;
left:60px;
padding: 10px;
background-color: rgba(0,0,0,0.9);
width:200px;
text-align:left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
You can see how strangely it behaves on this page :
http://www.1dlabel.fr/boutik.html
And how it works well on this one (since I removed the reflection tags) :
http://www.1dlabel.fr/presse.html
Thanks in advance for your help.
Is it possible to get rid of borders in the reflection when the image is wrapped with an a href tag? I’ve tried a number of things and none seem to make any difference.
The image to be reflected is set to border: none, but the reflection of the image always shows a border in IE7, unless it is not a link. I’ve lost an hour trying to work around this, so any help is appreciated.
Great little script this, works flawlessly in FF!
After diggin through the reflectomatic.css file, getting rid of borders on the reflection just requires one rule…
img { border: none;}
A blanket rule for all images did the trick. Can’t believe it was so simple (facepalm)!
I am stumped. I have successfully integrated reflection.js into my portfolio site, but for one important problem. I am using JQuery.
I have two sections - web and graphics. For the web section, I am running a jquery cycle slideshow which shows divs containing the images and some text. Each div is a slide. The reflections show up without a problem on these - http://maryahayne.com/web.htm
In the graphics section there are three slideshows possible. They are activated by clicking on a link (jQuery $(’.link’).click(function() {…}). The slideshows work fine, and the reflections work fine EXCEPT in Internet Explorer - testing in 6 and 7. It all seems to come down to the click(function{} somehow.
The images are all loaded into the divs at when the page is loaded so I don’t see what the problem could be. I have spent two days on this, and now wonder if it could be a bug?
If you can shed light, I would MUCH appreciate it.
Cheers, Mary
Forgot to add the URL with the problem. Please view in IE…
http://maryahayne.com/graphics.htm
Awesome wee script. Nice and easy to set up, sweet.
Cheers
Michael
Your reflection script is awesome!
However, I cannot seem to combine it with other classes (in WebKit). For example, I would expect the CSS code below to shrink my image to a width of 160 pixels before applying the reflection, but instead only the reflection is resize?!
img.polaroid {
width: 160px;
}
Do you have any ideas how to fix this?
Thanks!
-Bernd
Great Job! Love this effect!
It works very well. But in thid f**cking Internet Explorer 6 it isnt working.
If you got an idea why please contact me.
The page where the effect is used is the menu-link on the left called “Info”.
thnx. Moe
Great job !
Will be amazing with an apple-like image y-axis rotation option !
We let you choosing the right or left effect….
Thanks . Nicolas
I want my image display with border around but not on the reflected image. How to do this? is it a way?
Hi,
I added the following line of code to support the anchor tag targets (line 70):
d.target = p.parentElement.target;
cheers
J Lo
Hi,
I love this great script it gives a wow-factor to every website.
Since I want to use this script in a CMS I want to make it as comfortable as possible for the CMS-Admins that don’t know much about HTML so they wouldn’t find the right place where to insert the class=”reflect” >>> So I wonder if the script could be easily changed so that the reflection works on the alt-Tag >>> alt=”reflect” cause the CMS offers an input-field when inserting the image, so the CMS-users could easily add the reflection to the desired pix.
Hope someone can help me with that!
Thanks in advance
smik
Wondering whether it’s possible to use this fantastic effect in conjunction with other scripts …. I’m looking to try and incorporate it with a flip-book - dynamic page turning effect. Haven’t been able to get it to work yet ….
Thanks,
Graeme
Would it be possible to add a parameter ‘offset’ that would separate the image from the reflection vertically. This would give it the effect of the image floating slightly off of the reflective surface. I would try but I’m no JS master.
Regards,
Sten
The seme problem…
There are a big problem with IE, I have several links to open in target=”_blank” but it opens the link in the same page!
Great script, but it’s a pitty that it doesn’t work with images with style=”width:100%;”. In this case the reflection stretches over 100% of the containing element and the original image is set to it’s actual width in px.