PDA

View Full Version : Image Power Zoomer: how to make it work on multiple images?



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

Littlefoot
04-07-2012, 06:54 PM
Anyone, please?

Here's an illustration (just in case you didn't understand what I was saying): three images. When I hover over the first (or the second) image, details from the last one are displayed in the magnifier which is, obviously, wrong.

http://img684.imageshack.us/img684/6715/powerzoom.png (http://imageshack.us/photo/my-images/684/powerzoom.png/)

This is the latest code I tried:

<html>
<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
$("#slike img").css("border", "2px solid red")
$("#slike img").addpowerzoom()
})
</script>
</head>

<body>
<div id="slike">
<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"/>
</div>
</body>
</html>

This *might* be a culprit:

<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
$("#slike img").css("border", "2px solid red")
$("#slike img").addpowerzoom()
})
</script>
I believe that I did it right; at least, this line:
$("#slike img").css("border", "2px solid red")correctly created 2px solid red border around ALL images.

So, how come
$("#slike img").addpowerzoom()wasn't applied correctly?

Lucas Anschau
06-05-2012, 09:39 PM
Hey!

I think i am too late, but there is the respost...


$('img.img_style').each(function(){
$(this).addpowerzoom();
});