Reflection.js 1.6
July 14th, 2006
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?
Just a small bug fix update to Reflection.js fixing two bugs:
- Don’t create a <div> in browsers not supporting canvas but supporting JS
- Fix gap between image and reflection in XHTML Strict
Demo
See a demo of reflection.js 1.6 in action.
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.
Thank you!
I should once again say thanks to all the people who’ve used the script, left their feedback and helped iron out any issues. If you’ve used the script on one of your sites or galleries, please leave a comment! It’s great seeing how people put this script to use.
- Javascript , Reflection , Web 2.0 , Web Development
- Comments(151)
Digg
StumbleUpon
If you’ve got any questions on how to use Reflection.js or problems, it’s worth taking a look around the comments for version 1.5 too. The usage of the two versions are the same.
Not sure, but this is weird.
Did the refloectomatic for http://www.appliedwebhost.com/temp.gif and the image doesn’t appear right in the reflection.
That’s kinda strange. There is a known issue with Firefox and GIF transparencies so this may be to do with it.
I created a plugin wrapper for LifeType to allow users of LifeType to use Reflection.js.
Reflection.js was very easy to integrate.
Thank you,
Paul
Hi Khlo!
I have applied the Reflections 1.6 and my Lightbox mod and for some strange reason it isn’t working in IE. Firefox is fine. I did notice however it doesn’t seem to matter what version of Reflections it is. I have pin pointed it down to the Lightbox.js. It seems to be doubling the size of the background needed. Any help would be greatly appreciated. Here’s the link http://www.comfypad.com/test.php
Thanks
Jon
Scrap that last comment!
It is the reflections file, 1.5 is fine 1.6 seems to double the size of the image in the lightbox.
Just thought I should let you know
Absolutly fabulous. I just installed rmagick and graphicsmagick to make reflective images for my site and then I stumbled on this. Great job! will test it out in a day or two. The sample reflections looks far better than once I’ve seen.
Kudos!
less than 5 Kb ?
why shouldn’t be less than 4 Kb
// getElementsByClassName with JSL [http://www.devpro.it/JSL/]document.getElementsByClassName = function(className) { var result = [], re = new RegExp("\\b".concat(className, "\\b")); for(var i = 0, list = document.getElementsByTagName("*") || document.all, j = list.length; i < j; i++) result.push(list[i]); return result.filter(function(){return re.test(arguments[0].className)});}; var Reflection = { defaultHeight : 0.5, defaultOpacity: 0.5, add: function(image, options) { var reflectionHeight = 0, div = document.createElement("div"), reflection = {}, context = {}, gradient, doptions = {"height":this.defaultHeight, "opacity":this.defaultOpacity}; this.remove(image); if(options) { if(!options.height) options.height = doptions.height; if(!options.opacity) options.opacity = doptions.opacity; } else options = doptions; reflectionHeight = Math.floor(image.height * options.height); div.className = image.className.replace(/\breflect\b/, ""); image.className = "reflected"; div.style.cssText = image.style.cssText; image.style.cssText = "vertical-align: bottom"; if(document.all && !window.opera) { reflection = document.createElement("img"); reflection.src = image.src; reflection.style.width = image.width + "px"; reflection.style.marginBottom = "-".concat(image.height - reflectionHeight, "px"); reflection.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=".concat(options.opacity*100, ",style=1,finishOpacity=0,startx=0,starty=0,finishx=0,finishy=", options.height*100, ")"); } else { reflection = document.createElement("canvas"); reflection.style.height = reflectionHeight + "px"; reflection.style.width = image.width + "px"; reflection.height = reflectionHeight; reflection.width = image.width; context = reflection.getContext("2d"); context.save(); context.translate(0,image.height-1); context.scale(1,-1); context.drawImage(image, 0, 0, image.width, image.height); context.restore(); context.globalCompositeOperation = "destination-out"; gradient = context.createLinearGradient(0, 0, 0, reflectionHeight); gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)"); gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options.opacity)+")"); context.fillStyle = gradient; if (navigator.appVersion.indexOf("WebKit") !== -1) context.fill(); else context.fillRect(0, 0, image.width, reflectionHeight*2); }; div.style.width = image.width + "px"; div.style.height = Math.floor(image.height*(1+options.height)) + "px"; image.parentNode.replaceChild(div, image); div.appendChild(image); div.appendChild(reflection); }, remove: function(image) { if (image.className == "reflected") { image.className = image.parentNode.className; image.parentNode.parentNode.replaceChild(image, image.parentNode); } }}; function addReflections() { for(var i = 0, rimages = document.getElementsByClassName("reflect"); i < rimages.length; i++) { var rheight = null, ropacity = null, classes = rimages[i].className.split(' '); for (var j = 0; j < classes.length; j++) { if (classes[j].indexOf("rheight") == 0) rheight = classes[j].substring(7)/100; else if (classes[j].indexOf("ropacity") == 0) ropacity = classes[j].substring(8)/100; }; Reflection.add(rimages[i], { height: rheight, opacity : ropacity}); } }; var previousOnload = window.onload;window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }Too bad that you can’t put a link in the image you’re reflecting.
I’ve tested your great JS in a lot of browsers and only in IE it is not possible to set an anchor and link the image with reflection Will it be possible in next version? Thanks for your great job!
Hello, I’ve been trying to find out a way to send you some feedback but it looks like there’s no contact form in your portal. BTW, I wanted to let you know that I’ve created an extender control for the Atlas Control Toolkit by Microsoft with your reflection script. You can find my blog post about it here.
Here’s a quick and dirty work-around the the IE link issue. Add this at line 78 in the script:
if (p.parentNode.href) {
p.style.cssText = ‘cursor: pointer;’;
p.onclick = function () { window.location = p.parentNode.parentNode.href; };
}
Comment on:
http://cow.neondragon.net/stuff/reflection/
1) phpBB Reflection - phpBB Modification has an error: check the double class="
2) Full integration into phpbb: http://phpbbinstallers.com/board/viewtopic.php?p=1910#1910
if you’re using prototype.js with this you’d better take out the
getElementsByClassName function in reflection.js because it will break any code you have that relies on prototype’s implementation (which lets you to filter by parent container as well as document). Spent hours trying to figure out why my getElementsByClassName were suddenly returning ALL elements in my document.
Thanks for the comments and thoughts; Ramon - I’ll add the link to the phpBB modification to the reflection.js page.
Great job,
Images embedded in tag is not correctly reflected under firefox, it’s because firefox automatically add borders to images embedded in . So additional css retouch should be considered if you want to integrate the effect.
A margin of about 2-3px between the original image and the canvas would be better, it helps people recognize the original image! What do you think?? I’ve succesfully integrated reflection.js into my site http://shawking.free.fr
I’d like to say images embedded in tag A
See bug#351113 at
https://bugzilla.mozilla.org/show_bug.cgi?id=351113
Great job, and i’d like to know if i’m a blogger beta user can i use Reflection.js? Thanks.
Very cool! I tested this out and I get a weird gap in Firefox.
http://haacked.com/archive/2006/09/14/Yay_More_Gratuitous_Special_Effects_For_My_Blog__Reflections.aspx
I forgot to mention, it seems to work fine in IE 6
I’ve got a problem with images which are also a link to a webpage. In Firefox, it works perfect, buf if you want to click on a image with reflection and when it’s also a link, it appears that it doesn’t load.
I’ve got a simple - but not better - solution. Use the onclick action
<img src="test.jpg" class="reflect rheight32" onclick="window.location=’index.php’" style="cursor:pointer;" />
Than it will work as a link again. But I hope you can fix the problem without this Onclick action
I think it is great! very cool!
I had only a little problem with images inside a DIV with text-align: center;
If i apply reflection to these, images will align to the left side of the div.
any suggestion?
Documentation says have to have reflection.js and prototype.js
Downloaded 1.6 zip file does not contain prototype.js
Where is it?
Whoops; Reflection.js 1.6 doesn’t require Prototype.js anymore. This must be a documentation mistake.
Hi, Great Stuff.
One problem I am having,
If I have an onLoad event on the page the reflection does not appear.
This is driving me nuts - any suggestions VERY gratefully recieved
Hi,
I believe the onload="" attribute on the body element is deprecated. Instead of assigning it there, you could use a <script> block in the head portion of your page and use window.onload = onloadFunc;.
Alternatively, you could try including the reflection.js script after the <body onload> tag; I’m not 100% sure if this works.
Reflection.js will play nicely with any existing onload events - usually it’s another script overwriting Reflection’s onload event which causes the problem.
Hi Khol,
Thanks a lot for this -
I have changed the onload to window.onload and then included reflection.js AFTER the window.onload call and everything is now working great.
Thakns again
Hi There,
Hope all is going well.
Thanks for your work on the reflection.js library, top stuff!
I’ve integrated it into Typo, the Rails based weblog engine for others to take advantage of as well:
http://crafterm.net/blog/articles/2006/09/25/reflective-images-in-typo-using-plugins
Cheers,
Marcus
Thanks for the info; I’ve added it to the implementations page.
Hi great script - working in Firefox and IE. I want to add a 1px gap between the image and reflection. I have done this is Firefox - I changed this line:
context.drawImage(image, 0, 0, reflectionWidth, image.height);
to
context.drawImage(image, 0, -1, reflectionWidth, image.height);
But IE doesn’t seem to respond. Firefox is perfect. Any ideas on what to change to get the 1px gap in IE.
Hi,
This is because this is the codepath for non-IE browsers. For IE, you’ll have to modify the bit of code around:
Which is found above.
Hello and thank you so much for this great script.
I’m running an internet station and i’m using your script along with the cover cd picture of the song on air. It was just working fine ’till i switch the display of the cd cover picture in AJAX in order to avoid our listeners to reload the page to check the song on air. Since, it’s just not working as i’m using the div display system:
<div id=’tablePrices’ align="left"></div>
<div id=’divTrade’ align="left"></div>
<div id=’showLoading’ align="left"></div>
Have you got any suggestion? I’m about to become crazy right now. If you want to check the website dev., just ask, i’ll drop you the url.
Regards,
Geoffrey.
Hi there,
You’ll have to call Reflection.add() on the image which is reflected to update the reflection. See the documentation for parameters on how to use this but Reflection.add(document.getElementById(’coverid’)) should work.
Hello,
Thank you very much for the quick answer. I’ll be honest with you, i actually don’t have the skill required to get exactly what you’ve just ask me to do. About this snippets of code, should i put it directly into the div id? img src? The ‘coverid’ should match the id of the div where my img src is?
Enlighten me please… Merci beaucoup pour ta patience.
Geoffrey.
You can take a look of the problem here: http://www.hitmusicstation.net/__v3/ Look at the upper left.
Hi,
Nice site
Basically straight after the AJAX code where you change the src value of the img tag, you add the following line:
Reflection.add(document.getElementById("albumcover"));
Change albumcover to the id of the image tag.
I can’t see exactly where in your example the album cover is or the code you are using to change the url to the album cover but if you paste the relevant code I’ll see if I can look into it further.
Hello,
thank you very much for the great comment… it’s costing us a lot of work… but we are hoping to do something really great. Here is the code for the display of the picture into the Ajax function printPrices() :
$req_last_titre = mysql_query("SELECT artiste, titre, date FROM hms_music WHERE artiste != ‘HMS’ AND artiste != ” ORDER BY date DESC LIMIT 1");
while($res_last_titre = mysql_fetch_array($req_last_titre)) {
echo ”;
$chemin_pochette = ‘../image/pochettes/’.str_replace("`","’",$res_last_titre['artiste']).’ - ‘.str_replace("`","’",$res_last_titre['titre']).’.jpg’;
if (file_exists($chemin_pochette)) {
$text = ‘<a href="/titre_’.urlencode($res_last_titre['artiste']).’_’.urlencode($res_last_titre['titre']).’.html" onmouseover="return overlib(\”.$res_last_titre['titre'].’\', CAPTION, \”.$res_last_titre['artiste'].’\');" onmouseout="return nd();"><img src="’.$chemin_pochette.’" width="158" height="100" border="0" class="reflect rheight15 ropacity45"></a>’;
}
else {
$text = "<a href=\"/titre_".urlencode($res_last_titre['artiste'])."_".urlencode($res_last_titre['titre']).".html\" onmouseover=\"return overlib(’".$res_last_titre['titre']."’, CAPTION, ‘".$res_last_titre['artiste']."’);\" onmouseout=\"return nd();\"><img src=\"/image/pochettes/pochette.jpg\" width=\"158\" height=\"100\" border=\"0\" class=\"reflect rheight15 ropacity45\" ></a>";
}
echo ”;
}
The result is displayed into these three lines:
<div id=’tablePrices’ align="left" style="text-align:center; background-image:url(’images/fondonair.jpg’);"></div>
<div id=’divTrade’ align="left"></div>
<div id=’showLoading’ align="left"></div>
I really hope that you could help us… as i still don’t get it… *sic*
Regards,
Geoffrey.
Hi,
Are you using Javascript to do a XmlHttpRequest call and setting the innerHTML based on the response of the request?
Yes, exactly.
I’m using the AJAX Agent framework available here: http://www.hemmady.com/ajaxagent and here is the script function:
<script>
function call_trade(str) {
agent.call(”,’trade’,'callback_trade’,str);
}
function callback_trade(str) {
document.getElementById(’divTrade’).innerHTML = str;
}
function call_printPrices() {
call_setLoading();
agent.call(”,’printPrices’,'callback_printPrices’);
setTimeout(’call_printPrices()’,5000);
}
function callback_printPrices(str) {
call_unsetLoading();
document.getElementById(’tablePrices’).innerHTML = str;
}
function call_setLoading() {
callback_printLoading(”);
}
function call_unsetLoading() {
callback_printLoading(’ ‘);
}
function callback_printLoading(str) {
document.getElementById(’showLoading’).innerHTML = str;
}
function init() {
call_printPrices();
}
</script>
Geoffrey.
Hi,
Try adding an id="" attribute to the image tag and then add the Reflection.add() code from above after the innerHTML bit.
Hello,
I just did what you’ve asked. It is working actually with this code:
function callback_printPrices(str) {
call_unsetLoading();
document.getElementById(’tablePrices’).innerHTML = str;
Reflection.add(document.getElementById("pochette"));
}
We are not so far from the answer to be honest. Still one problem, it seems that the parameters rheight15 ropacity45 aren’t taken in count as you can see on the page. Any suggestion here? I feel very sorry to bother you with this to be honest, but my skill with javascript is really near from the absolute zero.
Regards,
Geoffrey.
Hi there,
To set the height & opacity using the Reflection.add() function we need to add a few options. The following should do the job:
Reflection.add(document.getElementById("pochette"), { height: 0.15, opacity: 0.45});
Hope this helps!
Hello,
it’s just working perfectly now! Thank yo much! I hope that will help others…
Merci mon ami.
Geoffrey,
FRANCE.
I made an optimized version of your great script.
I just want to inform you that you can replace:
with
This way you don’t need browser-specific code for the canvas.
Also I don’t know why you used reflectionHeight*2 … You don’t need to multiply the height.
Christophe Beyls, Brussels, Belgium
PS: This WYSIWYG comment editor sucks!
I posted this in the 1.5 comments area. Hope you don’t mind a double post:
Sorry if this has already been answered! Those are a lot of comments to read through! I’m not sure if I’m doing something wrong or if the script intentionally does it, but I can’t link the images. Please let me know! Thanks! BTW, awesome!!! Saves me loads of time since I don’t have to go through GIMP or PhotoShop.
Hey! I actually found out that Firefox and Opera link the images fine. IE6, however, seems to not like linked images. It will show the goto address in the status bar, but the cursor remains an arrow and clicking yields nothing.
Hi everyone
I encountered a problem with reflection 1.6, with reference to images that surrounded with anchor tags. For example if you have:
<a href="http://cow.neondragon.net/index.php/1343-Reflectionjs-16#"><img src="foo.gif" class="reflect"/></a>
The the reflection alters the DOM model so that the structure looks like this:
<a href="http://cow.neondragon.net/index.php/1343-Reflectionjs-16#"><div><img src="foo.gif" class="reflect"/></div></a>
( ive abridged the above!)
The problem with this is that in Internet Explorer surrounding a div with an anchor tag isnt legal and as such the image is no longer clickable. Others have suggested adding an onclick event handler to the image but I dont like that for several reasons.
I modified reflection.js locally so that it handles the case where an reflected image is surrounded by an anchor, ive pasted the source below in case anyone finds it useful. Basically I changed the getElementsByClassName function to check to see what the parentElement of the child is ( if your using internet explorer ), and as long as its an anchor I add a link attribute to the child.
Then in the add function i use this link attribute to construct an anchor tag which is added to the dom inside the div tag. This appears to work.
(apologies for just pasting it in like this I couldnt find a way to attach a source file, or email Cow
)
Hope you guys find this useful.
cheers
Nadeem
document.getElementsByClassName = function(className) { var children = document.getElementsByTagName('*') || document.all; var elements = new Array(); for (var i = 0; i < children.length; i++) { var child = children[i]; var classNames = child.className.split(' '); for (var j = 0; j < classNames.length; j++) { if (classNames[j] == className) { if (document.all && !window.opera) { if( child.parentElement.tagName == 'A') { child.setAttribute('link', child.parentNode.getAttribute('href')); } } elements.push(child); break; } } } return elements;} var Reflection = { defaultHeight : 0.5, defaultOpacity: 0.5, add: function(image, options) { Reflection.remove(image); doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity } if (options) { for (var i in doptions) { if (!options[i]) { options[i] = doptions[i]; } } } else { options = doptions; } try { var d = document.createElement('div'); var p = image; var classes = p.className.split(' '); var newClasses = ''; for (j=0;j<classes.length;j++) { if (classes[j] != "reflect") { if (newClasses) { newClasses += ' ' } newClasses += classes[j]; } } var reflectionHeight = Math.floor(p.height*options['height']); var divHeight = Math.floor(p.height*(1+options['height'])); var reflectionWidth = p.width; if (document.all && !window.opera) { /* Copy original image's classes & styles to div */ d.className = newClasses; p.className = 'reflected'; d.style.cssText = p.style.cssText; p.style.cssText = 'vertical-align: bottom'; p.setAttribute('border','0'); var anchorTag = document.createElement('a'); anchorTag.setAttribute('href', p.link ); p.removeAttribute('link'); var reflection = document.createElement('img'); reflection.src = p.src; reflection.style.width = reflectionWidth+'px'; reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px'; reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')'; d.style.width = reflectionWidth+'px'; d.style.height = divHeight+'px'; p.parentNode.replaceChild(d, p); anchorTag.appendChild(p); d.appendChild(anchorTag) d.appendChild(reflection); } else { var canvas = document.createElement('canvas'); if (canvas.getContext) { /* Copy original image's classes & styles to div */ d.className = newClasses; p.className = 'reflected'; d.style.cssText = p.style.cssText; p.style.cssText = 'vertical-align: bottom'; var context = canvas.getContext("2d"); canvas.style.height = reflectionHeight+'px'; canvas.style.width = reflectionWidth+'px'; canvas.height = reflectionHeight; canvas.width = reflectionWidth; d.style.width = reflectionWidth+'px'; d.style.height = divHeight+'px'; p.parentNode.replaceChild(d, p); d.appendChild(p); d.appendChild(canvas); context.save(); context.translate(0,image.height-1); context.scale(1,-1); context.drawImage(image, 0, 0, reflectionWidth, image.height); context.restore(); context.globalCompositeOperation = "destination-out"; var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight); gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)"); gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")"); context.fillStyle = gradient; if (navigator.appVersion.indexOf('WebKit') != -1) { context.fill(); } else { context.fillRect(0, 0, reflectionWidth, reflectionHeight*2); } } } } catch (e) { } }, remove : function(image) { if (image.className == "reflected") { image.className = image.parentNode.className; image.parentNode.parentNode.replaceChild(image, image.parentNode); } }} function addReflections() { var rimages = document.getElementsByClassName('reflect'); for (i=0;i<rimages.length;i++) { var rheight = null; var ropacity = null; var classes = rimages[i].className.split(' '); for (j=0;j<classes.length;j++) { if (classes[j].indexOf("rheight") == 0) { var rheight = classes[j].substring(7)/100; } else if (classes[j].indexOf("ropacity") == 0) { var ropacity = classes[j].substring(8)/100; } } Reflection.add(rimages[i], { height: rheight, opacity : ropacity}); }} var previousOnload = window.onload;window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }Kiyanwang !!!! THANJ YOU MAN…
I just downloaded reflection.js and it work…as long as I don’t give my images a margin/padding:
<img src="samp.jpg" alt="Sample image" width=100 height=100 class="reflect rheight15" />
img {
float: left;
display: block;
margin-left: 25px;
}
Now my image is 25px left, but the reflection is still "0px to the left"…how comes, and what can I do about it?
Forgot to mention: not in IE, only in Opera/FF…
I love this script, but i cant get it to work on links that is to say. I have a picture in my website that is a link, but i cant make the image reflect, when i try i always get the same prob, it dosent work, and the image gets stuck to the left side of the page.
Here is the script i was using
<li><a href="http://cow.neondragon.net/index.php/1343-Reflectionjs-16#default" rel="ajaxcontentarea"><img src="ajaxtabs/start.png" class="reflect" border="0px"/></a></li>
Why will this not work? How can I get it to work.
Hello,
I found no other way to contact you. I just wanted to let you know that we have created a TYPO3 Extension to use your reflection.js in TYPO3.
Here is the link to it
http://www.typo3wizard.com/en/articles/a-simple-extension-reflections-for-images.html
Greetings
Helmuth
Hi,
Great work! Thanks for the link; I’ve added it to the local copy of the Reflection.js page but I haven’t uploaded it yet due to server problems. The link should be up soon
hello there ^^ it’s a great script you have here
i’ll be using it on my blog
and gonna make it prototyped 
oh, and for some note you can make the code smaller for a byte or so
on the if portion
p.className = ‘reflected’;
p.style.cssText = d.style.cssText = ‘vertical-align: bottom; ‘;
d.style.width = reflectionWidth+’px’;
d.style.height = divHeight+’px’;
p.parentNode.replaceChild(d, p);
d.appendChild(p);
it can be put outside the if (before it) so it took only 1 times on the code ;)
*cheers*
I’m trying to make a list of links with images in an <ul> and try as I might with display: inline; to get the images to line up in a row, all of my <li> take on block qualities. The images will stay in a row until the script adds the reflection at which point they form a column. Any suggestions?
I looked at the README to figure out how all the sample images were in a row and saw that they had been put there with <tables> which is not an option that I would like to take.
This is exactly what I need. I’m working on a project called Psych Desktop and I needed a reflection engine. Thanks!
Great code man.. Thanks a lot!!
Hmm, I can’t get it to work. The JS is loaded correctly (I think) and the class setting is there, but no reflection shows up. Any ideas?
Example page: http://forums.finalgear.com/showthread.php?t=15110
Hmm, I just noticed that it’s working fine in PMs (which uses the same template), but still not in threads. Weird.
When you use reflect.js on an image and place a text link directly under the image, IE7 can’t read the link at all, as if the reflect is covering it up. Trying to link the image no worky either. Just thought you’d like to know.
Hello,
i can not seems to get the Link to the ZENPHOTO working, any ideas?
Hey, first off… awesome script. But for some reason my images which are in a table are being aligned with the left of the cell they are in instead of the center. I am using the "text-align: center" bit of code to get them centered in their cell. The images stay centered in IE7 with reflections but not in Firefox. Any ideas as to why this is happening?
Hello World,
Your script still so nice. Thank you very much for it. I’m just having a little problem as the link isn’t working with ie when using your script.
Do you have any suggestion?
Regards,
Geoffrey.
Not sure if anyone has addressed this but:
In IE, if the image is inside an <a href=""></a> and the reflection is added, the image is no longer clickable. Is there anyway to over come this? I was trying to use this in a Gallery implementation for thumbnails.
Hello FF user!
to remove the border of linked image just modify the css
use a universal selector *
or
create a style for class reflected
like this:
I´m trying a diferent solution… I´ll post here
Great code Khlo
using the tip of kiyanwang for IE
I make some change in modigy for FF
I think that solve the problem with tag <A>
I think that is the problem in FF code (p.style.cssText)
when use this… they clear older css inline.
bye!!
CODE
Is there a way to display, let’s say 5 images, of varying heights horizontally across the page so that they are aligned with the bottom of the div giving it an even reflection? As soon as I try to do this with the line-height property, the image and the reflection separate.
Thanks a lot for the script! This was way easier than the php alternative. I just had one problem. If I link an image i.e. <a><img /></a>, it draws a border around the original image. I tried adjusting by giving style="border-style:none;" around the table, but that doesn’t help.
I am using 1.6 version
Great script - thanks for providing it. I managed to get into a Zen Cart build - but IE doesn’t seem to like it: it stretches the reflections to huge heights. Anybody have any thoughts as to why that might be - see it http://www.essereorganics.com/shop
If you are using reflection and moo.fx (aka "mootools") simultaneously, moo.fx works fine, reflection does not. Even not in the latest versions.
To bypass this issue you need to modify your reflection.js:
(1) Open reflection.js and replace the last line
window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }with
window.addEvent('load',function () { if(previousOnload) previousOnload(); addReflections(); });Hi,
The license for Reflection.js says MIT style license but provides no links to a license. Is this license the one you are referring to?
http://www.opensource.org/licenses/mit-license.php
Greg: That is correct.
Can someone please help me fix these two bugs:
1) In IE, reflected images can’t be hyperlinked.
2) In IE and FF, I can’t align the reflected image to the center if it’s within <p> tags.
Reflection seems to conflict with one of the java scripts i just implemented in my web site. I had a look into both scripts but i can’t figure out to make it work.
Source of the other script: http://www.agilepartners.com/blog/2005/12/07/iphoto-image-resizing-using-javascript/
Could you tell me how to solve this conflict?
I am available by ICQ, MSN, YIM, AIM and mail to assist.
Thanks in advance.
Stephan
Stephan: Chances are another script is overwriting the onload event. Try using the onload="Reflection.add(this)" technique rather than class="reflect".
Sorry, I don’t get it.
Should i use the onload attribute on any image i want to be reflected and delete the class definition?
Yep.
"To bypass this issue you need to modify your reflection.js: (1) Open reflection.js and replace the last line
window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }
with
window.addEvent(’load’,function () { if(previousOnload) previousOnload(); addReflections(); });
In your document where you are going to use them, include mootools.js before reflections.js so the addEvent function is available."
Can you speak more clearly? :/
Would anyone know how to modify the code a bit to ensure the reflection does not appear right below the image? I’d like to offset the reflection by a bit. Would be great if I could put the reflection exactly within a div I specify.
are there any known issues displaying the reflection on IE6 standalone from evolt?? apparently it works perfectly in any other browser and platform (both mac and pc) but just not IE6..
any ideas??
As someone else has written (but is still unanswered).The image (and reflections) are aligned to the left after the js processing. This is done even if the image is aligned to the right or center.
Does anyone has the solution for this?
Hi,
at first…nice work.
I have a question. It is possible to set the reflection into the background?
I have some images on the left side in a text area. Normaly the text are shown right from the image and under the image. If I use the reflection, the text is only under the image.
So I put the image into a table, and the text are now shown right from the image and under the reflection. But if I have a big image, the reflection is also very big. So it will be very nice, when the text are schwon over x % from the reflection.
thx
In IE, if the image is inside an <a href=""></a> and the reflection is added, the image is no longer clickable. Is there anyway to over come this? I was trying to use this in a Gallery implementation for thumbnails.
I integrated reflection.js and I have to say that it really boosted the look of the sites i’m building.
It has actually become a problem to know when to stop reflecting images.
Great work!
where can i edit the class to add margins?
Image Reflection" effect caught my eye today and I immediately decided to try it.
I love it! Please check the implemantation of this script on our site.
http://www.featurepics.com/Editorial/Image-Reflection-Special-Effect.aspx
Thank you very much for sharing this wonderful script.
Hi,
I’ve packed reflection.js into a Textpattern plugin named "wet_wetfloor" and wrote a wrapper Textpattern template tag. Download and How-To are at my Textpattern plugin site.
Is there a way to obtain a similar effect with text? It would be much more flexible. Think for instance to apply the effect to all first level headings.
Since I’m not into javascript I don’t have an idea if it is feasible at all or there is some unsurmontable obstacle .
Great script. I use it for my portal sites which have a header text based on the keyword. I write the header on the fly with php GD and this small javascript adds the reflection to it. But if you take a look at http://www.ilovetorrent.nl you see a bit of roughness on the edges in Firefox, Explorer seems to render it fine.
Is it because you needto use steps by 10 pixel? For example 10,20,30 and not 25?
I was having trouble with the images thats are links. and the code above works.
I was also having issues in FireFox where if i centered the image, it would not stick after the javascript was executed. Well i have found a homegrown solution that works for me. this is the code i added.
d.style.cssText = ‘text-align: center’;
d.style.width = ‘100%’;
now let me explain what im doing here. the container that is actually centering the image content has its width set, in my case its 130px, but it shouldn’t matter how wide it is. now i text-align center the new div and its works.
Hope this helps someone out, or is able to permanently fix the script
sorry for the double post, i should have mentioned that i added:
d.style.cssText = ‘text-align: center’;
d.style.width = ‘100%’;
to this if statement inside the else loop.
if (document.all && !window.opera) {
…
}else{
d.style.cssText = ‘text-align: center’;
d.style.width = ‘100%’;
…
}
Hi.
I’ve conflict with your reflection.js and with another js. I think it is the unload event.
in reflection.js:
var previousOnload = window.onload;
window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }
In 3dcube.js file:
window.onload=new Function("setTimeout(’movecube()’,delay)")
When the 2 is on the same page, Reflection.js doesn’t work.
Any idea?
Thanks
jfk
Load Reflection.js after you load 3dcube.js - Reflection.js doesn’t overwrite existing events. This applies to other JS files which set onload events.
I added this for my block.
And this tool realy rocks!
We moved domains
http://phpbbinstallers.com/board/viewtopic.php?p=1910#1910
is now >>
http://phpbbinstallers.net/board/viewtopic.php?p=1910#1910
Hello
First off all, i want to say this script is in 1 word fabulous.
But i seem to have problems with the script in IE.
look => http://users.pandora.be/highmoon666/test/reflexions/
In IE it streches a lot. In FF it’s great.
What can i do about this?
Thanks.
hi
Thank you very much for the quick answer. I’ll be honest with you, i actually don’t have the skill required to get exactly what you’ve just ask me to do. About this snippets of code, should i put it directly into the div id? img src? The ‘coverid’ should match the id of the div where my img src is?
Enlighten me please… Merci beaucoup pour ta patience.
I love it…however, because the call to "addReflections" is on the onload there is a delay and the page jumps when the reflections get applied. I put the call on the bottom of the page, but it doesnt always work (ie. Load the page, some reflections show - refresh and then they all show).
Here’s what I put just above the </body>
Any thoughts?
I use reflection and i works fine.
the thing is my reflection move’s 1 px to the left
whats wrong ?
http://www.flexflavour.nl
I’m trying to make a list of links with images in an <ul> and try as I might with display: inline; to get the images to line up in a row, all of my <li> take on block qualities. The images will stay in a row until the script adds the reflection at which point they form a column. Any suggestions? I looked at the README to figure out how all the sample images were in a row and saw that they had been put there with <tables> which is not an option that I would like to take.
i just thought i’d let you know that i’ve modifed reflection.js to include an option for setting a fixed height reflection in pixels, i’ve blogged about it on my blog here: http://zhuoqe.org/blog/2007/04/09/reflectionjs-modification-fixed-height-hehehe/
hope you like part of the modifications enough to include them or similar things in future releases
I’ve been inspired by your reflection.js and wrote a similar script called corner.js
maybe you can imagine what it does…
http://www.netzgesta.de/corner/
http://corner.netzgesta.de/
Hi Christian,
That looks really really nice! It’s probably worth building a page with a little bit more information on it and then submitting it to a website such as Ajaxian! It looks like a really nice way to add image effects on the fly!
hey, i translated and modified your test page in order to explain to italian people how to use your reflection.js
there is your page
http://www.ajaxcity.it/esempi/200704/reflection/
and the article is @ http://www.ajaxcity.it homepage
hope that’s ok 4 u..
byee
I love your JavaScript snippet; it creates the best image effect ever! I do have a problem do, I have my most of my images inside hide/show divs. When the display hides (display; block) the reflection disappear when the div is shown again. Do you have any idea what might be the problem?
Hi is there a way to make this work for text? For eg:
<h2 class="reflect rheight=20 ropacity=40"> TEXT HERE </h2>
Thanks.
This is awesome! I have been trying to do this to the images on my site for a long time. Thanks for providing this great script! I will tell everyone I know!
Hellooooouuu!
Exellent script, works fine with few modifications that i read it bellow , http://www.beosms.com , this is link, but i didn’t find anything about effects when you on linked image. You was written a little about that in readme file but i didn’t know how to do that. Where to find a discusion about effects, something like, when you are on link to have some glow effect or lightbox…
Thanx a lot for script!
I love this script! Thanks! One feature request if I may:
Add an option for spacing between the original picture and the reflection. A 5 pixel spacing may increase the quality of some images’ reflections. I know the spacing is possible by adding that blank space to the bottom of the image, but it would be nice to be able to add the space dynamically.
Thanks,
Erik
First Off: This script is awesome works excellent.
One thing though I have not been able to figure out in the documentation and in here. What if the image is aligned left / right and I want to float text around it ? The answer to that issue has yet to come .. Or it’s simply to late for me to find it. Reflections look great but the text is now displayed below the image .. does anyone have a workaround besides tables ?
Thank you
Sam
I am sorry for posting once more: but I found the solution, after reading more closely through the code, perhaps someone else has use for it, too.
It’s actually very simple: pack the image into it’s own div and float that div, either left or right.
Absolutely love the reflections!
Thanks for your efforts.
Unfortunately I’m having a slight issue in IE6…
Firefox, Opera, Safari, IE7 all work fine.
IE6, even thought the HTML code is still present I get a completely blank page. Well, the body background colour is there, but nothing else. Removing the reflections code fixes the problem…
Any ideas?
Thanks again,
Mike
Heya there!
I’ve been browsing through your blog in hopes of finding your e-mail, but alas, I can understand why I can’t find it.
I’m contacting you concerning this script, I was wondering what the terms of use.
Please let me know - you may contact me at the address I used on here.
Thanks!
- Ju
Err, I meant : what the terms of use was*
Hi there,
It’s BSD-licensed so you can do whatever you want with it but all we ask is to please leave the credits at the top :)
I had this problem too…
Hello
First off all, i want to say this script is in 1 word fabulous.
But i seem to have problems with the script in IE.
look => http://users.pandora.be/highmoon666/test/reflexions/
In IE it streches a lot. In FF it’s great.
What can i do about this?
—— SOLUTION ——-
Took me a while but I got it. Add this line here….
reflection.style.styleFloat = ‘left’;
Put it below the (reflection.style.filter = …) line
In IE is seems the images need to float left or they wack out.
It would be interesting to allow the images to be rotated on the Y axis.
those looking for an answer to the alignment issue check out the following
http://www.vbulletin.org/forum/showthread.php?t=114726&page=10
thanks for an awesome plugin and to other posters, your comments helped me fix the linked image bug
~Sentience
Having trouble integrating this with litebox 1.0. Litebox is a trimmed down version of Lightbox 2.0. I’ve modified the litebox js to increase the window size and that works no problem. My issue is when I add..
Reflection.add($(’lightboxImage’), { height: reflectHeight, opacity: reflectOpacity });
to the beginning updateDetails function. When I do this, no image is displayed at all in the lightbox. Ideas?
Have you had any reports of conflicts between Reflectiosn.js and the Google Maps API. I can’t seem to get the two to operate correctly on the same page. The debugger shows the error occurring in the Google Maps obfuscated javascript but it only happens when the reflections code is in use on the same page and so i suspect that that is the source. Any help would be greatly appreciated.
I really love what this script does but I am unable to get it to work on my site. I manage two sites at work (same host) and it works on one but not the other. I uploaded reflection.js to the root of the site, referred to it in the <head>, as instructed, then added the reflect class to a couple of images to try it out. Nothing happened. I’m on a mac but I checked it out in IE, FF and Safari and never saw it. Any suggestions would be greatly appreciated.
Here’s the culprit page: Home Simulator Accessories
I’ve tried it on simpler images on other pages of the site but still no luck. Any suggestions?
PS- I tried putting the .js reference in every location of the <head>. I’ve also tried moving the script source to different areas of the site and changing the reference. No luck.
I really like your plugin. Did you investigate using any skewing of the reflection ?
Like a traditional reflection : http://www.tipclique.com/tutorial/photoshop/photoshop-reflections/
Great script, it works really fine. Thanks!
Are you using Javascript to do a XmlHttpRequest call and setting the innerHTML based on the response of the request?
Very nice. Thanks.
Here’s a possible issue - When an image is left aligned and the reflection class is applied to it, text no longer wraps itself around the image. Instead the text drops to below the image. Tested in IE7.
Hello,
I want reflection.js for VIDEO object(object tag or embed tag).
Is there the making plan? I ask for making by all means.
The reflection part should move, too.
English is sorry with poorness.
Does this work on text?
I created a reflect.js modification for the E-Blah bulletin board system. It’s available at http://www.tylerm.info/reflectjs.v2m (though if you’re going to link to it, I’d appriciate it if you could mirror it here, my server’s pretty cheap, I don’t know how it’d take to the extra bandwidth.)
excuse my english, i’m french
In joomla with IE7 with composant we have stack over flow because we have always window.onload always egal 0 why don’t you put for the last line of the script only :
window.onload = function () {addReflections()};
when I put only this line without
//var previousOnload = window.onload//window.onload= function () { if(previousOnload) previousOnload(); addReflections(); }the script run correctly with IE7 and firefox
Best regards
Thanks for the reflection script. Definitely a cool effect which i will use in the future in my design works and portfolios. Again thanks for sharing!
Thanks for the reflection script. Definitely a cool effect which i will use in the future in my design works and portfolios. Again thanks for sharing!
Check out my attempt, it does not use the canvas object.
http://n.vain.in/reflect.html has a client side javascript implementation of reflection
Really small code size, and needs no canvas.
Great code man.. Thanks a lot.
thanks.
This is cool thanks
Changed the onload to window.onload and then included reflection.js. Works like charm, thank you!
Will it be that somebody can help me?
I’m not a programmer, I’m photographer trying to do my own site (www.rmpires.com).
I found this script perfect for me, but, it don’t work.
I’m using in my main page the script "CMotion Image Gallery" (http://dynamicdrive.com/dynamicindex4/cmotiongallery.htm) and "Lightbox image viewer" (http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm) and I would like the thumbs to have the reflection, but, it doesn’t work according to the code below. Can somebody help me? Thank you!
———-
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="js/reflection.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="css/gallerystyle.css" />
<!– Do not edit IE conditional style below –>
<!–[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+’px’);
}
</style>
<![endif]–>
<!– End Conditional Style –>
<script type="text/javascript" src="js/motiongallery.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<txp:wet_wetfloor_script />
</head>
<body>
<div id="pagewidth" >
<div id="header" > </div>
<div id="wrapper" class="clearfix" >
<div id="maincol">
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<nobr id="trueContainer">
<a href="images/image01.jpg" rel="lightbox[roadtrip]"><img src="thumbs/thumb01.jpg" class="reflect" alt="" /></a>
<a href="images/image02.jpg" rel="lightbox[roadtrip]"><img src="thumbs/thumb02.jpg" class="reflect" alt="" /></a>
<a href="images/image03.jpg" rel="lightbox[roadtrip]"><img src="thumbs/thumb03.jpg" class="reflect" alt="" /></a>
<a href="images/image04.jpg" rel="lightbox[roadtrip]"><img src="thumbs/thumb04.jpg" class="reflect" alt="" /></a>
<a href="images/image05.jpg" rel="lightbox[roadtrip]"><img src="thumbs/thumb05.jpg" class="reflect" alt="" /></a>
</nobr>
</div>
</div>
</div>
</div>
<div id="menu" > </div>
<div id="footer" ></div>
</div>
</body>
</html>
Weirdly enough, I am having exactly word-for-word the same problem as Ramiro. Here is the symptoms: if I create a gallery using your script (reflection.js), the lightbox vs 2.0 (not 2.02) script, and the cmotion DHMTL scrolling gallery script, I end up with a reflection sitting to the right of the original image. You can see the scripts at the following webpages:
http://www.huddletogether.com/projects/lightbox2/
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm
I would love if someone could help me to fix this problem. I know some html, but not enough JS to fix this.
Best,
Ben
This is seriously slick – thank you for an awesome application. Are you able to get it to work on plain text? I suppose that may be difficult – but with some artistic talent, it could look quite nice. Especially if you want to have menu items, for instance, with some shadowing on a background or something. Keep at it – this application is brilliant. Hope to see some improvements soon, as well!
Just to let you know, 1.6 fixed some issues I was having in ie for some reason… not sure why, but it’s working great now.
Thanks for a great script bar a few IE errors its perfect.
Im sure you already know but the onmouseover events to vary the reflections opacity does not work in IE, is there any way around this?
i can´t download the script. Message…
404 - Not Found
I use the modified version from Kiyanwang, because I need the link option for my site. The problem is: IE is opening the linked site in the same window. The target="_blank" command in the link tag has no effect! Firefox and Opera do it correctly. Has anybody a idea how can solve this problem? Unfortunately I’m a JavaScript flopper
This seams to be a small thing, but I can not use the script if that’s not working , so please help me
Regards,
Carsten
Is the reflectomatic service broken?
I’m getting a 404 from http://cow.neondragon.net/stuff/reflection/
OMG
I still can’t get images to work as links?
Does anyone have a definitive answer please?!
I have a question, i use this reflection tool on my site:
http://www.you-can.nl
but i have a problem that all the reflections are 1 maybe 2 px to the left in
FF and to the right in IE….
does anyone knows my problem?
This sure looks like a wonderful product … if only I could get it to work. The instructions are not very helpful to someone like me who doesn’t work with java script much. About all I can do with scripts is cut and paste.
I have this:
<script type="text/javascript" src="reflection.js"></script> in my html header and I added a class="reflect" in my image src. But where, exactly, is the script itself supposed to go? The instructions only say to add it to your website. No matter where I put the script, it only renders the file’s text on my web page, no reflections.
Can you provide a clue for the clueless?
Thanks!
download the reflection.js and put that file into the main directory of your site then it works
Mark -
No, actually that doesn’t work. I put the reflection.js script into my main directory, but no reflections on the images.
I’ve placed the reflection.js script into my html header and got a reflection once in Firefox, but it was way off in IE7. I could not produce the reflection again in Firefox, instead the browser showed a syntax error.
Bob
Reflection.js v1.7 is here.
Thus this blog entry will be locked. Please post all future support queries here.