Posted on March 16, 2009, Filled under JavaScript, jQuery, MooTools, 
Bookmark it
Using the famous libraries JQuery, MooTools and Script.aculo.us you can easily scroll overflowed elements and the screen itself. Here’s how you can use this cool effect in each library:
JQuery.ScrollTo is an excellent, easy to implement and fully customizable plugin useful to scroll elements or the window itself. There are many ways to specify the target position and many options to customize the animation and the final position. There are 2 additional plugins that can be used with this ScrollTo: jQuery.LocalScroll & jQuery.SerialScroll.
Read more from this entry…
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.
[Go to Project Page | Download | View Demo]
<!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.
[Go to Project Page | Compatibility | Usage | Download | View Demo]
<!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).
Posted on December 22, 2008, Filled under jQuery, MooTools, Bookmark it
JCrop is a JQuery image cropping plugin that can be implemented easily and quickly into a web application. Its advanced cropping functionality can be integrated in any web-based application without sacrificing power and flexibility. This plugin also features clean and well-organized code that works in most modern browsers.
Read more from this entry…
Posted on December 21, 2008, Filled under JavaScript, jQuery, MooTools, Bookmark it
JQZoom is a JavaScript image magnifier built using the popular library JQuery. It works on all modern browsers: IE 6+, Mozilla Firefox 2+, Google Chrome 1.0, Safari 2+, Opera 9+.
Features
- Standard zoom
- Reverse zoom
- Zoom without lens and title
- Custom positioning the jqzoom window
- Fade out effect while hiding
- Fixed IE6- select box bug
[Go to Project Page | View Demos]
MooTools 1.2 image zoom is a script that displays a thumbnail with a selected region in it which is magnified and showed next to the thumbnail. Besides the small image, the original image is needed. Both have to be proportional in size. For example, if the thumbnail has a size of 100 x 300, the big image has to have a size of 400 x 1200 or similar (the ratio should be kept). The JS file is structured as a class and all CSS styles are mainly external.
[Go to Homepage | View Demo]
