I think the problem might be the styling setting on the second div, you are making a box of 150 * 150 (and therefore images are on two lines). The images seem to enlarge if you hover a couple of pixels below the image instead of on top of the image (perhaps corresponding more to the middle of the div), there seems to be some miscalculation by the plugin on where the image is. Shouldn't really happen so is probably a glitch in the magnifier code.
On Dec 5, 7:35 pm, defender71 <[EMAIL PROTECTED]> wrote: > I have changed the code to the one below, however the problem is still > the same. On their sample (http://ui.jquery.com)pagethey have > multiple examples all in one page, but can't figure out how they are > doing it. I'm new to jQuery and so far I like it, but there is that > learning curve that I have to take care of. > > Thanks for your help. > > <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> > > <script type="text/javascript"> > /*Magnifier*/ > jQuery(document).ready(function(){ > $(".magnify").magnifier({ > overlap:true, > magnification:2, > zindex:'3', > opacity:{min:'0.6', max:'1'}, > distance:'20', > baseline:0, > > }); > }); > > </script> > </head> > <body> > <div class="playground"> > <div class="magnify"> > <img src="images/plant3.jpg" width="48" title="Mustang Category"> > <img src="images/plant4.jpg" width="48" title="Mustang Category"> > <img src="images/plants.jpg" width="48" title="Mustang Category"> > </div> > </div> > <p> > <BR> > <div class="playground"> > <div class="magnify" style="width: 150px;padding: 20px; height: > 150px;"> > <img src="images/plant4.jpg" width="48" title="Mustang Category"> > <img src="images/plant3.jpg" width="48" title="Mustang Category"> > <img src="images/plants.jpg" width="48" title="Mustang Category"> > </div> > </div> > > </body> > </html> > > -Enrique- > > On Dec 5, 1:47 am, David Decraene <[EMAIL PROTECTED]> wrote: > > > I need to admit I am not familiar with themagnifiercode, 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 themagnifierui. 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-
