I need to admit I am not familiar with the magnifier code, but:
Why do you have two references to document.ready? I would try
combining them, might already solve some problems:
jQuery(document).ready(function(){
$("#example").magnifier({
overlap:true,
magnification:2,
zindex:'3',
opacity:{min:'0.6', max:'1'},
distance:'20',
baseline:0,
});
$("#secondary").magnifier({
overlap:true,
magnification:2,
zindex:'3',
opacity:{min:'0.6', max:'1'},
distance:'20',
baseline:0,
});
});
seems like you use the same setting, why not use a class (magnify)
assign it to both divs, and trigger the function like this (only
once):
$('.magnify').magnifier.....
On Dec 5, 4:17 am, defender71 <[EMAIL PROTECTED]> wrote:
> My apologies if this is posted twice.
>
> 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 samplehttp://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>
> <p>
> <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-
