I have posted the following question on another google group, but
could not find anyone that would give me any information. So I'm
posting here to see if I can get some help figuring out what the
problem is.
I'm having some problems using the magnifier ui. Everything seems to
work for one div of images however if I add another div of images the
script does not work as expected. For the second div the image zooms
in when the mouse is not even close to the image. I have posted the
sample code below
and a link to the sample http://www.kikesweb.com/pos/magnifiertest.html
http://www.kikesweb.com/pos/magnifiertest.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dimensions.js"></script
<script type="text/javascript" src="ui.mouse.js"></script>
<script type="text/javascript" src="ui.magnifier.js"></script>
</head>
<script type="text/javascript">
/*Magnifier*/
jQuery(document).ready(function(){
$("#example").magnifier({
overlap:true,
magnification:2,
zindex:'3',
opacity:{min:'0.6', max:'1'},
distance:'20',
baseline:0,
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#secondary").magnifier({
overlap:true,
magnification:2,
zindex:'3',
opacity:{min:'0.6', max:'1'},
distance:'20',
baseline:0,
});
});
</script>
<body>
<div class="playground">
<div id="example">
images/mustang.jpg
images/camaro.jpg
images/plants.jpg
</div>
</div>
<BR>
<div class="playground">
<div id="secondary" class="ui-wrapper example" style="width:
150px;padding:
20px; height: 150px;">
images/mustang.jpg
images/camaro.jpg
images/plants.jpg
</div>
</div>
</body>
</html
-Enrique-