featureimagezoomer doesn't zoom image in my website

**Azita** · 08-12-2015, 06:37 PM

1) Script Title: Featured Image Zoomer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm

3) Describe problem: Hi everyone,

I have added featured image zoomer a long time ago in my website. now it doesn't work on it.
Please help me how to fix that.

Thanks a lot.
Azita

**james438** · 08-12-2015, 07:11 PM

Please post a link to your site so we can see the problem. Can you describe what the script is doing wrong? Is it not running at all? Are there any error messages?

**Azita** · 08-12-2015, 07:45 PM

www.sportek.com
This is the website. I don't know what exactly. I didn't change any thing. It is supposed to do like before. It is running. No error message.
Just when you mouse on images shows in window but doesn't zoom.

**james438** · 08-12-2015, 08:05 PM

I see what you mean. Example page:

http://sportek.com/cgi-bin/back/0/pid/21/name/PRO-300-Pro-Stretch-Spandex-Fleece-Thermal.html

**Azita** · 08-12-2015, 08:19 PM

Exactly! What should I do?

**james438** · 08-12-2015, 09:19 PM

I won't be able to help you with that as I am least skilled in javascript, but there are others here who will probably be able to help you. I did notice that the version you are using is out of date. I recommend updating to the latest version first.

**vwphillips** · 08-13-2015, 03:35 PM

on your page you have

Code:

  $('#image1').addimagezoom({

I can not find an image on your page with the ID of image1

**Azita** · 08-13-2015, 08:58 PM

Hi I have image1 id. <img src="http://sportek.com/sportek/images/product/p-600-2.jpg" alt="" width="350" height="465" border="0" id="image1" style="cursor: crosshair; opacity: 1;" title="">

**Azita** · 08-17-2015, 10:41 PM

Please answer me. Does anybody know how to solve my issue?

**ddadmin** · 08-19-2015, 02:44 AM

Hi Azita:
I think I found the problem. The problem with the enlarged image not zooming is due to several "responsive" styles in your CSS pertaining to the "img" selector restricting the dimensions of that image as well. Firstly, modify your initialization code for the zoomer with the line in red:

Code:

  $('#image1').addimagezoom({
  magnifierpos: 'left',
  zoomrange: [3, 3],
  magnifiersize: [350,225]
 })

This makes the enlarged image 3x the size of the original image. Now if you just did this, you'll notice the distortion in the enlarged image when viewed. That's due to, as mentioned, certain responsive styles in your CSS, namely, style.css:

Code:

@media (min-device-width:800px) {

img { max-width: 100%; }

and tooltip.css:

Code:

/* Tablet Landscape */

@media screen and (max-width: 1060px) {

img { max-width: 100%; }
html { font-size:100%; }

#primary { width:67%; }

#secondary { width:30%; margin-left:3%;} 

}

 

/* Tabled Portrait */

@media screen and (max-width: 768px) {

img { max-width: 100%; }
html { font-size:100%; }

#primary { width:100%; }

#secondary { width:100%; margin:0; border:none; }

}

@media (min-device-width:600px) {

img[data-src-600px] {

content: attr(data-src-600px, url);

}

}

 

@media (min-device-width:800px) {

img { max-width: 100%; }
html { font-size:100%; }

img[data-src-800px] {

content: attr(data-src-800px, url);

}

}

.video-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

height: 0;

overflow: hidden;

}

 

.video-container iframe, 

.video-container object, 

.video-container embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

You'll want to modify the img selectors that modify images' widths of your page indiscriminately to leave out the enlarged image's.