Community Add-Ons

If you have done the changes from the install file and the picture shows in a new window do as follow.

1. Change the location of the java scripts from the file:
catalog/includes/sts_templates/{your template name}/sts_template.html

<script type="text/javascript" src="includes/js/prototype.js"></script>
<script type="text/javascript" src="includes/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="includes/js/lightbox.js"></script>

to
/catalog/product_info.php

2. Copy the info from lightbox.css to stylesheet.css Microsoft Explorer dont like two css files in one go.
Take away the line

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" /> its not needed any more.

3. Take away the old popupscript in /catalog/product_info.php

at line 27

remove

<script language="javascript"><!--
function popupWindow(url) {
window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}
//--></script>

at line 108

remove

<script language="javascript"><!--
document.write('<?php echo '<a href="javascript:popupWindow('' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>

and replace with

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

Hope this will help

Additional Insructions for installation on Lightbox, with suggestions from varnco

You will need to download the lightbox Javascript Files and install them according to directions.


**Notes**

Tested using OSC Commerce MS2 RC1, but should be similar to other versions
STS v4.5.3


To reference the lightbox.css stylesheet in the HTML output, you will need to Edit the following page

catalog/product_info.php

===========================================================

1. //Remove the Pop Up Image Window on the Product Info Page

FIND and REMOVE

<script language="javascript">
<!--document.write('<?php echo '<a href="java script:popupWindow('' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>



2. //Add stylesheet for lightbox to page code.

FIND

<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>

AND REPLACE WITH

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>


============================================================
If lightbox isn't working still:

Make sure the file location of the "js" folder is properly located at the top of your STS Pages

EXAMPLE from a default installation

catalog/includes/sts_templates/ YOUR TEMPLATE FILE LOCATION /sts_template.php

<head>
<!--$headcontent-->

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen">

<script type="text/javascript" src="http:// YOUR SERVER ADDRESS /catalog/includes/js/prototype.js"></script>
<script type="text/javascript" src="http:// YOUR SERVER ADDRESS /catalog/includes/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http:// YOUR SERVER ADDRESS /catalog/includes/js/lightbox.js"></script>

</head>

This contribution replaces the ordinary pop up window image with the cool Lightbox FX.

If you don't know what lightbox is visit:
http://www.huddletogether.com/projects/lightbox2/

Demo at:
http://www.artsound.gr/catalog
check a product and click the image enlarge link.

Used Lightbox version 2.03.3.

I hope this will work for you.