Image Reflection with jQuery, MooTools and script.aculo.us
Posted on January 11, 2009, Filled under JavaScript, jQuery, MooTools, 
Bookmark it
Reflection.js for jQuery is an improved version of the reflexion.js script rewritten for the JQuery library. It’s easy to integrate, as you only need 2 files to call: the (latest) JQuery Library file and the Reflexion JS File. You can add instantaneous reflexion effects to your images in modern browsers in less then 2KB.
Some advantages of this new script:
* The reflection appear instantly under each image, after each image is loaded, without having to wait for all images to load and apply the reflection for all at the same time.
* The new code has a smaller size than the original reflection.js, being optimized for JQuery.
* The code has a few bug fixes that the original script doesn’t have. It usually works better.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<html>
<head>
<title>Image Reflexion with JQuery</title>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.reflection.js"></script>
<script type="text/javascript">
<!--
// Code moves from jquery.reflection.js
jQuery(function($) {
$("img.reflect").reflect({/* Put custom options here */});
});
//-->
</script>
</head>
<body>
<img alt='' src='images/js-logo.png' class='reflect'><br />
<img alt='' src='images/image-one.png' class='reflect'><br />
<img alt='' src='images/image-two.png' class='reflect'>
</body>
</html>
As you can notice a CSS class named ‘reflect’ is applied to the images. This uses the default reflection parameters:
$("img.reflect").reflect({/* Put custom options here */});
If you need to remove reflexion you can call the unreflect() method on a JQuery selector:
$("#photo_id_here").unreflect();
More information regarding the usage of this script can be found on the script’s page.
Reflection.js for MooTools is an improved version of the reflexion.js script rewritten for the MooTools JavaScript framework. The script has the same image reflection effect and features as the Reflection.js for JQuery.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<html>
<head>
<title>Image Reflection with MooTools</title>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/mootools.reflection.js"></script>
<script type="text/javascript">
<!--
// Code moved from mootools.reflection.js
window.addEvent("domready", function() {
$$("img").filter(function(img) {
return img.hasClass("reflect");
}).reflect({/* Put custom options here */});
});
//-->
</script>
</head>
<body>
<img alt='' src='images/mootools.jpg' class='reflect'><br />
<img alt='' src='images/image-one.png' class='reflect'><br />
<img alt='' src='images/image-two.png' class='reflect'>
</body>
</html>
script.aculo.us Reflector is a script that uses opacity-based fades and works on any background, including image-based backgrounds.
Click here to view the script in action (check the source of the page to understand how it works).
