jLensMagnify plugin: documentation and demo page
Demo 1 - Standard options
Hover text below to see jLensMagnify in action!
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
This is the javascript code to launch jLensMagnify text color demo splitted by world:
$().ready(function() {
$('#first').jLensMagnify({
startEffect: {'color': 'blue', 'font-size': '36px'},
resetEffect: {'color': 'black', 'font-size': '24px'},
splitChar: ' '}
});
});
Demo 2 - jLensMagnify demo: view only when magnifying glass hover text
Hover text below to see jLensMagnify in action!
It is not easy, try to discover the hidden text! Look with a magnifying glass!
This is the javascript code to launch jLensMagnify with standard options but splitted by world:
$().ready(function() {
$('#second').jLensMagnify({
startEffect: {'color': 'blue'},
resetEffect: {'color': '#F2F2E0'},
splitChar: ' '
});
});
Demo 3 - jLensMagnify standard demo
Hover text below to see jLensMagnify in action!
This is the javascript code to launch jLensMagnify standard demo:
$().ready(function() {
$('#third').jLensMagnify();
});
Documentation
To use this jquery plugin:
- download jquery.jLensMagnify.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.jLensMagnify.js" ></script> ... </head>
-
in the read function launch the jLensMagnify (magnify effect on text with lens) relative at your element:
<script type="text/javascript"> $().ready(function() { $("#elementId").jLensMagnify(); }); </script>
Parameters:
- startEffect - effect of central element - default {'font-size': '150%'}
- resetEffect - effect to reset - default {'font-size': '100%'}
- splitChar - split char, default '' alias letter, otherwise ' ' alias world
Download
You can download the entire archive:
- jLensMagnify.zip - a zip archive containing the plugin source, a minified version of jQuery and a demo page.
- jquery.jLensMagnify.js - js code.
- MagLens.png - lens image.
Release
- 0.2 - Nov 02 2010 - New release more flexible
- 0.1 - Oct 29 2010 - First release of jLensMagnify (magnify effect on text with lens)
License
Dual licensed under the MIT and GPL licenses.