jQuery Magnify Tool
Hello again!
Let’s checkout a fresh useful plugin jQuery – magnify tool.
All you got to go is to make 2 proportional images one of them should be small, another one should be normal sized, html markup, and a small piece of JavaScript code.
It looks like this:
jQuery magnify tool
You can make easy changes:
jQuery magnify tool 1
Tester on:
Windows: IE 6, IE 7, FF 2+, Safari 3.1;
Mac: FF 2+, Safari 3.1.
Some Notes:
* Picture proportions MUST be the same
* If you got a very big picture you can set an event on which the image pre-loading starts (mouseover, click)
HTML
Alright let’s get our hands dirty. HTML is very easy and self-explanatory. Connect jQuery, plugin and mark the images.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>jQuery magnify tool</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.magnify-1.0.2.js"></script>
<style>
img {
border: 1px solid #CCC;
}
</style>
</head>
<body>
<h1>Subway</h1>
<p>Subway with magnify tool</p>
<h3>Default Settings</h3>
<p><a href="walkmap.gif" id="magnify1"><img src="walkmap_small.gif" /></a></p>
<h3>Modified settings</h3>
<p><a href="walkmap.gif" id="magnify2"><img src="walkmap_small.gif" /></a></p>
</body>
</html>
JavaScript
The first time around we will call the tool with default image loading procedure on mouseover)
<script type="text/javascript">
$("#magnify1").magnify();
</script>
Now let’s make the image load on click and add a few settings.
<script type="text/javascript">
$("#magnify2").magnify({
showEvent: 'click',
hideEvent: 'click',
lensWidth: 60,
lensHeight: 60,
stagePlacement: 'right',
lensCss: { backgroundColor: '#cc0000',
border: '0px',
opacity: 0.5 },
stageCss: { border: '4px solid #33cc33' }
});
</script>
Advanced Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| lensWidth | integer | 100 | tool’s length |
| lensHeight | integer | 100 | tool’s hight |
| showEvent | string | ’’mouseover’’ | event on which the tool appears |
| hideEvent | string | ’’mouseout’’ | event on which the tool disappears |
| stagePlacement | string | ’’right’’ | event on which the tool appears Tool’s location from the picture’s viewpoint (right, left) |
| preload | boolean | true | automatic image load on true |
| loadingImage | string | Loading indicator image | |
| stageCss | object | Styles for area of magnifying | |
| lensCss | object | Styles for magnifier | |
| onBeforeShow | function | Function that executes before the magnifier starts | |
| onAfterShow | function | Function that executes after the magnifier starts | |
| onBeforeHide | function | Function that executes before the magnifier hides | |
| onAfterHide | function | Function that executes after the magnifier hides |
Have a good day!!!
Category: Web Design | Tags: HTML, jQuerry One comment »
June 8th, 2009 at 8:17 am
Thank for all. But, I want a text mangnifier script. Help me!