Image Swap via Javascript

[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