Jquery Zoom [Support thread]

[philip937]

Assuming that you don't have a large image on this one, this one appears to be working my end and its a single image one..

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

[chadderuski]

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?

done as requested: 50!

[philip937]

done as requested: 50!

Hmm Grrr something defo not working. I'm seeing the main Image diffent sizes on each product and most are more 500-600 :-(

Less on your working than were on mine :-(

[philip937]

just done some more tests my end.

I actually think a safer way of coding it would be to just have this:

function func (img) {
if(img.height >= img.width) {
img.style.height = "<?php echo $iheight ?>";
} else {
img.style.width = "<?php echo $iwidth ?>";
}
}

I am seeing similar results with the additional images vs only oine image however its like it resets it.. if i use the next product link on my site ones that work work, then i'll hit one that has one image and it doesnt then I go previous, then forward and the image is then re-sized..

its very strange...

[philip937]

can't suss your though.. I cant get any to display 50 x 50..

for example, this page, your html source code is showing:
http://96. 30. 58.67/index.php?main_page=product_info&cPath=6_148&products_id=1151&zenid=d0d30ebcd1e6 4c6234e12a368f3d9e36

<script language="javascript" type="text/javascript"><!--

function func (img) {
if(img.height >= img.width) {
img.style.height = "50px";
img.style.width = "auto";
} else {
img.style.width = "50px";
img.style.height = "auto";
}
}


document.write('<a href="images/barsupply/roy-112.jpg" class="bonzer_zoom" rel="product_info"><img src="images/barsupply/roy-112.jpg" onload="func(this);" /></a>');
//--></script>

and this is the image..


REALLY.. REALLY.. WEIRD!

[chadderuski]

Philip:

What is weird is when you click back and forth with PREV <> NEXT, the image scales to 50 x 50 and zoom works correctly, but if you REFRESH the page, the image is show FULL size!

It HAS to be because somewhere your variables are not being reset. So the LAST value (for one of the dimensions) is being retained... this is my thought on what's happening...

[philip937]

I'm stumped.. We need a java/jquery guru to help implant the size switch better.

[chadderuski]

or simply a break ...

Either way, you've made some really great progress!

[philip937]

EUREKA... I think!

use this in your
includes/templates/YOUR/TEMPLATE/templates/tpl_modules_main_product_image.php

works perfect on my site even and tested also with images of different sizes too.

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

<style>
.mainImage {
  max-width: <?php echo MEDIUM_IMAGE_WIDTH ?>px;
  max-height: <?php echo MEDIUM_IMAGE_HEIGHT ?>px;
  height:auto;
  width:auto;
}
</style>


<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, 'class="mainImage"') . '</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>

enjoy..

[chadderuski]

Philip!

That my friend is working PERFECTLY!! Pages are surviving manual refreshing, and Next/Prev are working fine also. Of note, is the GIANT image also behaves as it should. All the picture swapping is working, even with different sizes.

AWESOME!

PS: Have you tested with Image Handler 4 yet?