Better Product Preview with Lightbox 2 --------------------------------------- This addon is made with the help of Lightbox2 by Lokesh Dhakar www.lokeshdhakar.com/projects/lightbox2/ 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 visible 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 Lightbox 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: http://www.nasa4ppc.com Note ---- 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. 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 http://yasirimran.wordpress.com

Files