Jquery Zoom [Support thread]

[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]

actually this is more logical

<?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) {
if(img.height >= img.width) {
img.style.height = "<?php echo $iheight ?>";
img.style.width = "auto";
} else {
img.style.width = "<?php echo $iwidth ?>";
img.style.height = "auto";
}
}


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>

still very intermittent for me, very weird.. maybe doesn't like some of my images?

[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

[philip937]

@chadd
Glad to be of help, just hope it works or at least is almost there. In theory the new fileset should allow your admin settings for product info image to determine the width and height but "should" still retain aspect ratio.

Let me know if it works. My post from this morning wasn't working hence why I changed the method in the new files.

[chadderuski]

Philip!

Go look at the above link and you'll see it's quite close. Only thing breaking is the solo images that are really big (don't know why yet). Wanted you to know.

We (strangely enough) had that working before. Zencart was sizing my HUGE image to fit in the prescribed products image dimentions. Now I am getting the full sized image.

investigating...

-chadd

[philip937]

Are you on the latest file set now?

[chadderuski]

yes. latest file set.

Here's what I found for the inconsistency:

If a product HAS additional images, it's working.

If there are NO additional images, it seems to be breaking...

EDIT:

ALSO, it seems that once of the attributes is pulling from the previous image...

[philip937]

When I'm looking its really hard to see if its working. Can you set your product info image size in the admin to say 50 wide 50 high?