Product Release Information

Product:	Javascript Product Image Zoom Module for CRELoaded 6.x
Release Number:	1.0.1
Release Date:	Aug 12, 2008
Customer Support:	For more information or support, please visit our website or contact us from the online form

Introduction

This document describes how to install and get started with Javascrip Product Image Zoom Module. This module allows display full size product picture on same window without a pop-up.

Features of the Javascript Product Image Zoom module:

• Display large product image on same window, no pop-up window any more
• Use Javascript to display the full size of the product pictures
• Fast, multiple zoom mode support
• Able to set picture title and copyright information in admin area
• Fully integrated into CRELoaded

Minimal System Requirements

System requirements are described in the release notes.

Installation

What other software must be installed first?

Before you can install this product, you must obtain access to a web server with the following:

• PHP 4.x with :
• GD Library
• mCrypt
• Register Globals set to On via httpd.conf, php.ini or .htaccess
• The Apache Webserver
• MySQL database
• The Linux / Unix Operating System
• CRE Loaded 6.15 or later

How do I install CRE Loaded : Javascrip Product Image Zoom Module?

Please follow these steps:

1. Upload the files to your catalog directory on the webserver.


2. Open templates/content/product_info.tpl.php file, change
   echo tep_javascript_image(DIR_WS_IMAGES . $new_image, 'product' . $product_info['products_id'], addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="5" vspace="5"', $popup_avail);
   to:
   ?> <a href="<?php echo DIR_WS_IMAGES . $product_info['products_image_lrg']; ?>" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="<?php echo DIR_WS_IMAGES . $new_image; ?>" alt="<?php echo $product_info['products_name']; ?>" border="0" /><br /><div align="center"><?php echo tep_template_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE); ?></div></a> <div class='highslide-caption' id='caption1'><?php echo $product_info['products_name']; ?></div> <?php


3. Open templates/YOUR_TEMPLATE_NAME/main_page.tpl.php file, after
   if (isset($javascript) && file_exists(DIR_WS_JAVASCRIPT . basename($javascript))) { require(DIR_WS_JAVASCRIPT . basename($javascript)); } ?>
   add:
   <script type="text/javascript" src="highslide/highslide.js"></script> <script type="text/javascript"> hs.graphicsDir = 'highslide/graphics/'; window.onload = function() { hs.preloadImages(5); } </script>


4. Open templates/YOUR_TEMPLATE_NAME/stylesheet.css file add:
   .highslide { cursor: url(../../highslide/graphics/zoomin.cur), pointer; outline: none; } .highslide-image { border-bottom: 1px solid white; } .highslide-image-blur { } .highslide-caption { display: none; border-bottom: 1px solid white; font-family: Verdana, Helvetica; font-size: 10pt; padding: 5px; background-color: silver; } .highslide-loading { display: block; color: white; font-size: 9px; font-weight: bold; text-transform: uppercase; text-decoration: none; padding: 3px; border-top: 1px solid white; border-bottom: 1px solid white; background-color: black; } a.highslide-credits, a.highslide-credits i { padding: 2px; color: silver; text-decoration: none; font-size: 10px; } a.highslide-credits:hover, a.highslide-credits:hover i { color: white; background-color: gray; } .highslide-display-block { display: block; } .highslide-display-none { display: none; }

How can I uninstall CRE Loaded : Javascrip Product Image Zoom Module?

    Delete all files that you added

    Change all modified files back

What if I encounter problems?

    Please see the troubleshooting section in the FAQ.