September 30th, 2008
I’m pleased to announce the release of Reflection.js 2.0 – a cross-browser script to add reflections to images on your webpage.
It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome and Opera 9+. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.
What’s new?
Version 2.0 adds support for the new Google Chrome browser. Cheers to Levenez for the heads-up on this. This version has also been tested in Internet Explorer 8 and works absolutely fine and dandy!
Demo
See a demo of reflection.js 2.0 in action or try it out with one of your images on the reflect-o-matic.
The reflection.js download includes some more examples of how reflection.js can be used including varying the height, opacity and responding to user actions.
Thanks!
Thanks once again to everyone who has used the script, left feedback and helped to iron out any bugs or issues over the last years! If you use the script on one of your site or photo galleries, please leave a comment! It’s really fantastic seeing how people put the script to use!
September 6th, 2008
I’ve been inundated over the last few days with emails regarding Reflection.js not working correctly in the IMO rather buggy Google Chrome browser. Thanks for everyone who reported the issue!
Google Chrome is based on Safari’s WebKit engine. Reflection.js works absolutely fine in Apple Safari so there is no problem with Reflection.js’s support for WebKit. It is more likely that this is either a rendering issue with Google Chrome or a small modification needs to be made to ensure compatibility with Chrome.
Indika pointed out:
Chrome doesn’t seem to work well with the Canvas element and the getContext(“2d”).createLinearGradient() with colorStops having an alpha value ranging from 0.0-1.0. A good example of this in use is Reflection.js.
photo: zenera
Unfortunately I’ve not had a chance to play around with Reflection.js in Chrome quite yet because I’ve got several work deadlines coming up! If anybody in the community does discover the specific issue and/or a possible Google Chrome “Hack” or patch, I would love to hear about it so that we can include it in the script! Cheers!
P.S. Anybody using Google Chrome should be aware of the security and privacy issues associated with the current release. Simply, Chrome is *not* ready for everyday use.
May 31st, 2008
With the release of Firefox 3 just around the corner, I just wanted to remind everybody that they will need to update to Reflection.js v1.9 in order to ensure Reflection.js keeps working as expected for visitors who use Firefox 3 or Safari 3.1. You can upgrade simply by downloading the version 1.9 and replacing your existing copy of the “reflection.js” file with the copy from the version 1.9 download.
If you want to know why Firefox 3 and Safari 3.1 break Reflection.js and other scripts which were based on prototype.js, see my blog entry on document.getElementsByClassName regressions introduced by these latest browsers.
May 8th, 2008
In the latest builds of Safari, you can reflect images using just CSS. Apple have come up with the proprietary -webkit-box-reflect CSS property for this.
reflection is a replica of the original object with its own specific transform and mask. The box-reflect property can be used to specify the specialized transform and mask that should be used for the replica.
-webkit-box-reflect: <direction> <offset> <mask-box-image>
<direction> can be one of above, below, left or right.
<offset> is a length or percentage that specifies the distance of the reflection from the edge of the original border box (using the direction specified). It can be omitted, in which case it defaults to 0.
<mask-box-image> is a mask-box-image that can be used to overlay the reflection. If omitted, the reflection has no mask.
Why use this over Reflection.js? Well, you can reflect any element – not just images. This includes for example the <video> element. But unfortunately it’ll only work in Safari and as far as I know, no other browser vendors are in the process of implementing anything similar.
In the future perhaps Reflection.js will simply provide a wrapper using <canvas> in Firefox and Opera, Webkit CSS in Safari and VML in Internet Explorer (at the moment canvas is also used in Safari).
March 24th, 2008
Coverflow in Javascript seems to be a big trend at the moment. Raith created an absolutely stunning script which implements not only a coverflow in Javascript complete with angled images and reflections, but a iPod-style scroll wheel in Javascript.
Raith writes:
Hiya. I’ve worked plenty more on my “CoverFlow” javascript and present the first release here. The CoverFlow and the PodNav items below are 2 entirely separate modules which just happen to work really nicely together. You can happily use either one without the other. The CoverFlow can be as wide as you want and use any size (square) images.
I’m not even entirely sure how the angled images are created in Javascript but it’s certainly not lots of divs and it’s very very fast. Also, the script seems to be surprisingly small in download size. Simply stunning.
March 21st, 2008
Reflection.js is a cross platform script which allows you to add reflections to images on your web pages.
It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.
What’s new?
Version 1.9 fixes an issue in Firefox 3, Safari 3.1 and other browsers which implement the document.getElementsByClassName function natively. In older versions of reflection.js, every second image will get reflected.
Demo
See a demo of reflection.js 1.9 in action or try it out with one of your images on the reflect-o-matic.
The reflection.js download includes some more examples of how reflection.js can be used including varying the height, opacity and responding to user actions.
Thanks!
Thanks once again to everyone who has used the script, left feedback and helped to iron out any bugs or issues over the last years! If you use the script on one of your site or photo galleries, please leave a comment! It’s really fantastic seeing how people put the script to use!
March 17th, 2008
You’ve probably all seen “coverflow” in the new iPhone and iPod Touch. It shows your album covers in a “carousel” kind of format, where you can flick between different albums.
ProtoFlow is a script which implements this on your website using Javascript. It generates the effects and interface using Prototype.js and Scriptaculous, and the image reflections using Reflection.js.
The interface dragging through the different albums is really nice. It doesn’t distort/angle the albums at the side (this could possibly be achieved using Christian Effenberger’s amazing reflex.js , albeit with additional licensing restrictions). It also doesn’t seem to work in IE.
I think it’s a fantastic example of what Reflection.js can do anyway (also notice the reflections of the album covers show through each another). A script to watch!
March 7th, 2008
Reflection.js is a cross platform script which allows you to add reflections to images on your web pages.
It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.
What’s new?
There are several improvements especially for Internet Explorer – firstly, reflections now show below the image as they should in IE standards mode. With scaled images in IE, reflections are no longer stretched. As some modern browsers support document.getElementsByClassName out of the box, Reflection.js will no longer overwrite this function. And finally, a copy of reflect-o-matic has been bundled with the download for ease of use.
Demo
See a demo of reflection.js 1.8 in action or try it out with one of your images on the reflect-o-matic.
The reflection.js download includes some more examples of how reflection.js can be used including varying the height, opacity and responding to user actions.
Thanks!
Thanks once again to everyone who has used the script, left feedback and helped to iron out any bugs or issues over the last years! I’m very pleased that the script was downloaded from this website for the 100,000th time this month. If you use the script on one of your site or photo galleries, please leave a comment! It’s really fantastic seeing how people put the script to use!
March 5th, 2008
For some reason, Opera seems to handle the onload event for images differently from other browsers – I think it called onload() on an image which I had created in the DOM (and hence was already cached) but not yet added to a document. Or it didn’t call onload() on an already loaded image.
Anyway, something along these lines sorted it:
if (window.opera && image.complete) {
image.onload();
}
So Opera fans can now use Reflect-o-matic version 2! There still seems to be some issues with the image search in Opera but thats a minor thing. Now just to get it to work in Internet Exploder…
March 2nd, 2008
After yesterday’s release of reflect-o-matic v2, I’ve just created a bookmarklet for reflect-o-matic.
This is pretty funky.Drag the bookmarklet to your bookmark or links toolbar. Then when you’re on any webpage on the internet, clicking the bookmarklet will show you all the inline images and all the linked images from the current page. You can then load it into reflect-o-matic just by clicking on the image.
This should hopefully save a lot of time: see a nice picture on Flickr and hit the “Reflect-o-matic” bookmarklet. “Reflect-o-matic” has an algorithm which will try to make the reflection look pretty nice and give you the HTML code to add it to your webpage. Just paste the HTML into your webpage and you’re done. No more copy and pasting of URLs!
Remember that you should not insert copyrighted images or hotlink images from other webpages without permission from the copyright/website owner first. It is your responsible to ensure this.
