Moo.flection v0.1

Introduction

With Moo.flection you can easily add a Javascript/CSS based cross-browser reflection with true transparency to you images.

It's based on the Mootools Javascript Framework.

Version number is 0.1 since it's far from finished. A lot of options for implementation should be added and the code has to be optmized for a real release.

For replies, comments, suggestions or questions, please visit my blog entry page.

Implementation

You will need mootools v1.1 or higher and moo.flection.js

Example 1

This is the most simple and basic version. All images within any type of block element with the ID 'reflections' will gain a nice reflection.

// create a new instance for reflections.
var myReflection = new Reflection(
	'simple_reflection',      
);

<div id="simple_reflection">
	<img src="./hella_floor.jpg" alt="Hella On Floor">
	<img src="./sea.jpg" alt="Sea">
</div>    

Result:

Example 2

The following CSS properties on the image will be cloned onto the new parent element:

• float
• clear
• margin
• padding
• background-color
• border

So if we have an image with the following Javascript, CSS and HTML:

// create a new instance for reflections.
var myReflection = new Reflection(
	'css_copied_reflection',        
);

.funnyimage {
	float: left;
	margin: 50px 10px 30px 20px;
	padding: 5px;
	background: #ff0;
	border: 3px solid #f00;
	border-right: 5px dotted #0f0;

}    

<div><img src="./hella_floor.jpg" alt="Hella On Floor" class="funnyimage"></div>
<div id="css_copied_reflection"><img src="./hella_floor.jpg" alt="Hella On Floor" class="funnyimage"></div>    

Example 3

You can also set the height of the reflection and the start of the opacity, and which class an image must have to be able to receive a reflection.

• height ( default: 50 )
• opacity ( default: 0.5 )
• cssClass

// create a new instance for reflections.
var myReflection = new Reflection(
	'reflection_with_options',       
	{
		height:		150,
		opacity:	1,
		cssClass:	'give_it_to_me_baby'
	}
);

<div id="reflection_with_options">
	<img src="./hella_floor.jpg" alt="Hella On Floor" class="give_it_to_me_baby">
	<img src="./hella_floor.jpg" alt="Hella On Floor">
</div>