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

[DivaVocals]

This isn't fully working for me.. While the correct additional image is pulled from the bmz_cache folder and is now showing in the popup, the popup window itself is not sized correctly.. (see here: http://eitestsite(dot)eyeitalia(dot)...roducts_id=331)

Okay, so do you have an example of where it is not working to look at? On my site it is working (I do also have Zen Lightbox installed; however, currently the modules file is the one modified specifically for IH4), so I may have some other files that are "in the way" and making it work the way it is described above and on a few previous posts...

Same site I previously posted.. I put your updated code here, and you can see that the popups are not sized correctly..

[mc12345678]

Same site I previously posted.. I put your updated code here, and you can see that the popups are not sized correctly..

Nope, don't see the problem. The picture of the two delicious looking drinks appears bounded by the resulting popup window sized at 431 x 550 pixels which matches the bmz_cache end description.

[DivaVocals]

Nope, don't see the problem. The picture of the two delicious looking drinks appears bounded by the resulting popup window sized at 431 x 550 pixels which matches the bmz_cache end description.

That site is not the one I posted before with the issue.. See the EyeItalia site.. That's the site where I am using your code.. The site with the delicious drinks is using the OLD IH4 code, and works correctly.. See my previous post below...

This isn't fully working for me.. While the correct additional image is pulled from the bmz_cache folder and is now showing in the popup, the popup window itself is not sized correctly.. (see here: http://eitestsite(dot)eyeitalia(dot)com/shop/index.php?main_page=product_info&cPath=44&products_id=331)

[mc12345678]

That site is not the one I posted before with the issue.. See the EyeItalia site.. That's the site where I am using your code.. The site with the delicious drinks is using the OLD IH4 code, and works correctly.. See my previous post below...

Okay, sorry, glad that I described what I saw. So, with the eyeitalia site, I see that the image is 250x600 with a bmz resize of 600x600 and the border of the window is to the sides of the image at that dimension. So, what would be expected to be different? Should the height be 550?

With the code copied, which version of the all caps height and width was used? could you try replacing with the $ih variable(s)? $ihConf['large']['width'] and $ihConf['large']['height'] respectively.

[mc12345678]

Okay, sorry, glad that I described what I saw. So, with the eyeitalia site, I see that the image is 250x600 with a bmz resize of 600x600 and the border of the window is to the sides of the image at that dimension. So, what would be expected to be different? Should the height be 550?

With the code copied, which version of the all caps height and width was used? could you try replacing with the $ih variable(s)? $ihConf['large']['width'] and $ihConf['large']['height'] respectively.

(Timed out on edit) Also, be sure that you are using the code snippets (with applicable replacements) that were posted to this forum. I realize I may have sent some code earlier, but I would say that the code has been simplified and as said seems to be working on my site at whatever size I set the maximum to in the admin area.

[DivaVocals]

(Timed out on edit) Also, be sure that you are using the code snippets (with applicable replacements) that were posted to this forum. I realize I may have sent some code earlier, but I would say that the code has been simplified and as said seems to be working on my site at whatever size I set the maximum to in the admin area.

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

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

[DivaVocals]

Okay, sorry, glad that I described what I saw. So, with the eyeitalia site, I see that the image is 250x600 with a bmz resize of 600x600 and the border of the window is to the sides of the image at that dimension. So, what would be expected to be different? Should the height be 550?

With the code copied, which version of the all caps height and width was used? could you try replacing with the $ih variable(s)? $ihConf['large']['width'] and $ihConf['large']['height'] respectively.

When you click the large image link on the EyeItalia site, you will see that the popups for the large images are not resizing to the size of the large image (as they should)