Better Product Preview with Lightbox 2

OsCommerce Contribution / Addon

This Contribution is listed here at OsCommerce Contributions site. To Download from my blog.
When visitors will click the product thumbnail picture, Instead of appearing an ordinary popup, a screen centered overlay image will appear in his browser, while page will be visibile in the background. I have seen this code implemented in one another oscommerce addon, but that was a big package and you need to change many files for that.

But to install this addon you just need to replace only few lines of code and to place some additional files. The Lightbox2 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.

How to Install

Open the file
Catalog / product_info.php

1-Find <head> tag and add right below it. (Please don’t place it after other script including tags or stylesheet links, place it inside the head tag on top)

<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
<script src=”js/prototype.js” type=”text/javascript”></script>
<script src=”js/scriptaculous.js?load=effects,builder” type=”text/javascript”></script>
<script src=”js/lightbox.js” type=”text/javascript”></script>

2-Find this code around line no. 109

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>’; ?>’);

Replace it with

document.write(‘<?php echo ‘<a href=”images/’ . $product_info[‘products_image’] . ‘” rel=”lightbox” title=”‘ . $product_info[‘products_name’] . ‘”>’ . 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>’; ?>’);

3-Upload the accompnied folders “css”, “js”, “images” into your catalog folder. This will not replace any files, just add few css, javascript and image files to your website.

That’s all you are done.

See it in action here, go to any product’s description page and click on the product image:


I use a high dimensions product images (300 x 300 size) in my Oscommerce store, so this addon works fine for me, because user can see the image clearly, but if you are using default OScommerce size (around 100 x 100) then this addon is not nice for you.

This addon is made with the help of Lightbox2 by Lokesh Dhakar

Feel free to contact me with any suggested enhancements or bugs. This addon could be used in any OsCommerce version, If you feel dificulty in implementing this, please contact me.

Best Regards
Yasir Imran Mirza

About Yasir Imran

Yasir Imran is a Pakistani living in Saudi Arabia. He writes because he want to express his thoughts. It is not necessary you agree what he says, You may express your thoughts in your comments. Once reviewed and approved your comments will appear in the discussion.
This entry was posted in Web and tagged , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s