Jquery Zoom [Support thread]

[chadderuski]

re: magiczoom resizing effect...

this appears to be from http://script.aculo.us/

magictools is most likely incorporating this in some way

[philip937]

just downloaded jqzoom source files with demos and changed one of the image files supplied to a different size. works fine, so there must be something conflicting here,possibly the zen image size being set, will do some more digging

[philip937]

dont know if this makes a differnce, but the demos thumbnails in the html file are coded as:

<li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb3.jpg'></a></li>

notice only the inital one has a class of class="zoomThumbActive"

who ever originally put together this zen version has the html outputting this:
<li><a class="bonzer" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
<li><a class="bonzer" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
<li><a class="bonzer" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb3.jpg'></a></li>

notice how all have the class bonzer and not only the initial image with the class zoomThumbActive

im sure this has nothing to do with the stretching problem but just noticing the differences..

[philip937]

I have found the problem

<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a href="' . $products_image_large . '" class="bonzer_zoom" rel="product_info">' . zen_image(addslashes($products_image_medium), addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '</a>'; ?>');
//--></script>

setting the size here MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT is what is causing it.

I did a test on a product and hard coded the html source output of this for the page and removed the height and width and does as you expect.. however there is a flaw with what you are trying to do unless you use large images as unless you restrict the height and width of your small images you wont actually be zooming anything.

so you have the choice of either using large images and changing the code to not restrict the width and height, or change all your small images to the same scaling.

unless you can see a workaround to this?

[chadderuski]

I looked at the source after clicking on one of the additional images and even though the href pointed to the additional image (and why jqzoom works), the dimensions given and the document.write() is still defined as the original image and dimensions...

[philip937]

I looked at the source after clicking on one of the additional images and even though the href pointed to the additional image (and why jqzoom works), the dimensions given and the document.write() is still defined as the original image and dimensions...

That's what I just said. Essentially the jquery is replacing the image in that element it's not changing the sizes set.

They are set my zencart. So like I said either you have to remove the part of code that sets a width and height and use larger images to zoom to, or you have to batch change all your images to the same width and height maintaining their aspect ratio. Not unless you fancy recording the q query to not only pass the image defined as smallimage: and as well pass the width and height and replace that part too.

Way above my head though I'm afraid. So best I can suggest is te two options above. Sorry :-(

[philip937]

I think the fix would be to remove the height and width on the img tag the apply the MEDIUM Inage width and height to a wrapper div, then use css and do something like

#Imagewrapperdiv img {
max-width 100%;
}

That make sense?

[philip937]

@chadd

Done this on my iPhone so might be screwy, try this for a starter for ten and see the result.

Replace this in the template file for main image


<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a href="' . $products_image_large . '" class="bonzer_zoom" rel="product_info"><img src="' . $products_image_medium . '" /></a>'; ?>'); //--></script>

Backup backup backup..