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

Senamion.com


Senamion:

Categorie:

Archivi:

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!

OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

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!

jQuery jMagnify, magnify effect on text! - Only border-bottom parameters

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%'}
For comments see the blog page.

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

Release

  • 0.0 - Mar 23 2010 - First release of jMagnify (magnify effect on text)

License

Dual licensed under the MIT and GPL licenses.