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
Re: Jquery Zoom [Support thread]
looks liek your all but there?!?! did it work?
Re: Jquery Zoom [Support thread]
attattched is a working example of the logic that is being applied to the div and image..
notice if in the htlm source code if you chage either the width or height value in either of the divs the image will re-size but maintain aspect ratio.
just wack it in a html file and load on your pc locally to play.
i'll leave you to tinker..
----
<html>
<head>
<title>Test page</title>
<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>
</head>
<body>
<div style="width:300px; height:300px">
<img onload="func(this);" src="http://img.yandex.net/i/www/logo.png" />
</div>
<div style="width:300px; height:200px">
<img onload="func(this);" src="http://t2.gstatic.com/images?q=tbn:ANd9GcROiXx6BaNBDTn4xAS8FBMH7qUZIOPKcXZKL6asl4hHw2ys-h8Z" />
</div>
</body>
</html>
Re: Jquery Zoom [Support thread]
I wanted to post this just in case others are stuck and clueless like I was yesterday without help!
It works now using one size image at 72dpi and 800px wide to get the zoom effect.
I had to move the jquery:
from:
PHP Code:
includes/modules/pages/product_info/"jscript_jquery-1.6.js
to:
PHP Code:
includes/templates/MyTemplate/jscript/jscript_jquery-1.6.js
And removed the following call for JQuery used in another plugin (this plugin still functions on all pages. The way it meant to work.)
PHP Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
from:
PHP Code:
includes/templates/MyTemplate/common/tpl_main_page.php
The sequence of uploading the images when you setup and upload your products were as follow: (ie. if you have four images to upload)
Image1_3.jpg
Image1_2.jpg
Image1_1.jpg
Image1.jpg This being the last and main image for the product.
Only problem is that images can only be uploaded to the main image directory, otherwise the code breaks!
Thanking for hard work of Nick, Phil and Chad.
Re: Jquery Zoom [Support thread]
Quote:
Originally Posted by
Kevin205
It works now using one size image at 72dpi and 800px wide to get the zoom effect.
the image can be any size... however to get the zoom effect the size for your product info image size needs to be set smaller than the actual image size (if only using the one size image or small and medium. if you also use large images, it will use the large image for zooming and medium or small for the product info page main image).
[QUOTE]Only problem is that images can only be uploaded to the main image directory, otherwise the code breaks![/QUOTE
this bug was corrected a few posts back if you read through but the files havent yet been updated.
Thanks for your kind words.. still working hard to make this work for all set-ups to reduce the limitations.
Re: Jquery Zoom [Support thread]
Quote:
Originally Posted by
philip937
this bug was corrected a few posts back if you read through but the files havent yet been updated.
Thanks for your kind words.. still working hard to make this work for all set-ups to reduce the limitations.
http://www.zen-cart.com/showthread.p...15#post1184215
Re: Jquery Zoom [Support thread]
Quote:
Originally Posted by
philip937
the image can be any size... however to get the zoom effect the size for your product info image size needs to be set smaller than the actual image size (if only using the one size image or small and medium. if you also use large images, it will use the large image for zooming and medium or small for the product info page main image).
Not really. You don't have to that.
I am not using small, medium & large images. Only one image. When it comes to production time, it does not make any sense dealing with all that extra work.
What I have done is to change my "tpl_product_info_display.php" with <div>s limiting the size of the main product image.
Re: Jquery Zoom [Support thread]
Quote:
Originally Posted by
Kevin205
Not really. You don't have to that.
I am not using small, medium & large images. Only one image. When it comes to production time,
it does not make any sense dealing with all that extra work.
What I have done is to change my "tpl_product_info_display.php" with <div>s limiting the size of the main product image.
you've lost me.. I said you can use any image size..
whether or not you are using
a small image
a small and medium image
a small medium and large image
the admin settings for product info image size is what limits the image size. So what I am saying is if you use just a small image lets say
600px x 800px
then so that the "zoom" works, because you do not have a large image you would have to have the product info image size in the admin set to say:
width 300
height 400
if you have the admin setting set to more than
width 600
height 800
then as you do not have a large image for it to use for zoom there would be no zoom.
I am currently working on a fix so that images of different dimensions can still be used and still controlled through the admin so they do not stretch to fit the area of the main image area.
Re: Jquery Zoom [Support thread]
My Admin for Product Info - Image is set 400px X 400px
My div is set to 400px wide (no height specified)
My image size is 800px wide.
It works for me. I get the effect.
Re: Jquery Zoom [Support thread]
Quote:
Originally Posted by
Kevin205
My Admin for Product Info - Image is set 400px X 400px
My div is set to 400px wide (no height specified)
My image size is 800px wide.
It works for me. I get the effect.
not sure what you have your DIV for.. it should work without the div..
but yes with those values it should work well :o)
