JqueryJquery plugins   PortFolioSenamion's PortFolio HomeHome page corner A jquery blog

Senamion.com


Senamion:

Categorie:

Archivi:

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!

"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 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
For comments see the blog page.

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.
Or single file:

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.