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

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

[chadderuski]

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

[philip937]

Haven't finished yet..

Stand by.

[philip937]

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!

[chadderuski]

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

[philip937]

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

[philip937]

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:

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

    <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