Zen Cart Logo
Forums / All Other Contributions/Addons / Jquery Zoom [Support thread]

Jquery Zoom [Support thread]

Views: 82,260

Results 261 to 280 of 385
06 Feb 2013, 20:20
#261
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Jquery Zoom [Support thread]

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

06 Feb 2013, 20:29
#262
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

06 Feb 2013, 20:36
#263
chadderuski avatar

chadderuski

Totally Zenned

Join Date:
Apr 2006
Location:
Dark Side of the Moon
Posts:
986
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

06 Feb 2013, 20:38
#264
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

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

06 Feb 2013, 20:44
#265
chadderuski avatar

chadderuski

Totally Zenned

Join Date:
Apr 2006
Location:
Dark Side of the Moon
Posts:
986
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

philip937:

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

06 Feb 2013, 20:48
#266
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

06 Feb 2013, 20:54
#267
chadderuski avatar

chadderuski

Totally Zenned

Join Date:
Apr 2006
Location:
Dark Side of the Moon
Posts:
986
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

re: magiczoom resizing effect...

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

magictools is most likely incorporating this in some way

06 Feb 2013, 21:04
#268
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

06 Feb 2013, 21:16
#269
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

06 Feb 2013, 21:30
#270
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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?

06 Feb 2013, 21:41
#271
chadderuski avatar

chadderuski

Totally Zenned

Join Date:
Apr 2006
Location:
Dark Side of the Moon
Posts:
986
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

06 Feb 2013, 21:45
#272
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

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

06 Feb 2013, 22:11
#273
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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?

06 Feb 2013, 22:30
#274
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

06 Feb 2013, 22:39
#275
chadderuski avatar

chadderuski

Totally Zenned

Join Date:
Apr 2006
Location:
Dark Side of the Moon
Posts:
986
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

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

Well, the zoom works, but the image is simply displayed full size. Your idea would probably work if I had my images sized small/med/large like with IH4.

06 Feb 2013, 22:40
#276
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

Haven't finished yet..

Stand by.

06 Feb 2013, 22:46
#277
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

Actually it's real late and spent way too Long on this today..

If you wanna have a go basically you need to add a div on the outside of the a tag give if an id say productimagefocus and an inline style with height and width defined by
The MEDIUM width and height define.

Once you do that then apply the css
#productimagefocus img {
Max-width: 100%;
}

In theory that should work!

06 Feb 2013, 22:49
#278
chadderuski avatar

chadderuski

Totally Zenned

Join Date:
Apr 2006
Location:
Dark Side of the Moon
Posts:
986
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

Yeah, been a long day and need a break myself! Maybe niccol will strike gold?

06 Feb 2013, 22:54
#279
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

I'm pretty confident thy suggestion above is probably the best "all around" solution.

In theory what it will do is create a container which will be controlled by the product info image size set in the admin then by Appleby the css on one axis it will fit the image to rectangle.
That way it will sort it for both people with different size images and people who have the same size image. And also people who just use small and people who use small medium and or large.

Night :-)

07 Feb 2013, 09:15
#280
philip937 avatar

philip937

Totally Zenned

Join Date:
Aug 2009
Location:
Bedford, England
Posts:
968
Plugin Contributions:
0

Re: Jquery Zoom [Support thread]

ok not tested and not got much time to spend on this today, however hopefully you should see the logic here and be able to have a play, if it works first time i'll be chuffed..

in includes/templates/YOUR_TEMPLATE/templates/tpl_modules_main_product_images.php

replace this:

[/<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>PHP]

with this:

[PHP]    <script type="text/javascript">
      function func (img) {
        if(img.height >= img.width) {
          img.style.height = "100%";
          img.style.width = "auto";
        } else {
          img.style.width = "100%";
          img.style.height = "auto";
        }
      }
    </script>

<?php
$iCstart = '<div id="iContainer" style="width:' .MEDIUM_IMAGE_WIDTH. '; height:' .MEDIUM_IMAGE_HEIGHT. '">';
$iCend = '</div>';
?>

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

so heres what we are now doing..
using a clever script to check the image height and width and depending on which is the greatest applying image width 100% to it.

this then should fill to 100% of either the container width or height defined by the admin settings for MEDIUM_IMAGE_WIDTH & MEDIUM_IMAGE_HEIGHT which is now applied with a div around the outside of the image inside the document.write. defined by
$iCstart and $iCend

hope it works... please let me know