jump to navigation

Lightbox for osCommerce ! May 25, 2007

Posted by admin in : Simple Issues , trackback

Fed up with the default option given by osCommerce to enlarge product images, one of the client wanted to implement Lightbox (http://www.huddletogether.com/projects/lightbox/)

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

We took it up and made the changes. It worked like breeze

############################################################

First upload the files that are included with this package to the root directory of your catalog.

Typically the catalog directory.
############################################################

Secondly you will add the following code between the <head> and </head> to any page that you want to use the script on.

Typically on catalog/product_info.php

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

thirdly if you want to use this contrib on the catalog/product_info.php page you will change

<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>
<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>

with

<?php echo ‘<a href=”‘ . tep_href_link(DIR_WS_IMAGES . $product_info[’products_image’]) . ‘” 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>’; ?>
<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>

############################################################

lastly
add contents of lightbox.css to the bottom of catalog/stylesheet.css

Comments»

no comments yet - be the first?