Contributions
Better Product Preview with Lightbox 2
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
Expand All / Collapse All
EFEIT DE iMAGEM Lightbox - eM PORTUGUES DO BRASIL
traduzido por: Dones Silva - www.dhones.com
---------------------------------------
como instalar?
--------------
Abra o arquivo
Catalog / product_info.php
1- procute a tag <head> e em seguida adicione.
<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-procure aproximdamente pela linha. 109 por
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>'; ?>');
e substitua por:
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- faça o Upload das pastas "css", "js", "images" para a pasta rais de sua loja.
4 - é só isso!!
facil como um OI
para suporte ou ajuda
www.phpmania.org
o pessoal lá é gente Boa
meu nik no phpmania.org e dhmsi
Obrigado!!!
Att: dhones Silva
www.dhones.com
Hospedagem voltada para Loja virtual!!!
If you are using Simple Template System(STS), apply STEP 1 (1-Find <head> tag and add right below it...) to the file /catalog/includes/sts_template.html else it won't work.
If there are apostrophes in your product names, you will need this modification, or else your images will not display:
=======================
document.write('<?php echo '<a href="images/' . $product_info['products_image'] . '" rel="lightbox" title="' . addslashes($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>'; ?>');
=============
Repackaged complete contrib, and modified the Readme and Installation.txt file.
This modified script will position the pop up box 100 pixels below window top.
See it working at http://www.volt-london.co.uk
Not full package, only js.
To install:
1. Backup the original file (I don't really see a good reason for this but this is the usual routine...)
2. Replace the js file on this pack with the one on your server.
If you wish to set the margin yourself, edit line #234 where is shows + 100 to position the image wherever you like. eg. + 50 + 100 + 175 etc.
Modified by Eyal Shoabi - http://www.volt.co.il
Header tags should be:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
If they aren't, image loads below content. Works like a freakin' charm, even on Safari.
Better Product Preview with Lightbox 2
---------------------------------------
This addon is made with the help of Lightbox2 by Lokesh Dhakar
http://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
Note: Contributions are used at own risk.
Efeito em Imagem Lightbox em Portugues - Brasil
Simple Template System(STS)