Jquery Zoom [Support thread]

[philip937]

@chadd

I am pretty limited on my abilty to diagnose the jquery, maybe you are better with it or someone else can look. If I were to guess its either happeing here:

//binding click event on thumbnails
var thumblist = new Array();
thumblist = $('a').filter(function () {
var regex = new RegExp("gallery[\\s]*:[\\s]*'" + $.trim(el.rel) + "'", "i");
var rel = $(this).attr('rel');
if (regex.test(rel)) {
return this;
}
});

or here:

swapimage: function (link) {
el.largeimageloading = false;
el.largeimageloaded = false;
var options = new Object();
options = $.extend({}, eval("(" + $.trim($(link).attr('rel')) + ")"));
if (options.smallimage && options.largeimage) {
var smallimage = options.smallimage;
var largeimage = options.largeimage;
$(link).addClass('zoomThumbActive');
$(el).attr('href', largeimage);
img.attr('src', smallimage);
lens.hide();
stage.hide();
obj.load();
} else {
alert('ERROR :: Missing parameter for largeimage or smallimage.');
throw 'ERROR :: Missing parameter for largeimage or smallimage.';
}
return false;
}

it definatly seems to stretch to fit the size of the main image size which kinda makes sense i guess.

other than that the only other thing i can suggest is to use a batch image editor and make all images the same dimensions by fitting to rectangle. I would always reccomend this anyway as this way your product info page stays the same no matter what images are displayed. but I appreciate other people have different preferences.

sorry im not more help at this time.

[philip937]

or could be this..

this.setdimensions = function () {
this.node.w = (parseInt((settings.zoomWidth) / el.scale.x) > smallimage.w ) ? smallimage.w : (parseInt(settings.zoomWidth / el.scale.x));
this.node.h = (parseInt((settings.zoomHeight) / el.scale.y) > smallimage.h ) ? smallimage.h : (parseInt(settings.zoomHeight / el.scale.y));

[chadderuski]

It looks like magiczoom uses much of the same code as jqzoom, but they've got a good implementation:

http://96 .30 .40.167/index.php?main_page=product_info&cPath=1&products_id=1

This is a different test with only magiczoom....

[philip937]

It looks like magiczoom uses much of the same code as jqzoom, but they've got a good implementation:

http://96 .30 .40.167/index.php?main_page=product_info&cPath=1&products_id=1

This is a different test with only magiczoom....

very neat. would do my head in how it moves it all about though. if its similar see if you can see if you can see how they are making the main image change size..

[chadderuski]

very neat. would do my head in how it moves it all about though. if its similar see if you can see if you can see how they are making the main image change size..

outside my skills. they've compressed and obfuscated the javascript... :9

[philip937]

just emailed the author of jqzoom.. see if they have any suggestions

[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?