ポップアップ先でのロールオーバー

ポップアップ後のウィンドウでメイン拡大画像＋追加縮小画像を表示し、縮小画像クリックでメイン画像が切り替わる。
まず、/includes/templates/template_default/templates/tpl_display_large_image.phpを作成。
ベースは/includes/modules/additional_image.phpで、変数名を変える＆ついでにテンプレートもくっつけるとこうなる。

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 ($products_image_large != '') {
  // prepare image name
  $products_image_large_extension = substr($products_image_large, strrpos($products_image_large, '.'));
  $products_image_large_base = ereg_replace(IMAGE_SUFFIX_LARGE . $products_image_large_extension, '', $products_image_large);

  // if in a subdirectory
  if (strrpos($products_image_large, '/')) {
    $products_image_large_match = substr($products_image_large, strrpos($products_image_large, '/')+1);
    //echo 'TEST 1: I match ' . $products_image_match . ' - ' . $file . ' -  base ' . $products_image_base . '<br>';
    $products_image_large_match = ereg_replace(IMAGE_SUFFIX_LARGE . $products_image_large_extension, '', $products_image_large_match) . '_';
    $products_image_large_base = $products_image_large_match;
  }

  $products_image_large_directory = ereg_replace($products_image_large, '', substr($products_image_large, strrpos($products_image_large, '/')));
  if ($products_image_large_directory != '') {
    $products_image_large_directory = ereg_replace($products_image_large_directory, '', $products_image_large) . "/";
  } else {
    $products_image_large_directory = DIR_WS_IMAGES;
  }

  // Check for additional matching images
  $file_extension = $products_image_large_extension;
  $products_image_large_match_array = array();
  if ($dir = @dir($products_image_large_directory)) {
    while ($file = $dir->read()) {
      if (!is_dir($products_image_large_directory . $file)) {
        if (substr($file, strrpos($file, '.')) == $file_extension) {
          if(preg_match("/" . $products_image_large_base . "/i", $file) == '1') {
            if ($file != $products_image_large) {
              if ($products_image_large_base . ereg_replace($products_image_large_base, '', $file) == $file) {
                $images_large_array[] = $file;
              } else {
              }
            }
          }
        }
      }
    }
    if (sizeof($images_large_array)) {
      sort($images_large_array);
    }
    $dir->close();
  }
}

// Build output based on images found
$num_images_large = sizeof($images_large_array);
$list_box_contents = '';
$title = '';

if ($num_images_large) {
  $row = 0;
  $col = 0;
  if ($num_images_large < IMAGES_AUTO_ADDED || IMAGES_AUTO_ADDED == 0 ) {
    $col_width = floor(100/$num_images_large);
  } else {
    $col_width = floor(100/IMAGES_AUTO_ADDED);
  }

  for ($i=0, $n=$num_images_large - 1; $i<$n; $i++) {
    $file = $images_large_array[$i];
($products_image_extension, '', $file) . IMAGE_SUFFIX_LARGE . $products_image_extension;
    $flag_has_large = file_exists($products_image_large);
    $base_image_large = $products_image_large_directory . $file;
    $thumb_slashes = zen_image($base_image_large, addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
    $thumb_regular = zen_image($base_image_large, $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(\'' . '<a href="JavaScript:MainImageChange(\\\'' . $base_image_large . '\\\')">' . $thumb_slashes . '</a>' . '\');' . "\n" . '//--></script>';

    $noscript_link = '<noscript><a href="' . HTTP_SERVER . '/' . $base_image_large . '">' . $thumb_regular . '</a></noscript>';
    $link = $script_link . "\n      " . $noscript_link;

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

<div id="productAdditionalImages">
<SCRIPT LANGUAGE="JavaScript">
<!--
  function MainImageChange(subImageName)
    {
      document.images['MainImage'].src = subImageName;
    }
// -->
</SCRIPT>
<?php
    if (is_array($list_box_contents) > 0 ) {
      for($row=0;$row<sizeof($list_box_contents);$row++) {
        $params = "";
?>

<?php
        for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
          $r_params = "";
          if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
          if (isset($list_box_contents[$row][$col]['text'])) {
?>
    <?php echo $list_box_contents[$row][$col]['text'] . "\n"; ?>
<?php
          }
        }
?>
<br class="clearBoth" />
<?php
      }
    }
?> 

</div>

次に、/includes/templates/template_default/popup_image/tpl_main_page.phpの、追加縮小画像を表示させたいところに、

<?php
  require($template->get_template_dir('/tpl_display_large_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_display_large_image.php');
?>

を追記する。
　
商品詳細ページで、追加縮小画像をクリックしたときも同じように動作させる場合は、
/includes/templates/template_default/popup_image_additional/tpl_main_page.phpの表示させたいところに

<?php
  $products_image_large = 'images/large/' . $products_image_large;
?>

<?php
  require($template->get_template_dir('/tpl_display_large_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_display_large_image.php');
?>

を追記する。
この際、表示部分もtpl_display_large_image.phpに記述してあるので、最初からあるスクリプト表示部分は削除する。
tpl_display_large_image.phpは使い回し。