Image Reflection with jQuery, MooTools and script.aculo.us
Posted on January 11, 2009, Filled under JQuery, JavaScript, MooTools, 
Bookmark it
Thanks for visiting our website! We regularly publish posts like this one. If you are interested in receiving the latest updates as soon as they are posted, please consider subscribing to the RSS feed or to our e-mail newsletter.
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).
Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!
- January 11, 2009
- article by Gabriel C.
- 2 comments
Sponsors
Related Posts
-
How to use the Scroll Effect in jQuery, MooTools and Script.aculo.usat March 16, 2009 with 5 comments
-
Highlight Elements in Script.aculo.us, jQuery and MooTools
at March 29, 2009 with 1 comment
-
Image Cropping with jQuery, MooTools, Prototype & script.aculo.usat December 22, 2008
-
Zoom Images using jQuery and MooToolsat December 21, 2008 with 1 comment
-
Easily add Captions to your Images with jQuery and MooTools
at August 12, 2009
- sure helps...i am a php newbie thanks
on March 15th, 2010 by SeoWiz Kid
- buggy , doesnt send mail , not enugh help . is there any cofiguration on
on March 15th, 2010 by lansen
- thank you verry much,good job! but when i change the dimension and the number of character
on March 14th, 2010 by rami
- Hey Vedrin, did you find your answer about getting all matches on the pages? You
on March 13th, 2010 by nonecantest
-
Light, Flexible, Browser-friendly & Easy to use Framework: EZ-CSSby Gabriel C. on March 14, 2010
-
Multi-touch Vector Gestural Icons: Scalable and Alterableby Gabriel C. on March 13, 2010
-
Facebook-style Lightbox/Modalbox powered by jQuery and MooToolsby Gabriel C. on March 12, 2010
-
Slideshow with Smooth Animated Transition: jQuery Blindsby Gabriel C. on March 11, 2010
Categories
- AJAX (17)
- Design (8)
- Flash (19)
- Freebies (2)
- General (3)
- Graphics (11)
- HTML & CSS (27)
- Frameworks (7)
- JavaScript (111)
- Frameworks (4)
- JQuery (47)
- MooTools (13)
- Photoshop (2)
- PHP (102)
- Reviews (3)
- Statistics (2)
- Web Tools (6)
- Wordpress (13)
Advertisements
Tag Cloud
- ajax login
- alphabetical
- array
- auto grow
- base
- calculate
- captcha
- chart
- charts
- countdown
- css framework
- delimiters
- documents
- dropdown
- extension
- extract
- filename
- fonts
- form
- gd library
- icon set
- iphone
- lightbox
- mod_rewrite
- percent
- Photo Gallery
- picker
- random
- remove
- script.aculo.us
- search
- shopping cart
- skin form elements
- slider
- syntax highlighter
- tableless
- to-do
- validate
- web analytics
- web fetch
- WYSIWYG
- zoom
2 Replies to "Image Reflection with jQuery, MooTools and script.aculo.us"
April 29, 2009 at 1:43 PM
Muito bom !! gostei muito da dica ! abraços !!
July 30, 2009 at 10:02 AM
hello, i used this addon, it was very useful, but i have a problem, i used it with an horizontal slide image gallery (Mootools) when i added the reflexion to it , it was converted to vertical! what should i do? anyhelp pleasse
thanks