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

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).

Code:

<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:

Code:

  <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:

Code:

$('img.img_style').addpowerzoom()

The script homepage says:

Code:

$('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.

This is the latest code I tried:

Code:

<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:

Code:

  <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:

Code:

$("#slike img").css("border", "2px solid red")

correctly created 2px solid red border around ALL images.

So, how come

Code:

$("#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...

Code:

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

Thread: Image Power Zoomer: how to make it work on multiple images?

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions