Re: 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:
[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:
PHP Code:
<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.
Bookmarks