Jquery Zoom [Support thread]

[philip937]

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]

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]

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]

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]

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]

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)

[Kevin205]

not sure what you have your DIV for.. it should work without the div..

but yes with those values it should work well :o)

I had to re-lay the product info page on this site differently.

[philip937]

ok its close..

this seems to work, but my end seems a bit intermittent.. not sure if its a caching issue or if there is conflicting java, but having no expreience with java I cant diagnose..

perhaps you guys can play with it and let me know what results you see..

so, as a test replace your
includes/templates/YOUR_TEMPLATE/templates/tpl_modules_main_product_image.php with this code:

<?php
/**
 * Module Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2011 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_main_product_image.php 18698 2011-05-04 14:50:06Z wilt $
 */
?>
<?php require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_MAIN_PRODUCT_IMAGE)); ?>
<div id="productMainImage" class="centeredContent back">



<?php
$iwidth = MEDIUM_IMAGE_WIDTH . 'px'; 
$iheight = MEDIUM_IMAGE_HEIGHT . 'px'; 
?>

<script language="javascript" type="text/javascript"><!--
      function func (img) {
          img.style.height = "<?php echo $iwidth ?>";
          img.style.width = "<?php echo $iheight ?>";
      }

document.write('<?php echo '<a href="' . $products_image_large . '" class="bonzer_zoom" rel="product_info"><img src="' . $products_image_medium . '" onload="func(this);"  /></a>' ?>');
//--></script>



<noscript>
<?php
  echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';
?>
</noscript>
</div>

[philip937]

Guys,

Here is the latest fileset with some bug fixes and includes the images to display correctly if using different image sizes and maintians the ability to set image size in the admin for the product info image.

The image size part is still a bit flakey and needs more testing and feedback.

Still need to wrap the additional product image links inside <script> document.write so that they are not displayed when Javascript is disabled.

Let me know how you get on, I don't have much more I can give on this right now so maybe someone else would like to take charge?

image-Swap-with-JQuery-Zoom.zip

Cheers

Phil

[chadderuski]

Hey Philip,

Will try your latest package shortly... thanks for the REALLY hard work

I tried the previous post's code, and its VERY close. Some images (ones I have as solo images, but in a sub-directory inside /images)
are either showing FULL size.

But others (I have a number of different ways to do images upload here), work well, and the main image window re sizes to fit the proportion of the clicked image.

Click through this folder to see some of the different results. Will try your new file set shortly:

http://96 .30 .58.67/index.php?main_page=index&cPath=6_110

-chadd

ps: we should probably start putting beta version numbers on these file sets so people don't get them mixed up