Image Handler 4 (for v1.5.x) Support Thread

[mc12345678]

I used the code you posted to this thread.. I updated the additional_images.php module file with the code you posted, and reverted the tpl_main_image.php popup file to the version in the IH4 v4.3.1 fileset.. The result is that the popup DOES show the correct image from the bmz_cache instead of the "no image" product picture.. The problem is that the popup window does not re-size to match the size of the image displayed in the popup.

additional images code used

  for ($i=0, $n=$num_images; $i<$n; $i++) {
    $file = $images_array[$i];
    $products_image_large = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'large/', $products_image_directory) . str_replace($products_image_extension, '', $file) . IMAGE_SUFFIX_LARGE . $products_image_extension;
//  Begin Image Handler changes 1 of 2
//next line is commented out for Image Handler
    if (function_exists('handle_image')) {
        $newimg = handle_image($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT);
        list($src, $alt, $width, $height, $parameters) = $newimg;

        $products_image_large = zen_output_string($src);
    } 
    
    $flag_has_large = file_exists($products_image_large);
//  End Image Handler changes 1 of 2
    $products_image_large = ($flag_has_large ? $products_image_large : $products_image_directory . $file);
    $flag_display_large = (IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE == 'Yes' || $flag_has_large);
    $base_image = $products_image_directory . $file;
    $thumb_slashes = zen_image(addslashes($base_image), addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
//  Begin Image Handler changes 2 of 2
//  remove additional single quotes from image attributes (important!)
    $thumb_slashes = preg_replace("/([^\\\\])'/", '$1\\\'', $thumb_slashes);
//  End Image Handler changes 2 of 2
    $thumb_regular = zen_image($base_image, $products_name, SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
    $large_link = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large);

    // Link Preparation:
      $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="javascript:popupWindow(\\\'' . str_replace($products_image_large, urlencode(addslashes($products_image_large)), $large_link) . '\\\')">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';

    $noscript_link = '<noscript>' . ($flag_display_large ? '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large) . '" target="_blank">' . $thumb_regular . '<br /><span class="imgLinkAdditional">' . TEXT_CLICK_TO_ENLARGE . '</span></a>' : $thumb_regular ) . '</noscript>';

    //      $alternate_link = '<a href="' . $products_image_large . '" onclick="javascript:popupWindow(\''. $large_link . '\') return false;" title="' . $products_name . '" target="_blank">' . $thumb_regular . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>';

    $link = $script_link . "\n      " . $noscript_link;
    //      $link = $alternate_link;

    // List Box array generation:
    $list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
    'text' => "\n      " . $link);
    $col ++;
    if ($col > (IMAGES_AUTO_ADDED -1)) {
      $col = 0;
      $row ++;
    }
  } // end for loop

Finally a link where you can see the errant popup behavior:
http://eitestsite(dot)eyeitalia(dot)...roducts_id=331

Okay, so I finally figured out what you have tried to tell me but I couldn't get into my thick head. Apparently the popup is coming in at a width that is too small and the image is being squashed from the sides. I was able to expand the width of the image and it began appearing as more appropriately expected.

At the moment, I am only guessing since I have not started with a fresh cart and applied IH4 to it, but one thing I see is that I have the following jscript_main.php file in the includes/modules/pages/popup_image directory, and am wondering if it has an effect because it seems to address some of the size issues described. I tried disabling the file from my site, but the resizing on my side still worked. I haven't experienced a "shrink" of the image and do not know where the value of 250 is coming from for the width. Also, the images that I get to appear on my site, if I were to shrink the window, the image doesn't shrink with it like how yours expands with the window until at least 600x600 and then shrinks again with a shrinking window.
Do you have the following jscript_main.php file installed in the includes/modules/pages/popup_image directory?

<?php
/**
 * jscript_main
 *
 * @package page
 * @copyright Copyright 2003-2006 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: jscript_main.php 3126 2006-03-07 03:09:40Z drbyte $
 */
?>
<script language="javascript" type="text/javascript"><!--
var i=0;
function resize() {
  i=0;
//  if (navigator.appName == 'Netscape') i=20;
  if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1 && window.navigator.userAgent.indexOf('SV1') != -1) {
      i=30; //This browser is Internet Explorer 6.x on Windows XP SP2
  } else if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {
      i=0; //This browser is Internet Explorer 6.x
  } else if (window.navigator.userAgent.indexOf('Firefox') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
      i=25; //This browser is Firefox on Windows
  } else if (window.navigator.userAgent.indexOf('Mozilla') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
      i=45; //This browser is Mozilla on Windows
  } else {
      i=80; //This is all other browsers including Mozilla on Linux
  }
  if (document.documentElement && document.documentElement.clientWidth) {
//    frameWidth = document.documentElement.clientWidth;
//    frameHeight = document.documentElement.clientHeight;

  imgHeight = document.images[0].height+40-i;
  imgWidth = document.images[0].width+20;

  var height = screen.height;
  var width = screen.width;
  var leftpos = width / 2 - imgWidth / 2;
  var toppos = height / 2 - imgHeight / 2;

    frameWidth = imgWidth;
    frameHeight = imgHeight+i;

  window.moveTo(leftpos, toppos);


//  window.resizeTo(imgWidth, imgHeight);
  window.resizeTo(frameWidth,frameHeight+i);
	}
  else if (document.body) {
    window.resizeTo(document.body.clientWidth, document.body.clientHeight-i);
  }
  self.focus();
}
//--></script>

Not sure if this was supposed to be a part of the IH4 package or not, or if it was part of another installation, but it appears to handle some of what you are describing.