Reflection.js for mootools

Reflection.js for MooTools

Version: 1.5
Category: MooTools Javascripts

Introduction

This is an improved version of the reflection.js script rewritten for the MooTools javascript framework. It allows you to add instantaneous reflection effects to your images in modern browsers, in less than 2 KB.

Demo

The effect is identical to Reflection.js for jQuery which I’ve also developed and which you can see in action on this page.

Features

Compared to the original reflection.js, this script has the following added features:

Performance

Like the original reflection.js, this script is much faster than the script.aculo.us Reflector script (which is not suited for production use), because it does not create a large number of image zones (one for each pixel line). Instead, it uses the canvas tag available in most modern browsers, and DirectX image transformation filters in Internet Explorer, so the reflection image is drawn natively in one step.

Compatibility

This script works in all browsers supporting the canvas tag: Firefox 1.5+, Opera 9+, Safari 2+, Camino, Google Chrome and Internet Explorer 9+. It also works in Internet Explorer 6-8 by using an alternative drawing technique.

In older browsers, the script will degrade automatically (the images will remain untouched).

WARNING
Firefox 2.0.0.10 broke the canvas.drawImage() javascript function and therefore this particular version does not work with this script. Firefox 2.0.0.11 and more recent will work.

It works with all image formats, but reflections of animated GIFs will not be animated: the first frame will be used for the reflection. There is no way to make a dynamic animated reflection for GIF images using javascript.

Requirements

The latest version of Reflection.js for MooTools (obviously) requires the MooTools framework, version 1.3 or version 1.2. Because MooTools is modular, you can make your download smaller by only downloading the modules your scripts are actually using. Here are the modules required by this script:

Usage

Setup

Just include the script in the header of your page, after the inclusion of the MooTools framework:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/reflection.js"></script>

Adding reflections

Reflections can be added to any image tag over any kind of background (even image backgrounds!). There are two ways of adding a reflection:

1) Using HTML, by applying a CSS class named “reflect” to your images:

<img src="test.jpg" alt="" class="reflect" />

This will use the default reflection parameters (see below). You can apply multiple classes to an image (separated by spaces), the script will detect if “reflect” is one of them.

2) Using javascript, by calling the reflect() method directly on the extended image element, or on an Elements collection returned by the MooTools $$() function. Examples:

$("photo1").reflect(options);

or

$$("div#gallery img").reflect(options);

(this last example requires that you include MooTools selectors in your MooTools build)

“options” is an optional argument similar to the other options arguments in MooTools. The following options are available:

If you call this method more than once for the same image, the previous reflection will be automatically replaced by the new one.

Important: If you use javascript to add the reflection effect, you can call these methods either as soon as the DOM is ready (using the MooTools window “domready” event) or by placing the call directly in a javascript block below the image you want to reflect. You don’t need to delay the call after the window “load” event. Your images will appear reflected as soon as they complete loading, even if they were not fully loaded when the javascript method was called. This is the main difference between this script and the original reflection.js.

Removing reflections

You can remove a reflection using javascript, by calling the unreflect() method directly on the extended image element, or on an Elements collection returned by the MooTools $$() function. Example:

$("photo1").unreflect();

CSS limitations

When adding the reflection effect, the script wraps the image inside a <div> block and adds the reflection to the same block, just below the original image. The class and style attributes of the image will be set blank and applied to the div instead, so the whole block will show like the original image. This operation is reverted when removing the reflection.

This means that you can style the mirrored images using CSS classes and using their style attribute, but you can not style the img tag directly.

For example, when reflected, the following image will not display properly because it is using a CSS rule mentioning the img tag:

CSS:

#content img {
   float: left;
   margin: 20px;
}

HTML:

<img src="..." alt="" class="reflect" />

Instead, you must use a CSS class without referring to the img tag (or use the style attribute) and it will display like expected:

CSS:

#content .leftimage {
   float: left;
   margin: 20px;
}

HTML:

<img src="..." alt="" class="leftimage reflect" />

Also, the reflection will display properly with block-style images, but not with inline-style images. If you apply it to an inline-style image, it will be transformed to a block-style image. Most websites use only block-style images, so it should not be a problem.

Finally, you must not specify the height of the reflected image using a CSS class or style property, because the height will increase when the reflection will be applied. Set the width and height attributes on the <img> tag instead if you want to (it’s optional).

Download

Reflection.js for MooTools is free software released under MIT License.
If you like it, talk about it and promote it by linking to this page.

reflection-mootools-1.3.zip [21.04KB]
Reflection.js for mootools v1.5 (for mootools 1.3)
Last updated: 18/08/2011 02:22
Downloads: 1753

reflection-mootools-1.2.zip [14.46KB]
Reflection.js for mootools v1.5 (for mootools 1.2)
Last updated: 25/05/2011 01:09
Downloads: 10590

Deprecated but still available:

reflection-mootools-1.1.zip [9.99KB]
Reflection.js for mootools v1.33 (for mootools 1.11)
Last updated: 17/12/2008 02:17
Downloads: 15049

Changelog

v1.5 (2011-05-25)

v1.43 (2009-11-21)

v1.42 (2008-12-17)

v1.41 (2008-11-26)

v1.4 (2008-06-10), requires MooTools >= 1.2.

v1.3 (2008-06-09)

v1.2 (2007-05-29), requires MooTools >= 1.1.

v1.1 (2007-02-05), requires MooTools >= 1.0.

v1.0 (2006-10-30), requires MooTools >= revision 83.


Your opinion about this software?

There is currently no comment.