Reflection.js 1.7

September 8th, 2007

Reflection.js is a cross platform script which allows you to add reflections to images on your web pages.

Reflection.js v1.7

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 an issue where hyperlinks around reflected images didn’t work in Internet Explorer.

The Reflection.js webpage has also been given a facelift and Reflectomatic now has five sample images to make it easier to try out Reflection.js for yourself.

Demo

See a demo of reflection.js 1.7 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
Comments(110)

110 Responses to “Reflection.js 1.7”

# Paton 09 Sep 2007 at 12:10 am

I have a layout that requires a div of images that remains centered filled with as many images as can fit. When you resize the div resizes but the images always stay in the center and as many rows as is required.

When I add class="reflect" to the images they all slam up to the left side of the div one per line. Using tables does not work wel for me since I don’t know how many will fit in a row.

I understand that you create a new div that has the image and the generated reflection. Can I create a css class for "reflect" and put something in it that allows me to treat the new divs the same as the old images? On is there some other trick that allows me to just jamb a bunch of the reflected images into a div and treat them like the raw unreflected images?
# Daniel Kochon 09 Sep 2007 at 10:43 am

Great script. But I have a problem with IEs.

I use the script in a menu (with <li>), in FF everything looks fine but in IE (6.0 and 7.0) the shadows are displayed aside the images and not under the image?!

Do you have any hints?
# Daniel Kochon 11 Sep 2007 at 11:04 pm

In my case the following css fix the problem:

.reflected {
display: block;
}
# Locoon 12 Sep 2007 at 3:34 pm

reflect works great but i’m facing problem with users using ie6

since ie 6 are having problem rendering the png image, i try to put one of the iepngfix and the png image is solved but then there is no reflect after that?

so how do u solved it?
# Willy T Kochon 13 Sep 2007 at 5:34 pm

Hello and thanks for a great script. I combined it with a crossfadescript and it’s nice!

But…IE 7 isn’t fading out the images as nicely as Firefox, Camino or Safari. Do you have any ideas?

Check it out here: http://www.ansnes.no

Thanks!

Willy T. Koch
Oslo, Norway
# Linnon 14 Sep 2007 at 10:08 pm

Hello,
The reflection will only work in Opera, not in Safari, Explorer or Firefox. What the heck am I doing wrong?

http://www.crestfallensoul.com/test/tarja/
# Linnon 15 Sep 2007 at 10:00 am

I just realized why the script won’t work in all browsers, I use a swap image command, and only Opera accepts it. I’ve tried to many ways to go around this, I’ve used div layers to try and come across the problem but I cannot make it work properly. The only time I got it working was when I used show and hide layers, but it looked really bad because when I moved the mouse, the image couldn’t decided which image to show.

Is there a way to include in the javascript that swap images can be used in the other browsers as well?
# Lukason 16 Sep 2007 at 3:22 am

hi! i was trying to implement the reflection in an existing website. it works when i move the div into a separate htm. what are known reasons that it doesn’t work? what are the most common mistakes? thanks for your help!! ~lukas
# Rustyon 17 Sep 2007 at 1:37 am

Hi

great script thanks!

problem, it seems to make the image go to ist original size if I use a sizing in the html - it is ignored, but the reflection if I leave as is, the reflection is the right size as the image should be , if take out the sizing the reflection goes to the right size. Also I am testing this on html but would like to use in oscommerce(add in code) and joomla if poss..is there a mambot/module for joomla?
# Heyyoon 17 Sep 2007 at 11:06 am

I encouter one problem with IE7 there is a border around the reflection.
# Carloson 17 Sep 2007 at 2:48 pm

Hello!

Can you do a scritp to run in Invision Power Board?

Thanks! ;)
# Philip Zhouon 18 Sep 2007 at 2:33 am

Hi, I tested in code in IE7. But when I set the DOCTYPE, such as

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The reflection has the full height of the original image, instead of the fading height (rheight). I tried to insert "d.style.cssText=’overflow-y:hidden’" in line 82 to fix it. Please let me know if there is any other better way.
# Svenon 20 Sep 2007 at 4:14 pm

Hi there!

I’m using the reflection.js in combination with lightbox2. The pictures shown in the lightbox are generated dynamically from a xml file and switch by getting a trigger from a media player. The reflection for the first image works fine, but after changing the image via dom-manipulation there is still the reflection from the old image.

How can I add the reflection to new loaded images during runtime? I know that the reflection function is only called once when loading the page, but is it possible to call it again without reloading the page?

Any help would be greatly appreciated.

Thanks and kind regards,
Sven
# Khloon 20 Sep 2007 at 8:40 pm

Hi,

Yes. Use Reflection.add(). More in readme.html.
# Heyyoon 24 Sep 2007 at 9:31 am

Any help with my problem in Internet Explorer with the border which is around the reflection image ?

my website : http://www.3u4u.biz
# Kim Lloydon 24 Sep 2007 at 10:01 am

Hi Ive created a mod for invision board that adds the reflection effect to avatars if you want to add a link to it on your site:

http://mods.invisionize.com/db/index.php/f/7818
# Khloon 24 Sep 2007 at 6:18 pm

Thanks Kim!
# Anthonyon 24 Sep 2007 at 7:47 pm

Hey there, thanks for the script. If it’s cool I’m going to port this into a Drupal module to work with a couple other image modules. Of course I will leave credit for you all over the place. I’ve already ported it to my own Drupal site but need to make it more "community" friendly for others to use. I will send a link your way once this module is up and running.
# Matthewon 25 Sep 2007 at 12:14 am

Great code, however it would be very nice to set a distance between actual image and reflected image.
# Pawelloon 25 Sep 2007 at 9:34 am

Hello!

Nice work! Your script do not reflect the ping images placed on div in Internet Explorer… Safari Firefox and Opera renders reflection properly. Is any way to fix this?
# Florianon 25 Sep 2007 at 3:30 pm

Any help with my problem in Internet Explorer with the border which is around the reflection image ?

Â my website : http://www.3u4u.biz

Add this lines to your css file:

img {
border:0px;
}
# Chrisson 25 Sep 2007 at 10:59 pm

Hi, love the reflection work!
It’s very effective over most browser, I’ll post a link to a large site I’m working on that will go live tomorrow.

I notice you’ve fixed the link problem around an image in IE6 which is great news. It might be easy fix (or I can create a script to do it) but it doesn’t currently respect a link if it has a different target set for (like _blank), it just opens it in the same window.

Is that an easy fix, or a lot of work?

Thanks for your time, it’s been very well spent!
Chris
# Lars Kohselon 26 Sep 2007 at 4:04 pm

Hi. Like your script. However, as most of the other contributors I have a problem using the script. I plan on using it with DotNetNuke Module that has an Image webcontrol. When setting the width of the Image control the html output is something like: <img …. style="width: 200px;…" which is ignored in your script. Is it possible to read the width settings from Image element style settings in your script ?

regards
Lars Kohsel
# Axelon 26 Sep 2007 at 11:45 pm

Hi!

Great script! I just used it for kind of webtutorial.
The problem I had and solved: I use a DIV with text-align:center where my image was placed.

With using reflection it was moved to the left in FF 2.0 (in IE it was fine).
My changes in reflection.js:

line 50:
```
            var d = document.createElement('span');
```
… instead of createElement(’div’);

line 109 added :
```
                    canvas.style.clear = 'both';
```
regards,
Axel
# Martinon 28 Sep 2007 at 6:25 am

i tried to download it and i got a 403 error
# Outlooksyncon 28 Sep 2007 at 6:38 am

When I try to download it, I get a 404 Forbidden! Whats gives?
# Khloon 28 Sep 2007 at 2:55 pm

Sorry, and thanks for letting me know. Fixed!
# Steveon 28 Sep 2007 at 9:06 pm

I can get the script to work in IE but not Firefox.

Putting that aside I tried to add the script to an Adobe Air application using FireFox as the default browser. When I attempt to run the site in Dreamweaver CS3 as an Air application I see the space for the reflection but not the reflection itself. The opacity is set to the default value and I’ve tried playing around with it to no avail thus far.
# Outlooksyncon 30 Sep 2007 at 6:42 am

I fixed my IE border problem with the posting from above made by

"Florian" (Guest) wrote at September 25th 2007, 14:30:

Real Big Thanks!!
# Boltclockon 06 Oct 2007 at 8:57 am

The reflections are messed up in Opera 9.50 alpha. The reflection dimensions are completely messed up, and the reflection gradient overlay abruptly stops halfway.
# Tv3oon 07 Oct 2007 at 2:52 pm

Great script. Will be using it on the next version of my site.

Regarding modifications, I needed to add additional vertical offset to get some space between the image and its reflection. Added the following:

- An additional ‘rvoffset’ to pass a pixel value

- ’defaultVOffset: 0,’ and ‘doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity, "voffset" : Reflection.defaultVOffset }’ to the class

- when setting margins:
if (options[’voffset’] > 0) reflection.style.marginTop = options[’voffset’]+’px’;

- in context.drawImage:
context.drawImage(image, 0, -options[’voffset’], reflectionWidth, image.height);
# Ryanon 12 Oct 2007 at 10:53 am

I’ve got a problem with the new version that wasn’t occuring in v1.6. In IE7 my margins are being doubled?

I’m using your script on some flickr and Amazon images the css for flickr is this:

#flickr a{
display:block;
float:left;
margin:0 20px 0 0;
}
#flickr img{
border-bottom:1px solid #000;
}

Yet in IE7 I’m getting 40px right margin. Any suggestions?
# Ryanon 12 Oct 2007 at 11:03 am

Additionally, the script appears to be adding padding-right:20px to the <a> tags
# 3don 16 Oct 2007 at 5:18 pm

It would be cool if there is an option that could make space between image and reflection.
# Dougyon 17 Oct 2007 at 10:45 am

great script - thks for 1.7 - fixed my hyperlink problem - what was the problem, if you have time to tell.

cheers
# Jstengelon 17 Oct 2007 at 9:05 pm

Thank you for creating this script. I needed to add to your hyperlink fix so I thought I would share the issue and my fix.

Issue: The fix created a <a> container instead of a <div> container for the image to reside in. This is because you can’t put a <div> inside a <a> contain in IE.

The problem: A <a> container is an inline object. So, my reflection would show up inline (next to) the image instead of underneath.

The fix: Add the following to line 87: reflection.style.display = ‘block’;

Hope that helps anyone else fight that problem.
# Peteron 17 Oct 2007 at 11:39 pm

Works really great in all browsers except Firefox 3 (3.0a9pre) ….
# Cjcmon 20 Oct 2007 at 4:39 pm

the reflection works fine on all mentioned compatible browsers. unless you use images as a link to an iframe in IE.

i hope this will be fix soon…

I have pull out the reflection effect on my site for now. i’ll enable it back once the fix is made.
# Matton 20 Oct 2007 at 11:50 pm

Hello,

This script is awesome, however I have one question about it. The way I’m using it, I’ve applied a border to the image that has the reflection, and since the reflection starts at the farthest left like the it expects the image to, the image and reflection are off by a pixel or two (the width of the border on the image).

Here is the link where I’m using it (the store is not live or does not work yet! hehe): http://store.localsounds.org/wi/madison/process.php?pname=ShowAlbumDetailsProcess-Start&CategoryID=16&AlbumID=7
# Jojoon 21 Oct 2007 at 5:14 pm

Very valuable script! Thanks alot!
# Stefanoon 25 Oct 2007 at 5:54 pm

Hi,
I’m creating a web page, in which I’m using some javascripts, including also your "Reflection Script".
I have a problem with your script: everytime I use a script which contains the function "onload" (in the "body" tag of the page or in the script), the reflection script stops; if I erase the "onload" funtion, the reflection script restarts.
I also tried to look at the variables of the 2 scripts: there were some variables with the same name in both the scripts, but after changing their names, nothing happens.
Can you help me?

Another thing: I’m new to Javascripts, so please don’t answer with too much technical terms
Many thanks.
Bye

Stefano
# Stefanoon 26 Oct 2007 at 11:20 am

Fixed problem with onload!
Simply there were 2 onload functions at the end of the 2 scripts.
I put them together in the body tag of the page removing them from the scripts, and it works perfectly!

Thanks anyway

Bye
Stefano
# Makon 27 Oct 2007 at 6:46 pm

I already have two onload js before putting this one, and I put all together as you suggest. Now not a single one work. I think I did something wrong, help.
# Stefanoon 29 Oct 2007 at 7:05 am

Hi Mak, as I said I’m new to Javascripts, so I can’t help you much. However, what can I suggest is to check if you correctly removed the last line of all the Javascripts with onload you used (I saw that they end with window.onload = function () {……}).

Then, in the html page you have to put this tag:

On my page they work perfectly.
# Moodangon 04 Nov 2007 at 2:00 pm

How can I make reflection.js work with AJAX? It works with the initial website that is downloaded. But whenever I add new HTML content via AJAX, the newly added HTML does not get the reflection.
# Lpon 04 Nov 2007 at 11:00 pm

Unfortunately, what looks great on Firefox 2 (strict, validated XHTML 1.0 served as text/html) is not working in IE 7 (surprise, surprise). Using a reflection on mouseover inside of a link works beautifully in Firefox and Safari. On my IE 7, the onmouseout fails miserably (leaving the reflection which was supposed to be replaced by a dimmed version) and the link does not work on the image (but does on the reflection…wouldn’t users have fun?). No complaint, this is a very easy to use and pretty free product. Thanks. Since it is advertised as working in IE 5.5+, I share my feedback. I’d even use it permanently on my page if did work in this more complex situation. Khlo — I’m happy to send you a link for the example, if you have time to worry about this.

L P developer
# Moodangon 11 Nov 2007 at 5:19 pm

Hi! I am using your script on my site

http://seedang.com

Some of our users are complaining that it does not look well with the rest of the site though. Perhaps I have to play with more settings, or try out other image effect javascripts.
# Evripidison 12 Nov 2007 at 1:58 pm

I found this script and i’m excited! I would like to use it, but i can’t. I’m trying many hours but i cant see it.

I want to place it in my blog ( eye-of-thundera.blogspot.com ). i’ve read the readme and i think that i’m doing it correct.

I’ve upload the js in my google pages

(http://argy.evri.googlepages.com/reflection.js) and put this link in the ****

script type="text/javascript" src="********"> /script
The bold line i’ve placed it under head.

I place also the class in my image, but i cant see the reflection.

Please if anyone can give me a tip. Is there any other way to host the js ?

Thanks in advanced
# Fearphageon 13 Nov 2007 at 2:21 am

Very nice script! I have three suggestions for you:
1. Put addReflections() inside of the Reflections object. Reflections.initialize() would be a good name
2. Check for document.getElementsByClassName before you override them. Both Opera 9 and FF 3 support them natively.
3. Use real dom load events window.addEventListener and window.attachEventListener
# Christian2000on 16 Nov 2007 at 6:27 pm

Very nice script!

habe es in meinem phpbb forum eingebaut, läuft super und sieht gut aus
# Holmesy79on 19 Nov 2007 at 5:14 am

reflection not working in ie6 when using thickbox, instead it places whitespace below the image. the whitespace equals the height of the image itself. is there any way to fix this.

http://site.ivt.com.au/projects/cid/2/parent/0/pid/2/t/projects

click on any thumbnail image to see.
# Sean Bannisteron 22 Nov 2007 at 3:47 am

One useful feature would be the ability to set a spacing between the image and the reflection.
# Matton 27 Nov 2007 at 7:10 am

Is there any way to include a few pixels of space between the image and the reflection? This script is useless to me without it, and it shouldn’t be very difficult to code in.
# Matton 27 Nov 2007 at 7:21 am

If anyone wants a fix for allowing pixels in between the image and the reflection, here is is:

Add the following to the style sheet:

img { margin-bottom: 2px; }

Thats it! Very simple. 2px is what I use, but obviously you can change that whenever.

Love the script, but the support on here really sucks. Use Google guys.
# Nikkoon 27 Nov 2007 at 11:25 am

Hi,

seems with the new firefox 2.0.0.10 the .js doens’t work any more ?

just updated today firefox and lost all effect ..
# Meekon 27 Nov 2007 at 2:29 pm

I upgraded to Mozilla Firefox 2.0.0.10 today - the reflection doesn’t work here…
# Anonymouson 27 Nov 2007 at 3:27 pm

Hey, FF 2.0.10 broke you’re code!? Just to let You know
# Rodrigoon 27 Nov 2007 at 6:26 pm

The same for me:

I found this reflection just TODAY, works very well, but then I upgrade Firefox for 2.0.0.10 then, S***not working =(

blame 2.0.0.10….
# Anonon 27 Nov 2007 at 10:21 pm

Hello, This script is awesome, however I have one question about it. The way I’m using it, I’ve applied a border to the image that has the reflection, and since the reflection starts at the farthest left like the it expects the image to, the image and reflection are off by a pixel or two (the width of the border on the image)
Could you please reply at m DOT hujdur AT web DOT de? Thanks
# Chris Son 27 Nov 2007 at 10:38 pm

Shame it seems that the latest Firefox updates breaks it on both the Mac and PC. Very odd… might be something to do with the DOM structure?

No errors are produced which is good - degrades nicely :)
# Alexandreon 27 Nov 2007 at 11:01 pm

HELP !!!

I just updated firefox to 2.0.1.0 version and reflection does not work anymore !!!

I works fine in IE and worked before in firefox…

Check my website using Zenphoto and Simple+ at:

photos.imbecille.net

Hope you will be able to fix it…
# Khloon 27 Nov 2007 at 11:23 pm

Hey guys,

Looks like 2.0.0.10 broke all canvas image scripts!

Mozillazine Thread

Bugzilla

I think they are releasing 2.0.0.11 to fix this!
# Carlos Marqueson 28 Nov 2007 at 7:14 am

Hi every body I downloaded the reflection file v1.7 and I liked very much.

Beatiful effects..

However like someone just said, for big images in IE the reflection is not so good.

So.. I tried to work around and make my changes and here there are at line 88 of the script I added this:

     var reflection = document.createElement(’img’);
    reflection.src = p.src;
    reflection.style.width = reflectionWidth+’px’;

//——–start here

// * as minhas alterações para funcionar melhor
    reflection.id = "reflect2";
    reflection.style.top = divHeight+’px’;
    reflection.style.height = p.height+’px’;
// * ——————————

//——– end

    reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+’px’;

For me it works

Enjoy the reflections with big images!!

See the site http://www.seacoastiberia.com with the new script
# Lakilevion 28 Nov 2007 at 10:12 am

Hello!

I have a big problem. It seems that the reflection.js 1.7 doesnt work under Firefox 2.0.0.10.

Yesterday I worked with Firefox 2.0.0.9, and everything was ok. Than I updated the new version, and doesn’t work.

Please fix this.

Thank you very much for this amazing script!
# Fauston 28 Nov 2007 at 11:36 am

fixed in

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2007-11-27-14-mozilla1.8/
# Sad0felixon 28 Nov 2007 at 3:56 pm

Yep, I quote the Firefox problem, but it’s not a reflection script’s problem, it’s a firefox’s problem.

Also playing with Jscript options won’t fix it.

If you don’t want beta .11 just wait for the next update
# Steveon 29 Nov 2007 at 1:37 am

I’m so glad it was a mozilla thing. I thought I’d edited something bad and broken my website!

It all works here too on this build.

ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2.0.0.11-candidates/rc1

By the way, love your work. The reflection script is A grade.
# Federicoon 29 Nov 2007 at 7:02 am

I quote the Firefox problem. I updated the new version, and doesn’t work. (Firefox 2.0.0.10.)
# Georgeon 29 Nov 2007 at 8:12 pm

Is there anyone else who cannot see reflections in Firefox 2.0.0.10 on a 64 bit machine? (I know I’m in the minority w a 64bit machine

I’m using:

WinXP Pro x64 Edition (ver2003) SP2 (fully patched)

on:

AMD Athlon 64 X2 Dual Core Processor 4400+, 2.21GHz, 2GB RAM

NVIDIA GeForce 6600
# Georgeon 29 Nov 2007 at 8:16 pm

Sorry, after I submitted the post I realized the link I followed to the forum was cached. After reading all of the ‘recent’ posts, I realize I’ll have to wait for the fix on Firefox’s latest fix.
# Futlion 01 Dec 2007 at 10:41 pm

Thank you very much
# Martinon 02 Dec 2007 at 12:21 pm

Hi - Great script!

but I have a little problem… can I show the reflection , without showing the image? The problem is: arround my image I have border-graphics like shadows, round corners etc. So the reflection should be shown out of this border-frames (tables)
# Darranon 02 Dec 2007 at 10:17 pm

Hi I noticed while using my website on an iPhone, the reflections fade to white instead of the background colour of my website, just letting you know.
# Joshon 03 Dec 2007 at 4:44 am

Just a heads up, as this was broken in Firefox 2.0.0.10… it is now verified to be working in Firefox 2.0.0.11.

Huzzah!
# Rodrigoon 03 Dec 2007 at 8:44 pm

firefox updated!!! now working again!!
# Eon 05 Dec 2007 at 3:28 pm

Just how do i implement this on Blogger?

The script part is easy, but how do i manage to add the ‘class="reflect"’ to the img tag when it doesn’t yet exist? I’ve looked everywhere for an answer but I can’t find any. Just the same question posted by other people…

An answer would be nice =)
# Gonzaloon 20 Dec 2007 at 12:45 am

Hello Cow! Thanks for your grate job!

There’s problems to get reflection with the last IE7 updates, reflection don’t work anymore in this browser (same issue with your demo and others scripts that uses alpha).

Have you an idea why don’t work?

best regards,

Gonzalo
# Fotison 20 Dec 2007 at 12:30 pm

Thank you very much for this incredible script. However there is a problem on firefox. I use input src to load it and on IE works fine. Dos not happen the same for firefox.

Any suggestion?

Thank you very much
# Danielon 24 Dec 2007 at 5:19 am

I have a problem on IE, I have several links to open on a different page (target _blank) but it opens the link in the same page. Any ideas on how to solve this problem? Thanks!
# Mikevinon 30 Dec 2007 at 12:32 am

Hi there.

This script isvery good but I have a little problem with Opera. Evrything goes left. Can you help me to align evrything in the middle?

Thank you for your efforts.

Mik
# Tangier Clarkeon 04 Jan 2008 at 4:00 pm

I want to use the reflection for the background image of a table, but don’t know how to nest the code in the background tag for a table.

Can anyone enlighten me?
# Sholbyon 07 Jan 2008 at 1:56 pm

Hello,

I used this excellent script for a project; however, like others before me, i was having problems with IE/Win. In my case the image would be completely duplicated below the original.

Eventually i narrowed the issue down to my use of the "pngbehavior.htc" hack (as seen in http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html).
Removing it would fix the problem. Since in this situation i could replace transparent pngs by gifs, that’s what i did…
Maybe this will help others. (Also note there is another version of the pngbehavior hack that may or may not -haven’t tried it- work correctly with Reflection… This one is at http://scss.com.au/family/andrew/webdesign/pngbehavior/)

Best,
# Judahon 07 Jan 2008 at 7:23 pm

I am having a problem in Firefox 2.0.0.11. I am adding an img element to a div in javaScript. On a slow connection, if I use the class name to get it reflected (i.e. imgtxt += ‘<img class="reflect…..) reflection.js pukes around line 149. If I try to add the reflection via script, i.e. Reflection.add(img, options), reflection.js doesn’t puke, but still no reflection. In IE 7, adding via class also gets nto reflection, but adding via script works. On fast connections it works MOST OF the time in Firefox, and ALWAYS in IE 7.

any ideas?

thanks.
# Marcheloon 08 Jan 2008 at 2:43 am

Hey guys,

How can I add this reflection style to the image element that generating from this code below? I mean, I assume that all I have to is add this line somewhere,

.reflect

Right?

===============================================

<!–
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i]; }}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//–>

<!–
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//–>

===============================================

Thanks a lot.
# Judahon 08 Jan 2008 at 2:57 pm

reflection after adding img via script problem solved, assuming you know the actual size of the image. This function will keep checking to see that the image is fully downloaded and complete, and then add the reflection. You can change the attemptLimit and interval as you see fit. Commented out is just a way to see how many tries it took and the size of the image at each try.

myObj.addReflection = function(imgId, rheight, w, h)
{
    //get the image from the DOM and prepare options
    var img = document.getElementById(imgId);
    var options = new Object();
    options.height = rheight;

    //need to make a new image in case the h & w is set explicitly in

   var img2 = new Image();
    img2.src = img.src;
    //limit how many times the reflection will be atempted
    var attemptLimit = 200;
    var attempts = 0;
    //var msg = "";

    var timer = setInterval(reflect, 125);

    function reflect()
    {
        //msg += "img2.height = " + img2.height + "img2.width = " +img2.width + "\n";
        attempts++;
        if(img.complete && img2.height == h && img2.width == w)
        {
            Reflection.add(img, options);
            clearInterval(timer);
            //msg += "success in " + attempts + " attempts";
            //alert(msg);
            return;
        }
        //give it on last try and give up
        if (attempts >= attemptLimit)
        {
            Reflection.add(img, options);
            clearInterval(timer);
            //msg += "last try after " + attempts + " attempts";
            //alert(msg);
        }
    }
}
# Marcheloon 09 Jan 2008 at 1:12 am

Judah,

Thanks for your help! But I don’t know what exactly to do…! I mean how can I use this code? Just paste it into same .js file or should I replace it with something or…?

Thank you again.
# Marcheloon 09 Jan 2008 at 1:26 am

Another queastion, how can I add a class that is generating from another JS file to this Dreamweaver code?

Thanks.
# Judahon 09 Jan 2008 at 3:35 pm

Marchelo,

this is just some js code to paste somewhere. Here is what I was assuming:

"myObj" is some js object - if you prefer plain-old js to object oriented js, you can do this instead as "function addReflection(imgId, rheight, w, h)"

the parameters are: imgId, the ID of the image element you want reflected, rheight - same as the rheight parameter you set on reflection.js, w - width of the img, h = height of the image

you would call addReflection with those parameters from your js to reflect some image

I don’t know anything about current versions of Dreamweaver - sorry.
# Sigon 19 Jan 2008 at 8:28 pm

Hello, reflection is a great script however I would like to know if it is possible to use within CSS files. I mean I have a div with a background image

#footer {

background-image: url(’images/footer.gif’);

}

and I would like to reflect the background. Is this possible ???

THANKS and Have a good 1!
# Andrewon 22 Jan 2008 at 2:03 am

Hi - as everyone is saying, thank you for the great script and I am as well have one annoying issue:

IN IE: When using show/hide divs, the first div (which loads visible) shows the reflections great. The next few hidden divs (which load with "display:none;" to make them invisible) do not show the reflection when made visible. All other browsers seems to be fine.

Any ideas?
# Metekoon 23 Jan 2008 at 7:14 am

It works fine for me, what error you have and which browser you are using?

Regards,
Meteko
# Mironon 24 Jan 2008 at 8:31 am

Hello script is great but it still does not work with Opera. Links does not work on page with reflection. I am using zenphoto with 400px random reflected image (reflection js 1.7). When I am using smaller images work ok. What can I do ? Is there a posibility to disable script for Opera browser ?
# Ystein Holmenon 25 Jan 2008 at 9:29 am

I was wondering if this script could be rewritten for drop-shadow on images. Has anyone tried?
# Nluk100on 28 Jan 2008 at 9:15 pm

Great script, works well in FF!

Are there any updates for the hyperlink problem in IE7?

I have the latest version 1.7.
# Mccabeon 29 Jan 2008 at 4:04 pm

I really like the effect, and the open source ethos. I want to implement an itunes style interface (horizontal scrolling images with reflection) without using flash for a database project I’m working on. Would you consider supplying a solution for a fee?
# Anupon 01 Feb 2008 at 9:19 am

Hi,

This looks really useful. I would like to make one important suggestion, however:

Please update your implementation of getElementsByClassName() because more and more browsers are supporting it natively now, which is a lot faster. In your code you can check if it exists first, before overriding it.

Thanks!

Anup
# Aygunon 02 Feb 2008 at 3:15 pm

Hello there !!!

Keep the good work !

I have a little qurestion to you.

How can i set the reflection.js to preview some video files from youtube.com?

Can it be done ?

I want to put instead of pictures url the url from youtube videos ad be played when the video i select is in front position.

Thank you !

Aygun

Best regards.
# Tangieron 04 Feb 2008 at 11:42 pm

Can someone please take a look at my test site and tell me why I can’t get reflect.js to work. I’ve implemented it per the instructions and my directory calls are correct.

I can’t figure this one out.

http://tangierclarke.com/TCSite4/accordion/indexer.html
# Alexon 06 Feb 2008 at 5:49 am

it is fixed, thanks !
# Aaron Hoganon 07 Feb 2008 at 4:42 pm

Hey - Great script.

Is there anyway to control the zindex of the relection?

I haven’t spend much time on it so far - but heres my problem:

I have an image with a text label directly below. The reflection bumps the label down below the reflection, whereas I would prefer it to lay on top of the reflection. Any Ideas?

Thanks

Aaron Hogan
# Wortspielon 13 Feb 2008 at 12:45 pm

Hi,

if i use this JS-Code in my Webside, the reflections does not work as expected. Any ideas?

<SCRIPT language=JavaScript1.2>

//Specify rate of display (1/freq)
var freq=1

var random_num=Math.floor(Math.random()*freq)
if (random_num==0)
window.onload=initbox
var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"

var bouncelimit=32 //(must be divisible by
var direction="up"

function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie?
document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}

function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<5+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}

function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}

function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}

function truebody(){
return (document.compatMode &&
document.compatMode!="BackCompat")? document.documentElement : document.body
}
</SCRIPT>
# Sajjadon 13 Feb 2008 at 6:08 pm

Hi Khlo!

The only reason attraced me to leave a message for u is the great script you publised!

I really enjoyed it.

Sajjad

From Iran … the only where all the world have a wrong think about it…
# Imgdon 14 Feb 2008 at 2:19 pm

Hi,

Centering the image, I add it to tag, it works.

style="margin-left: auto; margin-right: auto;"

Thanks!
# Koenon 17 Feb 2008 at 1:13 pm

I made some changes so the script will work with scaled images in IE.

[….]
if (document.all && !window.opera) {
    /* Fix hyperlinks */
                if(p.parentElement.tagName == ‘A’) {
                 var d = document.createElement(’a');
                 d.href = p.parentElement.href;
                }

    /* Copy original image’s classes & styles to div */
    d.className = newClasses;
    p.className = ‘reflected’;

    d.style.cssText = p.style.cssText;
    p.style.verticalAlign = ‘bottom’;

    var reflection = document.createElement(’img’);
    reflection.src = p.src;
    reflection.style.width = reflectionWidth+’px’;
    reflection.style.height = p.height+"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);

    d.appendChild(p);
    d.appendChild(reflection);
[…..]
# Aravindon 24 Feb 2008 at 8:08 am

Congrats on making this script.

Could you please explain how could we use this in a wordpress blog where everything is in PHP.

Where to declare the script file and all.

It would be a great help since there are many who are using WordPress Platform for blogging.

Thank You.
# Rakibon 02 Mar 2008 at 6:10 pm

Hi,
I have written a simple test.html file with the following code

It works in firefox 2.0.0.3 but in IE 6 it shows nothing. Can any one help me plz !
# Ricoon 05 Mar 2008 at 6:36 pm

Hi !
I have a problem with reflection, i hope you will be able to help me… Look at the code :
function load_content(onglet)
{
show_wait_message(’#container’);
$.get(’actions/actions.php’,{ action: “load_content”, onglet:onglet },function(data)
{
$(”#container”).html($.trim(data));
$(”#container”).find(’img.titre_droite’).reflect({height: 0.5, opacity: 0.4});
});
}

The html() function fills the container div with an image (the one I want to be reflected).

(tested with class=”reflect” too)

But on the first load of the webpage, reflection doesn’t appears…
I’ve tried to do alerts in the reflection.js code, and discovered that the alert is given BEFORE the image can be viewed on the page. So I don’t know what to do… Help me please !

Thanks ( and sorry for my bad english, i’m not english :] )
# JayJayon 20 Mar 2008 at 9:52 pm

Hey Check This Out!

Just found A combination of JS, CSS, and HTML.
To create a Reflection of Text.

Must add multiple variables for Mutiple lines.

Paste Into Head:

var x;
x=”Enter Your Text Here.”;

Paste This Into Body:

document.write(x);

document.write(x);

Let me know if it works.
Thought someone might be interested. =)
# Cowon 20 Mar 2008 at 9:59 pm

Hey JayJay! Looks like Wordpress filtered out some of your code, maybe you’d like to post it at pastebin.com or something!
# JayJayon 20 Mar 2008 at 10:21 pm

Oops It excluded Some of the code.
Just go to my site for Full code.

http://ronpaul.741.com/