Reflection.js version 1.5
May 19th, 2006
I’ve just released an big update to reflection.js - 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?
This is a huge update. It fixes many of the bugs and issues that users have been experiencing with previous versions and adds the much-requested ability to set the opacity and the height of the reflection. It also adds scriptable reflection so you can have your reflections repond to user events - for example have the reflection get brighter when the mouse is moved over it. It also works a lot better with scaled images.
As this fixes quite a few bugs, it’ll may also change the look of some of the reflections on your site. Some stuff such as the wholeimage class has been removed. So make sure everything works properly before you upgrade.
Demo
See a demo of reflection.js 1.5 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. Check out the new testsuite too!
Thank you!
I should thank everybody for their feedback and help getting us towards version 1.5. In particular Josh who pulled his hair out trying to fix a problem with reflection of landscape images in Safari!
- Javascript , Reflection , Web 2.0
- Comments(114)
The reflections script does not work on konqueror[1] .. could you please work on it when you hav the time ? The effect is really very nice looking, but it’d be great if it worked on konqueror. Thanks.
[1] - http://konqueror.kde.org/
Hi!
Thanks for the feedback. To my knowledge, KHTML (Konqueror) does not support the <canvas> tag which makes it all possible. Safari which is based on KHTML supports it. If this is backported or <canvas> is added to Konqueror some way or another, it should work in Konqueror.
Congratulations, you’ve been boinged!
Great work on this. It’s what all great apps should be: simple, elegant and nice to look at. I’m inspired to incorporate it into my designs!
Lovely! Thanks for the info
I was impressed! I couldn’t see anything using Firefox, though, so I couldn’t see the relection effect until I loaded your page in Internet Explorer.
Just thought you’d like to know this crashes FireFox 1.5.0.3 on MacOS X 10.4.6. Works like a charm in Safari and on my Windows machine, though. The crash is probably a FireFox bug…
Thanks!
Hi,
Please make sure that your using Firefox 1.5. I notice that a lot of people still use Firefox 1.0 probably due to the fact the Update notification in Firefox 1.0 isn’t particularly good. You will need Firefox 1.5 to use this tool as it uses Canvas which only appeared in Mozilla 1.8.
Regarding the Mac issue, I don’t have a mac so I can’t reproduce. If anyone else has a Mac and could try it out, it’d be appreciated. It works fine on Firefox 1.5.0.3 Windows so not sure what could be causing issues for Mac.
this is sweet..thank you!
Script is on the server, in the public_html directory
Script is included in the head of the document
reflect is added to the image class … and nothing. Firefox and IE … nothing. It’s broken. It doesn’t work. It sucks. I want 30 minutes of my fucking life back
0
Lk you are arrogant and rude. If you can’t get it to work then you are obviously doing something pretty stupid. Are you sure you’re not using FrontPage Express to edit your web pages?
Cow - if that’s your real name - this is an excellent script and it works like a charm. Thanks for taking the time to share it with the community!
Hi … great work!!…
I noticed that it dosent work when there are preloaded images on the page. It would be great if you could generate a fix for that.
Thanks… I really love this
Here’s how to apply it to a phpBB forum:
1. Uploaded reflection.js into / directory
2. Opened viewtopic.php, went to line 849 where it says
and changed it to
There are also 2 other entires right around there and you do the same thing.
3. Opened overall_header.tpl and put this directly above another <script > tag
If you want it to display in profiles and such, you got some more pages to edit. But if you can apply it like I showed you, you should be able to also apply it elsewhere.
here is an older one for comparison - it WAVES/ Animates only for IE
Found this article on digg. This was just something I was looking for my site! Thanks! :)
Doesn’t work on Linux.
Checked with:
On Windows it works, on Linux it doesn’t. Just like that.
Lk: The chances are something else is probably overwriting the window.onload event.
Nk: Try using the Reflection.add() event as documented in readme.html. If you provide a DOM element, it should add a reflection to it.
Dhtml Guy: Looks pretty cool! Thanks!
Jarfil: I believe it worked on Firefox/Linux last time I checked. I wonder if this could be to do with some kind of graphics library.
yo, just incase you are interested, i implemented reflection.js on my site and its smooth - dr00.com
thanks a bunch
To confirm a comment posted above: it does _not_ work in Firefox 1.5.0.3/Universal in Mac OS X 10.4.6/intel. In fact, Firefox crashes consistently just trying to load the page at http://cow.neondragon.net/stuff/reflection/ . Granted, this is clearly a Firefox bug since there should be _NO_ code that can crash the browser, but it’s worth pointing out. It also only barely works in Safari 2.0.3 on the same platform - did somebody mention that the ripples are animated? That’s not evident anywhere that I’ve seen so far in either browser.
No, there are no ripples and they are not supposed to be animated. That comment was linking to a demo of an older reflection script on Dynamic Drive from the first DHTML revolution
It seems like quite a few people have commented about a crash on Firefox Universal Binaries. It works fine on the PPC build. I’d really appreciate it if someone who experiences this issue could submit a bug to Mozilla as they can provide stuff like UA and crash logs.
Thanks for the instructions Andrew! I’ve added it to the implementations list.
Khlo - Nice script, I was installing Wet-floor plugin. But luckily yesterday, I came across your script.I have immediately implemented this and also wrote about on my blog.
http://www.roks.xmgfree.com/blog/2006/05/22/add-reflection-to-images-in-your-site/
This is a truly amazing script. Well done!
I did notice one thing, though. When I apply the reflect class to an image that is wrapped in an <a href="…> element, the link does not appear to work in MSIE 6. It does work in Firefox 1.5 just fine, though (figures :).
Anyway, great work and I plan to make use of this great script!
Christian
There’s now a theme for the Zenphoto simple photo gallery that uses your Reflections.js. It was very easy — only took a minute to link in your javascript and class tag! See the ZenPhoto Theme Directory.
Man … this is awesome !!!!!! I was fascinated by Apple UI’s reflection and started do it on my work , but using photoshop … now it;s on the fly !!!
Cool , THX !!
Thanks for the script! Really great idea!
I thougt I’d mention a few problems I have had (using Firefox 1.5).
onload=”
your script does not run addReflections()
Hi,
I’ve been having an issue with IE, where the reflection seems to extend down a lot farther than the actual image. The image is contained within a table, and doesn’t have any link tags or anything. It does have a rowspan for the cell, but thats about it. Anyone have the same issue?
Update: It seems that the duplicate image created in the reflection script doesn’t copy the set dimensions of the target image.
For example:
I have an image that 600×500 but within the image tag, I set the dimensions equal to 150×150.
In Internet Explorer, the reflection script will create a 600×500 reflection and not the 150×150 size. So though you have a smaller image, the reflection is gigantic.
There is still the issue with the
oops. Sorry. It didn’t like my open “href” tag.
Anyways, thats another problem with the code. In Internet Explorer, the “href” link that surrounds the image won’t work when its reflected.
IE only.
Hi,
Yes - there are issues with reflection of scaled images in IE due to certain limitations in the way it’s reflected. I’ve been exploring ways to get around it but so far nothing yet.
I guess IE doesn’t like having <div> tags nested in an <a href>. Hmm…
Thanks Khlo,
The script looks great! I did modify one thing though. When using this script in Opera 8.5 it moved one of my images around. I know it won’t add a reflection, but it should changed anything else either.
So I added a new if() statement to check if canvas support is present:
if (document.all && !window.opera) { … ie code path … } else { var canvas = document.createElement(’canvas’); if (canvas.getContext) { … canvas code path … } }Next I moved the code that copies the styles from the images to the divs:
This code used to be executed always. In other words, even if the browser did not support reflections the styles and classes were stripped from the image. I’ve moved the code above to inside the ‘IE code path’ and also copied it inside the ‘canvas code path’. The result is that this code is only executed on IE, or if the browser actually has Canvas support.
This solved my problem.
Hi,
Thanks for letting me know about the issues! I’d like to modify the script to include your changes; hope you don’t mind!
Khlo
Hi Khlo,
Of course I don’t mind. Go ahead.
Niels
Hi,
Yes, you can change the default height and opacity of reflections. Right below this line:
Add the following:
You then shouldn’t have to specify ropacity33 and rheight33 in each image.
Thanks for the hint, but maybe i didn’t explain well my problem.
i want a way to automate my overlaying with the mask.png file, but not having to set his w and h (same as the image to which i apply reflection).
Is any way to built in support for an overlaying image, i mean to scale it exactly over the image i am reflectioning?
sorry for bothering…
cheers
simone
Erm, you could try reflecting the mask too - not sure how well it’d work though.
The best thing to do would probably to put mask.png in the actual image.
Thanks.. and have a look here, if you want tell me what you think..
http://www.polaser.org/cercautore.asp
(press F5 for a new picture every time)
cheers Simone
Beautiful! Love the artwork!
Any chance of having the pre-loaded images problem fixed? My page has lots of pre-loaded images and, as mentioned, this breaks reflection.js. I have no clue what a dom element is or how to fix it via the coding solution mentioned above without a step-by-step tutorial.
I wasn’t aware of any breakage with preloaded images; you simply have to call Reflection.add() on the image as you can’t rely on the reflect attribute (it only runs onload of window). Just add onload="Reflection.add(this)" to all of your images when you add them using JS.
Hi there-
First off, great job on reflections! I’m using it on my photoblog (http://rig.hteo.us) and absolutely love it.
I beleive I discovered a bug in version 1.5. When reflecting a GIF file with transparencies, the math to invert a rounded image is backwards. To see an example of what I’m talking about, check out this screen-shot. (http://www.hteo.us/public/relfection_broken.jpg). Notice how the curves are inverted? If you want to play with the source image you can find it here: http://www.citlink.net/~spencey/nav-yesterday.gif
Cheers,
Spence
Me again– Noticed that the problem only occures when the background is NOT #000. e.g., it happens with #333. –Spence
I think there is an issue in Firefox 1.5 with reflected images with transparency. AFAIK it’s a browser bug.
Where do I modify the Lightbox code to add reflections to the larger image?
Thanks!
I can’t speak about where to add it - you will have to use the Reflection.add() function though. You could try onload="Reflection.add(this)" in the image which gets popped up in the Lightbox but as I don’t know the Lightbox code I can’t give you an exact location.
I did look and there is a function call showimage(), but to be honest I couldn’t see where to add it. Here is the link to the lightbox code Lightbox Source Hope you have better luck than me! Thanks a lot
I found code where it pops up the image in HTML it generates and thought to add the class="reflect" to the HTML generation which it did but I found that it changed it to "reflected" and so didn’t create the reflection.
var objLightboxImage = document.createElement("img");
objLightboxImage.setAttribute(’id’,'lightboxImage’);
objLightboxImage.setAttribute(’class’,'reflect’);
objImageContainer.appendChild(objLightboxImage);
After the last line try adding:
Reflection.add(objLightboxImage);
class="reflect" doesn’t work with images which do not exist when the page was loaded (e.g. lightbox images)
Same problem unfortunately. It creates a class for the image called "reflected"
I looked through the code; it looks to me as if the lightbox creates the divs for the images and links once the first time and then changes the source URLs when you click on a link.
Find the changeImage function.
After:
Add:
Hope this helps!
I tried something similar earlier but tried to add the class name to it. That didnt work and unfotunately your suggestion hasn’t worked. It doesn’t error but it doesn’t do anything either!
Have you got a demo? Without actually looking at it and what it does it’s very hard to try and make something work and I really don’t have the time to create a webpage and work out how to install a lightbox on it at the moment.
http://netvibes.dreamhosters.com/jc/lightbox202/
Thanks
Hey,
I explored it a little more - Lightbox calls updateDetails() when the image has loaded into the lightbox. So if you add this to the top of the updateDetails function, it’ll show a reflection:
Reflection.add($('lightboxImage'));However, the lightbox does not resize to allow space for the reflection so you’ll have to modify the code which changes the height of the lightbox. I suggest adding this to the resizeImageContainer function:
1.5 is used because you have the original height of the image plus the height of the reflection which is by default 50%. If you change the height of the reflection, you’ll have to change this value.
HTH.
Thanks very much! You da man!
Slight problem!! It doesn’t seem to work in Firefox 1.5.0.4.
Any ideas?
It worked for me in Firefox 1.5 when I modified the script on my computer. If you can post a URL demo that’d be helpful (I presume the URL above doesn’t have the fixes)
Have uploaded to that URL!
Also added code to remove the reflection in between transitions.
The reflection is added in Firefox but the height doesn’t seem to be increasing for the caption cox. All ok in IE surprisingly
I’ve fixed it!
You need to add *1.5 in the resizeImageContainer to this line
if(!( hDiff == 0)){ new Effect.Scale(’outerImageContainer’, this.yScale, {scaleX: false, duration: resizeDuration, queue: ‘front’}); }
TO
if(!( hDiff == 0)){ new Effect.Scale(’outerImageContainer’, this.yScale*1.5, {scaleX: false, duration: resizeDuration, queue: ‘front’}); }
Ah, beautiful! Looks great too!
I wonder if you might want to consider releasing the modifications so other users could grab a Reflection-enabled Lightbox or (with permission) I could host the modified script on this server. If you want to stick the file on your own site I can also link to that.
Cheers!
Feel free to download the scripts from here
Lightbox
Reflection
At the top of the Lightbox script I have set a Global variable that you will need to change depending on the height of the reflection.
I should think you could modify it further to set the opacity etc on the Reflection.add method.
Look for the updateDetails function and modify this Reflection.add($(’lightboxImage’)); to try the opacity variable. If it works please let me know!
Thanks for all your help!
Jon
***UPDATE***
I have managed to get the height and opacity of the reflection to work.
At the top of the Lightbox script there are 2 variables ,reflectHeight and reflectOpacity, change these 2 variables from 0-1 and the rest will take car of itself.
They are at the same locations as the previous post so Khlo, if you’d like to download them and then host them for others to use feel free!
Thanks again
Okay! I’ve taken the lightbox download, modified it and added a little bit of documentation.
You can get it at http://cow.neondragon.net/stuff/reflection/lightbox.zip. By the way, I didn’t have a URL or web page for you so at the moment it’s just credited to "Jon". If you want this changed or amended let me know!
Hi!
Had a look and looks good!
Hope it gets used lots!
Cheers
Jon
HI, i have a blog through blogger Techinacan.com and i was wondering how i could get this code to work on all the images in my posts. Could someone view the source of my site or something and tell me how to do this?
Please Help!
Contact me at webmasters@techinacan.com
Sorry about the e-mail it’s not suppose to be linked…webmasters@techinacan.com“>
It doesn’t work on the latest Mozilla (Mozilla 1.7.12) - not ewxactly an "older browser" especially not when compared to IE 5.5. JavaScrit *not* disabled.
You need Mozilla 1.8 for canvas tag support; the Mozilla Suite was discontinued at 1.7. It has been renamed to Seamonkey.
Seamonkey is the updated version of the suite and I believe has Mozilla 1.8 so should support reflection.
Sean: I’m not sure how to implement it into Blogger exactly but the instructions in readme.html should apply to Blogspot blogs too.
>> You need Mozilla 1.8 for canvas tag support.
I was referring to the browser, not the engine. I have the latest Mozilla browser, which 1.7.12. (And no, it has not been "renamed" to Seamonkey - that’s a new project, actually.)
Are you saying this Reflection.js requires support for a non-standard "canvas" element? "canvas" is not an element in HTML or XHTML. If it requires support for a non-standard element I’m not interested.
I would be interested to see a standards-compliant implementation though.
The Mozilla Engine is now up to 1.8 and Suite has been discontinued.
Canvas is a new element which is standardized by HTML 5; Mozilla 1.7 is an old browser which does not implement it. Firefox/Seamonkey are considered the successors to Suite.
For the IE 6 A HREF tags not working…
I added an onClick="document.location=’http://yourdomain/path’;" to the img tag and it seemed to work… but didn’t verify that this broke the link (left the A tag on too) in other browsers.
Two issues I noticed though…
1). no cursor change when rolling over what is now a link
2). document.location call doesn’t seem to send the referrer environment variable - and I would like it to!!!!
Hi Khlo, thanx for sharing this script. I liked it and going to use it.
I am not able to resolve one issue here, I am trying to use onmouseover event
to change class attribute of img, like the way I am changing width attribute
in following code …..
<table>
<tr>
<td>
<img src="./images/personal/babymanoj_2.jpg" width="100" alt="" class="" />
</td>
<td>
<img src="./images/personal/babymanoj_2.jpg" width="100" alt="" class="reflect" />
</td>
<td>
<img src="./images/personal/babymanoj_2.jpg" width="100" alt="" class=""
onmouseover="this.width=’150′;"
onmousedown="this.width=’100′;"
onmouseout ="this.width=’100′;"
onmouseup ="this.width=’150′;">
</td>
<td>
<img src="./images/personal/babymanoj_2.jpg" width="100" alt="" class="reflect"
onmouseover="this.class=”;"
onmousedown="this.class=’reflect’;"
onmouseout ="this.class=’reflect’;"
onmouseup ="this.class=”;">
</td>
</tr>
</table>
you can see the affect on this url : http://www.ae.uiuc.edu/~mparmar/reflection.html
please suggest me how can I get the reflect and no reflect depending on
if cursor is over image or away.
–Manoj
Hey,
The best way to do this would be to use a scripted reflection. Adding the "reflect" class won’t work as reflection.js only checks for all images with that class when the page is loaded.
Instead, use Reflection.add and Reflection.remove(). Try something like:
onmouseover="Reflection.add(this)" onmouseout="Reflection.remove(this)"
grt, its working for me. thank you again Khlo
I created a prototype of this for fun, when i was learning how reflection.js works.
It’s created using a modified reflection.js, and uses java for file listing.
Can only be run under Firefox, it enumerates all the image files in the folder the main.html belongs to. Only works on local offline file, i guess.
But it’s only prototype. And I didnt copied the original credits and stuff, please amend it. Thanx !
Download it at:
http://www.freewebs.com/raguel49/TEST.rar
Beautiful
Thanks for linking!
@khlo,
There is no such thing as a *standard* HTML 5. After HTML 4.01 followed XHTML 1.0 and XHTML 1.1. XHTML 2.0 is under development now. None of those define a "canvas" element.
There is, however, a group calling itself the Web Hypertext Application Technology Working Group which is working on what it calls the ‘Web Applications 1.0′ specification (loosely referered to as "HTML 5" or XHTML 5" (which is it then?) wich currently is in *draft* status. Even if WHATWG were a standards organization (which it is not), "HTML 5" is still far from a standard, let alone a web standard.
Sure, everyone is welcome to play in their own non-web-standard playground. Just don’t call it standards-compliant, and don’t call "HTML 5" a standard when clearly it is not.
Of course, the ISO, a real standards organization, never really got anywhere with their own ISO HTML either (a real standard), except in a few (misguided) isolated pockets; it looks good on paper but they forgot one major thing: the whole point of (web) standards is interoperability - a rather strange thing to forget for a standards organization. Currently, only the W3C is creating web standards.
If and when the W3C actually adopts the "Web Applications" specification the WHATWG is drafting I’ll be interested. Until then, Reflection.js is simply not standards-compliant and as such completely devoid of any interest to anyone who cares about web standards and interoperability.
Why not create a standards-compliant version?
I also take iissue with your calling Mizilla 1.7 and "old browser". Mozilla 1.7 is not that - it is, in fact still the most standards-compliant browser around, and as such quite modern. It is not even remotely comparable with IE 5.5 which definitely _is_ old and supposedly _is_ supported. (Addition of support for non-standard elements certainly does not make Seamonkey better, though I’ll take a look what it - potentially - has added (or dropped) in terms of standards support; I’ll need it for testing anyway.)
Instead of describing not-supported browsers as "old" why not simply state "browsers that do not support the canvas element"? That would describe the situation a lot more accurately and thus be far less misleading.
Yes, it is arguable that HTML 5 is as much a standard as XHTML 2 is. The W3C does not have a monopoly on web standards; standard formats such as Javascript, XML-RPC, Atom and PNG have been developed by organizations other than the W3C and people are using those standards.
The WHATWG is simply another of these organizations and what it’s "standards" or specs have been or are being implemented by Safari, Opera, KHTML and Gecko. Mozilla has implemented some SCS storage from the WHATWG specs in Firefox 2.0, Opera has Web Forms 2.0, etc.
The problem with XHTML 2 is it tries to redefine everything and breaks things such as backwards compatibility. I think it’d take at least another 10 years for XHTML 2 to become the dominant language for web pages on the web, if it ever gets finished. However, the WHATWG are doing great work - listening to users of HTML and progressively enhancing on and building on HTML 4 adding features that developers want.
I don’t care whether the W3C has blessed the standard or whether the specification is being developed under the arm of the W3C, the fact is that almost all browsers except from IE are implementing HTML 5 which in my eyes makes it as much of a standard as HTML 4.
I disagree with this statement; Reflection.js is interoperable and works in all 4 of the major browsers. I care about web standards but I also have no problem with using Reflection.js. HTML5 is the best way for the web to move forward at the moment and we shouldn’t let standards, and arguments over who wrote it, hold us back.
Now, there is a reflection script from script.aculo.us which implements it using only HTML 4 and CSS but this method is slower and clogs up the DOM with a few hundred <div> elements. <canvas> is obviously a much better tool for the job and when it’s in the toolbox I don’t see why it can’t be used. However, if you are looking for a pure-HTML 4 solution, I recommend the scriptaculous reflector.
Of course Mozilla 1.7 is a great and standard-compliant browser; I was simply referring to the fact that it has been obseleted by the Mozilla 1.8 (Gecko 1.8) engine.
Never mind what browsers implement - what browsers implement does not make anything a standard.
Something is a standard only when it is published AS a standard - and a DRAFT is not that. That is not the case for XHTML 2.0, and not HTML 5 which both are drafts.
Merely looking at what browsers implement and calling that "interoperability" throws us right back to the 1990s and the very messy beginning of the web with browser manufacturers dreaming up their own tags and implementing them.
I don’t want to go back there.
Well, let’s just agree to disagree.
I don’t believe standards have to be created through any organization - if a lot of people implement and use it in the same way it becomes a standard through use e.g. XmlHttpRequest.
Atom 0.3 is considered a standard even though it was marked as a draft and was implemented in more or less every single feed reader out there and millions installations of blogging software such as Wordpress.
WHATWG does not mean a return to the days of the 1990s - it means we don’t have to stay in the 2000s where HTML and web pages haven’t advanced because the W3C haven’t made any progress in years and XHTML 2.0 will probably never become finished.
OK, we’ll agree to disagree
But there’s a difference between standardization and innovation (though that doesn’t exclude that a standard can be innovative). WHATWG clearly is in the field of innovation while the W3C is in the field of standardization.
But if you say the W3C hasn’t made any progress in years you can’t have been paying much attention lately. They also regularly embrace innovations in their standards.
And have you seen this? http://www.w3.org/WAI/PF/roadmap/DHTMLRoadmap040506.html
(BTW, ATOM 1.0 _is_ a standard, while ATOM 0.3 never was anything but a draft; implementation does not change that.)
Let it be clear that I have nothing at all against innovation. I just object to calling modern browsers "old" and old browsers "new", and I object to calling drafts standards. Enough for now.
(And I absolutely HATE this comment editor which interferes with normal keyboard action. So if I stop my comments I won’t have to deal with that irritation anymore either. ;-))
Hello,
I discovered "reflection" recently. I use the package "lightbox2.02+reflection1.5"… where I replaced "reflection1.5" by "reflection1.6". On the following page, i use the code :
<img src="http://photos.orx57.net/pictures/Aibo/Veda/.thumbs/thumb_IMG_1209.JPG" alt="" style="float:left; margin: 0 1em 1em 0;" class="reflect rheight10 ropacity20" />
-> http://www.orx57.net/veda.php
But there is a gap between image and reflection… after analysis, I do not understand this problem ! It works fine on reflect-o-matic tool.
Does that come from another elements of my code?
Thank you for your assistance!
Small precision: the same work fine here -> http://www.orx57.net/webcam.php
This image is just larger…
<img src="images/webcam.png" alt="Webcam@orx57" style="display:block; margin:0 auto;" longdesc="Webcam@orx57" class="reflect rheight10 ropacity20" />
Bye!
Hi,
I just took a look at http://www.orx57.net/veda.php and clicked on the Lightbox. It seemed to work fine and there was no gap between the image and the reflection.
Not on the Lightbox, but on the page, between the thumbnail and reflection…
I’m not an expert on this but I think it’s likely because you’ve added padding to the image? There seems to be a 3px padding around teh whole image, which I assume will affect the reflection aswell.
I had thought of it… But without padding, it is the same! The reflection is correct with rheight > 20… and on bigger image with same CSS style…
No idea?
Hi,
Sorry for the slow response; thats a strange one. I know there was a bug like that but I thought it was fixed in 1.6; see if commenting the doctype changes it. If it removes it, there must still be an issue somewhere.
Thanks !
Yes, it’s work fine while commenting the doctype…
You can explain me this problem?
Is it possible to make it function with the doctype?
Hi,
In XHTML Strict mode, Mozilla changes the way it renders images - images don’t appear on the baseline or something like that. Normally this can be fixed by changing the style on images - try adding img { vertical-align: bottom } to the CSS. Reflection.js is supposed to give reflected images this CSS so something must be working incorrectly.
Ok. Thank you for information.
It doesn’t work with the img style above. I left the style in the css.
I start to have concepts of Javascript and Ajax. I will look at the code. Without claim… Just for my education
Still thank you.
Bye.
I’d really like to see the reflection effect as a BBcode in phpBB. This would allow people to use it where they like in posts and sigs. How about it, anyone?
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.
Hi,
In XHTML Strict mode, Mozilla changes the way it renders images - images don’t appear on the baseline or something like that. Normally this can be fixed by changing the style on images - try adding img { vertical-align: bottom } to the CSS. Reflection.js is supposed to give reflected images this CSS so something must be working incorrectly.
Hi,
Thanks for letting me know about the issues! I’d like to modify the script to include your changes; hope you don’t mind!
Max
Wow, this code is absolutely amazing. I never knew this is possible with javascript. Thanks alot.
The best way to do this would be to use a scripted reflection. Adding the "reflect" class won’t work as reflection.js only checks for all images with that class when the page is loaded.
thanks for sharing this information
Sandra
Small precision: the same work fine here -> http://www.orx57.net/webcam.php
This image is just larger…
I was fascinated by Apple UI’s reflection and started do it on my work , but using photoshop … now it;s on the fly
thanks!
Werner
Looks really nice, i will integrate it directly in my site…
Great function with such a little code, instead of photoshop work i will use the script now….
I like it - it’s fast and slim. Thanks.
A very helpful script and great tips.
Thanks guys!
I like it = it’s really fast - thanks forthis useful script.
good script. thx.
Reflection.js works in IE6 correct.
A supernormal script!
Thanks
Do you use the latest version of Opera?
any problems with safari?
Come on guys, this is not a place to post your SEO links.
Seems to be really helpful, this script. I checked it with Firefox, Opera and IE6, but i couldnt install IE7, you know why..:) Has anybody have already checked with IE7?
Since this version is now old and many of the solutions to issues can probably be found on the Reflection.js 1.6 page, I’m gonna close the comments. Feel free to post your comments and queries there.