Littlefoot
04-02-2012, 12:27 PM
1) Script Title: Image Power Zoomer v1.1 (http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm)
2) Describe problem:
Hello everyone!
I believe it is me who is doing something wrong; I'm a true newbie with all these stuff, trying to learn it but it takes time. Therefore, I'd be grateful if someone might point me to a right direction.
Here is a sample script (I tried to make it as simple as possible) which displays 3 images. The idea is to make Power Zoomer magnify any of them. It *kind of* works - problem is that whichever image I'm on, the magnifier always shows the last image's magnified area (if you test the code, you'll notice a car on the first image, another car with a green dinosaur on the second one, and two posters on the third image. Magnifier shows details of the third image, regardless of the image I'm hovering over).
<head>
<style type="text/css">
.img_style {width:25%; height:25%; border:3px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="ddpowerzoomer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
$('img.img_style*').addpowerzoom()
})
</script>
</head>
<body>
<img id="pic1" src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/CarsWallpaper800.jpg" class="img_style"/>
<img id="pic2" src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/RealCarsWallpaper800.jpg" class="img_style"/>
<img id="pic3" src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/CarsWallpaper2800.jpg" class="img_style"/>
</body>
On the other hand, if I specify images' names, here:
<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
$('#pic1').addpowerzoom()
$('#pic2').addpowerzoom()
$('#pic3').addpowerzoom()
})
</script>everything works just fine.
Therefore, I'm quite sure that the problem is this:
$('img.img_style').addpowerzoom()
The script homepage says:
$('img.showcase').addpowerzoom() //add zoom effect to images with CSS class "showcase"I tried to do so, but failed. (I tried with another option: "add zoom effect to all images inside DIV", without success). What am I doing wrong?
Best regards,
LF
P.S. Browser I use is MS Internet Explorer 8.0.7600.16385
2) Describe problem:
Hello everyone!
I believe it is me who is doing something wrong; I'm a true newbie with all these stuff, trying to learn it but it takes time. Therefore, I'd be grateful if someone might point me to a right direction.
Here is a sample script (I tried to make it as simple as possible) which displays 3 images. The idea is to make Power Zoomer magnify any of them. It *kind of* works - problem is that whichever image I'm on, the magnifier always shows the last image's magnified area (if you test the code, you'll notice a car on the first image, another car with a green dinosaur on the second one, and two posters on the third image. Magnifier shows details of the third image, regardless of the image I'm hovering over).
<head>
<style type="text/css">
.img_style {width:25%; height:25%; border:3px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="ddpowerzoomer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
$('img.img_style*').addpowerzoom()
})
</script>
</head>
<body>
<img id="pic1" src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/CarsWallpaper800.jpg" class="img_style"/>
<img id="pic2" src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/RealCarsWallpaper800.jpg" class="img_style"/>
<img id="pic3" src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/CarsWallpaper2800.jpg" class="img_style"/>
</body>
On the other hand, if I specify images' names, here:
<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
$('#pic1').addpowerzoom()
$('#pic2').addpowerzoom()
$('#pic3').addpowerzoom()
})
</script>everything works just fine.
Therefore, I'm quite sure that the problem is this:
$('img.img_style').addpowerzoom()
The script homepage says:
$('img.showcase').addpowerzoom() //add zoom effect to images with CSS class "showcase"I tried to do so, but failed. (I tried with another option: "add zoom effect to all images inside DIV", without success). What am I doing wrong?
Best regards,
LF
P.S. Browser I use is MS Internet Explorer 8.0.7600.16385