jMagnify plugin: documentation and demo page
Demo 1 - Standard options
Hover text below to see jMagnify in action!
jQuery jMagnify, magnify effect on text!
This is the javascript code to launch jMagnify with standard options:
$().ready(function() {
$('#first').jMagnify();
});
Demo 2 - jMagnify text color demo (in a A element)
Hover text below to see jMagnify in action!
Click here for my italian blog! (this is an A element)This is the javascript code to launch jMagnify text color demo:
$().ready(function() {
$('#second').jMagnify({
centralEffect: {'color': 'yellow'},
lat1Effect: {'color': 'orange'},
lat2Effect: {'color': 'red'},
lat3Effect: {'color': 'magenta'},
resetEffect: {'color': 'black'}
});
});
Demo 3 - jMagnify background-color demo
Hover text below to see jMagnify in action!
This is the javascript code to launch jMagnify background-color demo:
$().ready(function() {
$('#third').jMagnify({
centralEffect: {'background-color': '#FFFF00'},
lat1Effect: {'background-color': '#FFFF44'},
lat2Effect: {'background-color': '#FFFF88'},
lat3Effect: {'background-color': '#FFFFCC'},
resetEffect: {'background-color': 'white'}
});
});
Demo 4 - jMagnify character box demo
Hover text below to see jMagnify in action!
jQuery jMagnify, magnify effect on text! - Character in a box
This is the javascript code to launch jMagnify character box demo:
$().ready(function() {
$('#fourth').jMagnify({
centralEffect: {'border': '4px solid red', 'font-size': '200%'},
lat1Effect: {},
lat2Effect: {},
lat3Effect: {},
resetEffect: {'border': '0', 'font-size': '100%'}
});
});
Demo 5 - jMagnify border-bottom demo
Hover text below to see jMagnify in action!
This is the javascript code to launch jMagnify border-bottom demo:
$().ready(function() {
$('#double').jMagnify({
centralEffect: {'border-bottom': '4px solid red'},
lat1Effect: {'border-bottom': '3px solid red'},
lat2Effect: {'border-bottom': '2px solid red'},
lat3Effect: {'border-bottom': '1px solid red'},
resetEffect: {'border': '0'}
});
});
Documentation
To use this jquery plugin:
- download jquery.jMagnify.js and images files
- download last version of jquery.js
-
include the js in the head section of the page:
<head> ... <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/jquery.jMagnify.js" ></script> ... </head>
-
in the read function launch the jMagnify (magnify effect on text) relative at your element:
<script type="text/javascript"> $().ready(function() { $("#elementId").jMagnify(); }); </script>
Parameters:
- centralEffect - effect of central element - default {'font-size': '200%'}
- lat1Effect - effect of first element near the central - default {'font-size': '180%'}
- lat2Effect - effect of second element near the central - default {'font-size': '150%'}
- lat3Effect - effect of third element near the central - default {'font-size': '120%'}
- resetEffect - reset effect - default {'font-size': '100%'}
Download
You can download the entire archive:
- jMagnify.zip - a zip archive containing the plugin source, a minified version of jQuery and a demo page.
- jquery.jMagnify.js - js code.
Release
- 0.0 - Mar 23 2010 - First release of jMagnify (magnify effect on text)
License
Dual licensed under the MIT and GPL licenses.