PDA

View Full Version : 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/dynamicindex4/featuredzoomer.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


$('#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:


$('#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:


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

img { max-width: 100%; }

and tooltip.css:



/* 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.

Azita
08-26-2015, 09:02 PM
Thank you so much dear DD Admin,
you're right.
It is solved.
Just wanted to know for zoomrange I changed to [3,3] but doesn't go bigger.
Please let me know how I can solve that.

regards,

ddadmin
08-26-2015, 11:49 PM
If you want to enable different ranges of zoom change [3,3] to say [2,5] for zooming between 2x and 5x, changable using the mouse wheel.

Azita
08-28-2015, 07:56 PM
Thanks, That is good. But I meant the size of Rectangle to zoom become bigger. It means when you mouse over it zooms to the left hand side in the Rectangle. i want that Rectangle become bigger.
How can I do that?

ddadmin
08-31-2015, 07:29 PM
Hmm if I understood you correctly, simply change the "magnifierpos" option value inside the initialization code:


jQuery(document).ready(function($){

$('#image1').addimagezoom({
magnifierpos: 'left',
zoomrange: [3,5],
magnifiersize: [350,225]
})
$('.magnifyarea').last().attr('id', 'myarea');

})