Totally Zenned
- Join Date:
- Aug 2009
- Location:
- Bedford, England
- Posts:
- 968
- Plugin Contributions:
- 0
Jquery Zoom [Support thread]
grr excuse the extra post, wont let me edit the previous.. missed off the "px" in the style...
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. 'px; height:' .MEDIUM_IMAGE_HEIGHT. 'px">';
$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
Phil Rogers
A problem shared is a problem solved.
