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(); });
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'} }); });
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'} }); });
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%'} }); });
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'} }); });
To use this jquery plugin:
<head> ... <script type="text/javascript" src="http://www.codefans.net/js/jquery.js" ></script> <script type="text/javascript" src="http://www.codefans.net/js/jquery.jMagnify.js" ></script> ... </head>
<script type="text/javascript"> $().ready(function() { $("#elementId").jMagnify(); }); </script>