Image Swap via Javascript

[starrydesigns]

Thanks so much!

[misty]

Thanks so much!

I understand, from your PM to myself, that you have managed to fix problem
with Swap Images via MouseOver module.. could you share how...
will help other zencart members/users having similar problem.

[misty]

Swap images via mouseover mod..VERSION for zencart 1.3.8..

ZenCart 1.3.8

FIX provided by starrydesigns

Replace file included in mod i.e.
/includes/modules/NAMEOFYOURTEMPLATE/additional_images.php
with one below

<?php
/**
 * additional_images module
 *
 * Prepares list of additional product images to be displayed in template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 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: additional_images.php 6132 2007-04-08 06:58:40Z drbyte $
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
if (!defined('IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE')) define('IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE','Yes');
if (!defined('TEXT_CLICK_TO_CHANGE')) define('TEXT_CLICK_TO_CHANGE','Preview');
if ($products_image != '') {
  // prepare image name
  $products_image_extension = substr($products_image, strrpos($products_image, '.'));
  $products_image_base = str_replace($products_image_extension, '', $products_image);
  // if in a subdirectory
  if (strrpos($products_image, '/')) {
    $products_image_match = substr($products_image, strrpos($products_image, '/')+1);
    //echo 'TEST 1: I match ' . $products_image_match . ' - ' . $file . ' -  base ' . $products_image_base . '<br>';
    $products_image_match = str_replace($products_image_extension, '', $products_image_match) . '_';
    $products_image_base = $products_image_match;
  }
  $products_image_directory = str_replace($products_image, '', substr($products_image, strrpos($products_image, '/')));
  if ($products_image_directory != '') {
    $products_image_directory = DIR_WS_IMAGES . str_replace($products_image_directory, '', $products_image) . "/";
  } else {
    $products_image_directory = DIR_WS_IMAGES;
  }
  // Check for additional matching images
  $file_extension = $products_image_extension;
  $products_image_match_array = array();
  if ($dir = @dir($products_image_directory)) {
    while ($file = $dir->read()) {
      if (!is_dir($products_image_directory . $file)) {
        if (substr($file, strrpos($file, '.')) == $file_extension) {
          //          if(preg_match("/" . $products_image_match . "/i", $file) == '1') {
          if(preg_match("/" . $products_image_base . "/i", $file) == 1) {
            if ($file != $products_image) {
              if ($products_image_base . str_replace($products_image_base, '', $file) == $file) {
                //  echo 'I AM A MATCH ' . $file . '<br>';
                $images_array[] = $file;
              } else {
                //  echo 'I AM NOT A MATCH ' . $file . '<br>';
              }
            }
          }
        }
      }
    }
    if (sizeof($images_array)) {
      sort($images_array);
    }
    $dir->close();
  }
}
// Build output based on images found
$num_images = sizeof($images_array);
$list_box_contents = '';
$title = '';
if ($num_images) {
  $row = 0;
  $col = 0;
  if ($num_images < IMAGES_AUTO_ADDED || IMAGES_AUTO_ADDED == 0 ) {
    $col_width = floor(100/$num_images);
  } else {
    $col_width = floor(100/IMAGES_AUTO_ADDED);
  }
$org_product_image =$products_image_medium;
  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;
    $flag_has_large = file_exists($products_image_large);
    $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($base_image, addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
    $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);
    $products_image_medium = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'medium/', $products_image_directory) . str_replace($products_image_extension, '', $file) . IMAGE_SUFFIX_MEDIUM . $products_image_extension;
    if (!file_exists($products_image_medium)) { //use small if not found
      $products_image_medium = $products_image_directory . $file;
    }
//$products_image_large_additional = $products_image_base . IMAGE_SUFFIX_LARGE . $products_image_extension;
//set some defaults
  $img_large='';
  $ahref_start = '<a';
  $ahref_end = '>';
  $ahref_close = '</a>';
  $img_thumb   = zen_image($products_image_directory . $file, addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
  $swap_image = $products_image_directory . $file; //small unless medium found
  $enlarge_text = '<br />';
  if (file_exists($products_image_medium)) {
    //onMouseOver or onClick only valid with small or medium images... no point loading huge "large" images for display in small space
    $noscript_href = $products_image_medium;
    $swap_image = $products_image_medium;
    $img_large = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_medium);
    $enlarge_text='<br />' . TEXT_CLICK_TO_ENLARGE;
  }
  if (file_exists($products_image_large)) {
    $noscript_href = $products_image_large;
    $img_large = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large);
    $enlarge_text='<br />' . TEXT_CLICK_TO_ENLARGE;
  }
  $script_href = ' href="'.$img_large.'"';
  if (PRODUCT_IMAGE_SWAP_ON_ROLLOVER=='true') {
    $onMouseOver = ' onMouseOver="return(swapImage(\\\''.$swap_image.'\\\'))" onMouseOut="return(swapImage(\\\''.$org_product_image.'\\\'))" ';
    if (PRODUCT_IMAGE_SWAP_ON_CLICK !='true') $enlarge_text='';
    if (zen_not_null($img_large)) $script_href = ' href="javascript:popupWindow(\\\'' . $img_large . '\\\')"';
  }
  if (PRODUCT_IMAGE_SWAP_ON_CLICK=='true') {
    $onClick = ' onClick="return(swapImage(\\\''.$swap_image.'\\\' ))"';
    if (PRODUCT_IMAGE_SWAP_ON_ROLLOVER !='true') $enlarge_text='';
    $script_href = '';
  }
  if (PRODUCT_IMAGE_SWAP_ON_CLICK !='true' && PRODUCT_IMAGE_SWAP_ON_ROLLOVER !='true') { //if events disabled, make click-to-enlarge
    if (zen_not_null($img_large)) $script_href = ' href="javascript:popupWindow(\\\'' . $img_large . '\\\')"';
  }
 
    // Link Preparation:
    $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . $ahref_start . $script_href . $onClick . $onMouseOver . $ahref_end . $img_thumb . $enlarge_text . $ahref_close . '\');' . "\n" . '//--></' . 'script>';
  if (zen_not_null($noscript_href)) {
    $ahref_start = '<a href="';
    $ahref_end = '" target="_blank">';
    $ahref_close = '</a>';
  } else {
    $ahref_start = '';
    $ahref_end = '';
    $ahref_close = '';
  }
    $noscript_link = '<noscript>' . $ahref_start . $noscript_href . $ahref_end . $img_thumb . $enlarge_text . $ahref_close . '</noscript>';
    $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
} // endif
?>

Tested, works fine...
AS ALWAYS.. BACKUP FILES BEFORE ALTERING

[haredo]

Misty,
Thanks for the update on this situation.
Very, very helpful

[starrydesigns]

Thank you for posting this, Misty! :)

[maitaijim]

Swap images via mouseover mod..VERSION for zencart 1.3.8..

ZenCart 1.3.8

FIX provided by starrydesigns

Replace file included in mod i.e.
/includes/modules/NAMEOFYOURTEMPLATE/additional_images.php
with one below
---snip--
Tested, works fine...
AS ALWAYS.. BACKUP FILES BEFORE ALTERING

SWEET you added onMouseOut functionality!
I thought I was excited last week when I corrected the "$products_image_extention" problem (I don't know a lick of PHP).
Will you be submitting this to the downloads?

Now if some one could get this Image Swap mod working with Image Handler 2 we would sitting pretty! I gave it a go but stuck trying to figure out how to stop IH2 from stripping the $parameters out of zen_image()?
I'm fairly certain it's happening in "/includes/classes/bmz_image_handler.class.php" starting arorund line 675?

Jim

[misty]

Will you be submitting this to the downloads?

Already in downloads section.. just requires this one amended file
be substituted for existing. Also not my creation i.e.

FIX provided by starrydesigns

[maitaijim]

I took starrydesigns addition of onMouseOut functionality one step further and made it switchable.

If you would like for the original image to return when you move the mouse away set 'PRODUCT_IMAGE_SWAP_ONMOUSEOUT' in /includes/extra_configures/rollover_defines.php to 'true'.

I updated the readme.txt and submitted it to the downloads. I attached it here also.

Jim

[misty]

I updated the readme.txt and submitted it to the downloads. I attached it here also.

Thank You

[maitaijim]

Unfortunately I didn't think of this until after I submitted it to the downloads. This version of /includes/modules/YOURTEMPLATE/additional_images.php will preload the swap images.

<?php
/**
 * additional_images module
 *
 * Prepares list of additional product images to be displayed in template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 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: additional_images.php 6132 2007-04-08 06:58:40Z drbyte $
 *
 * onMouseOut functionality provided by starrydesigns
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
if (!defined('IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE')) define('IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE','Yes');
if (!defined('TEXT_CLICK_TO_CHANGE')) define('TEXT_CLICK_TO_CHANGE','Preview');
if ($products_image != '') {
  // prepare image name
  $products_image_extension = substr($products_image, strrpos($products_image, '.'));
  $products_image_base = str_replace($products_image_extension, '', $products_image);
  // if in a subdirectory
  if (strrpos($products_image, '/')) {
    $products_image_match = substr($products_image, strrpos($products_image, '/')+1);
    //echo 'TEST 1: I match ' . $products_image_match . ' - ' . $file . ' -  base ' . $products_image_base . '<br>';
    $products_image_match = str_replace($products_image_extension, '', $products_image_match) . '_';
    $products_image_base = $products_image_match;
  }
  $products_image_directory = str_replace($products_image, '', substr($products_image, strrpos($products_image, '/')));
  if ($products_image_directory != '') {
    $products_image_directory = DIR_WS_IMAGES . str_replace($products_image_directory, '', $products_image) . "/";
  } else {
    $products_image_directory = DIR_WS_IMAGES;
  }
  // Check for additional matching images
  $file_extension = $products_image_extension;
  $products_image_match_array = array();
  if ($dir = @dir($products_image_directory)) {
    while ($file = $dir->read()) {
      if (!is_dir($products_image_directory . $file)) {
        if (substr($file, strrpos($file, '.')) == $file_extension) {
          //          if(preg_match("/" . $products_image_match . "/i", $file) == '1') {
          if(preg_match("/" . $products_image_base . "/i", $file) == 1) {
            if ($file != $products_image) {
              if ($products_image_base . str_replace($products_image_base, '', $file) == $file) {
                //  echo 'I AM A MATCH ' . $file . '<br>';
                $images_array[] = $file;
              } else {
                //  echo 'I AM NOT A MATCH ' . $file . '<br>';
              }
            }
          }
        }
      }
    }
    if (sizeof($images_array)) {
      sort($images_array);
    }
    $dir->close();
  }
}
// Build output based on images found
$num_images = sizeof($images_array);
$list_box_contents = '';
$title = '';
if ($num_images) {
  $row = 0;
  $col = 0;
  if ($num_images < IMAGES_AUTO_ADDED || IMAGES_AUTO_ADDED == 0 ) {
    $col_width = floor(100/$num_images);
  } else {
    $col_width = floor(100/IMAGES_AUTO_ADDED);
  }
$org_product_image =$products_image_medium;
  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;
    $flag_has_large = file_exists($products_image_large);
    $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($base_image, addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
    $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);
    $products_image_medium = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'medium/', $products_image_directory) . str_replace($products_image_extension, '', $file) . IMAGE_SUFFIX_MEDIUM . $products_image_extension;
    if (!file_exists($products_image_medium)) { //use small if not found
      $products_image_medium = $products_image_directory . $file;
    }
//$products_image_large_additional = $products_image_base . IMAGE_SUFFIX_LARGE . $products_image_extension;
//set some defaults
  $img_large='';
  $ahref_start = '<a';
  $ahref_end = '>';
  $ahref_close = '</a>';
  $img_thumb   = zen_image($products_image_directory . $file, addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
  $swap_image = $products_image_directory . $file; //small unless medium found
  $enlarge_text = '<br />';
  if (file_exists($products_image_medium)) {
    //onMouseOver or onClick only valid with small or medium images... no point loading huge "large" images for display in small space
    $noscript_href = $products_image_medium;
    $swap_image = $products_image_medium;
    $img_large = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_medium);
    $enlarge_text='<br />' . TEXT_CLICK_TO_ENLARGE;
  }
  if (file_exists($products_image_large)) {
    $noscript_href = $products_image_large;
    $img_large = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large);
    $enlarge_text='<br />' . TEXT_CLICK_TO_ENLARGE;
  }
  $script_href = ' href="'.$img_large.'"';
  if (PRODUCT_IMAGE_SWAP_ON_ROLLOVER=='true') {
     if (PRODUCT_IMAGE_SWAP_ONMOUSEOUT=='true') {
    $onMouseOver = ' onMouseOver="return(swapImage(\\\''.$swap_image.'\\\'))" onMouseOut="return(swapImage(\\\''.$org_product_image.'\\\'))" ';
    } else {
    $onMouseOver = ' onMouseOver="return(swapImage(\\\''.$swap_image.'\\\'))"';  
    }
    if (PRODUCT_IMAGE_SWAP_ON_CLICK !='true') $enlarge_text='';
    if (zen_not_null($img_large)) $script_href = ' href="javascript:popupWindow(\\\'' . $img_large . '\\\')"';
  }
  if (PRODUCT_IMAGE_SWAP_ON_CLICK=='true') {
    $onClick = ' onClick="return(swapImage(\\\''.$swap_image.'\\\' ))"';
    if (PRODUCT_IMAGE_SWAP_ON_ROLLOVER !='true') $enlarge_text='';
    $script_href = '';
  }
  if (PRODUCT_IMAGE_SWAP_ON_CLICK !='true' && PRODUCT_IMAGE_SWAP_ON_ROLLOVER !='true') { //if events disabled, make click-to-enlarge
    if (zen_not_null($img_large)) $script_href = ' href="javascript:popupWindow(\\\'' . $img_large . '\\\')"';
  }
 
   $img_preload = zen_image($swap_image, '', '', '', 'style="display:none"');
    // Link Preparation:
    $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . $ahref_start . $script_href . $onClick . $onMouseOver . $ahref_end . $img_thumb . $img_preload . $enlarge_text . $ahref_close . '\');' . "\n" . '//--></' . 'script>';
  if (zen_not_null($noscript_href)) {
    $ahref_start = '<a href="';
    $ahref_end = '" target="_blank">';
    $ahref_close = '</a>';
  } else {
    $ahref_start = '';
    $ahref_end = '';
    $ahref_close = '';
  }
    $noscript_link = '<noscript>' . $ahref_start . $noscript_href . $ahref_end . $img_thumb .  $enlarge_text . $ahref_close . '</noscript>';
    $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
} // endif
?>

This was accomplished using the CSS display="none" property. It should work in all browsers but I have not tested this.

Jim