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

[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