Jquery Zoom [Support thread]

**philip937** · 7 Feb 2013, 10:22 AM

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"></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

**philip937** · 7 Feb 2013, 02:51 PM

looks liek your all but there?!?! did it work?

**philip937** · 7 Feb 2013, 03:05 PM

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>

**Kevin205** · 7 Feb 2013, 04:39 PM

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.

**philip937** · 7 Feb 2013, 04:48 PM

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.

**philip937** · 7 Feb 2013, 04:50 PM

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

**Kevin205** · 7 Feb 2013, 04:59 PM

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.

**philip937** · 7 Feb 2013, 05:06 PM

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.

**Kevin205** · 7 Feb 2013, 05:15 PM

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.

**philip937** · 7 Feb 2013, 05:28 PM

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)

Thread: Jquery Zoom [Support thread]

Thread Tools

Search Thread

Display

Re: Jquery Zoom [Support thread]

Re: Jquery Zoom [Support thread]

Re: Jquery Zoom [Support thread]

Re: Jquery Zoom [Support thread]

Re: Jquery Zoom [Support thread]

Re: Jquery Zoom [Support thread]

Re: Jquery Zoom [Support thread]

Re: Jquery Zoom [Support thread]

Re: Jquery Zoom [Support thread]

Re: Jquery Zoom [Support thread]

Similar Threads

v153 jQuery Scrolling Sideboxes [Support Thread]

v152 Down for Maintenance jQuery Countdown (Support Thread)

v152 jQuery Banners (Support Thread)

Jquery Lightbox [Support thread]

Is there an add-on combine the functions of AJAX_image_swapper and Jquery Zoom?

Bookmarks

Bookmarks

Posting Permissions