Better Product Preview with Lightbox 2

mirza_yasir4 · February 2, 2009

Better Product Preview with Lightbox 2

--------------------------------------------

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

http://www.lokeshdhakar.com/projects/lightbox2/

To Download the contribution

----------------------------------

Please download it from OsCommerce contributions. here is the link.

http://addons.oscommerce.com/info/6517

Description

-------------

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 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="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>'; ?>');

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

Edited July 5, 2009 by Jan Zonjee

batt255 · March 10, 2009

Hi... I installed it but it opens up in another full browser window..any ideas?...thanks

Hengelsportshoponline.nl · March 18, 2009

And it doesn't work for me in IE7 only FF.

rosmilkman · March 19, 2009

Same problem as Bruce - any suggestions to make?

icecoffee09 · March 19, 2009

Hi,

I have installed More_pic 6, any idea how to mix this lightbox with More_pic 6? many thanks

The related code of More_Pic 6 is like that

<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 . $products_main_image, addslashes($product_info['products_name']), (MORE_PICS_RESTRICT_PARENT=='false'?'':SMALL_IMAGE_WIDTH), (MORE_PICS_RESTRICT_PARENT=='false'?'':SMALL_IMAGE_HEIGHT), 'hspace="5" vspace="5"') . '<br><img border=0 src=images/zoom.gif></a>'; ?>');
//--></script>


<noscript>
<?php echo '<a href="' . tep_href_link (DIR_WS_IMAGES . $products_main_image) . '" target="_blank">' . tep_image (DIR_WS_IMAGES . $products_main_image, $product_info['products_name'], (MORE_PICS_RESTRICT_PARENT=='false'?'':SMALL_IMAGE_WIDTH), (MORE_PICS_RESTRICT_PARENT=='false'?'':SMALL_IMAGE_HEIGHT), 'hspace="5" vspace="5"') . '<br><img border=0 src=images/zoom.gif></a>'; ?>
</noscript>

I edit it a little bit, it works well but it just shows one picture :(

<script language="javascript"><!--
document.write('<?php echo '<a href="'. tep_href_link(DIR_WS_IMAGES . $products_main_image).'" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' .tep_image(DIR_WS_IMAGES . $products_main_image, $product_info['products_name'],  (MORE_PICS_RESTRICT_PARENT=='false'?'':SMALL_IMAGE_WIDTH), (MORE_PICS_RESTRICT_PARENT=='false'?'':SMALL_IMAGE_HEIGHT), 'hspace="5" vspace="5"') . '<br><img border=0 src=images/zoom.gif></a>'; ?>');
//--></script>

<noscript>
<?php echo '<a href="' . tep_href_link (DIR_WS_IMAGES . $products_main_image) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $products_main_image, $product_info['products_name'], 'hspace="5" vspace="5"') . '<br><img border=0 src=images/zoom.gif></a>'; ?>
</noscript>

It will be really cool if these two work together.

mirza_yasir4 · March 23, 2009

Hi... I installed it but it opens up in another full browser window..any ideas?...thanks

Sorry for the late reply

It works, just wait for the page to load completely. It will open in the same window, if not, let me know

mirza_yasir4 · March 23, 2009

And it doesn't work for me in IE7 only FF.

But it works for me in all three populer browsers

Firefox

Google Chrome

Internet Explorer

mirza_yasir4 · March 23, 2009

Hi,

I have installed More_pic 6, any idea how to mix this lightbox with More_pic 6? many thanks

The related code of More_Pic 6 is like that

<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 . $products_main_image, addslashes($product_info['products_name']), (MORE_PICS_RESTRICT_PARENT=='false'?'':SMALL_IMAGE_WIDTH), (MORE_PICS_RESTRICT_PARENT=='false'?'':SMALL_IMAGE_HEIGHT), 'hspace="5" vspace="5"') . '<br><img border=0 src=images/zoom.gif></a>'; ?>');
//--></script>


<noscript>
<?php echo '<a href="' . tep_href_link (DIR_WS_IMAGES . $products_main_image) . '" target="_blank">' . tep_image (DIR_WS_IMAGES . $products_main_image, $product_info['products_name'], (MORE_PICS_RESTRICT_PARENT=='false'?'':SMALL_IMAGE_WIDTH), (MORE_PICS_RESTRICT_PARENT=='false'?'':SMALL_IMAGE_HEIGHT), 'hspace="5" vspace="5"') . '<br><img border=0 src=images/zoom.gif></a>'; ?>
</noscript>

I edit it a little bit, it works well but it just shows one picture :(

<script language="javascript"><!--
document.write('<?php echo '<a href="'. tep_href_link(DIR_WS_IMAGES . $products_main_image).'" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' .tep_image(DIR_WS_IMAGES . $products_main_image, $product_info['products_name'],  (MORE_PICS_RESTRICT_PARENT=='false'?'':SMALL_IMAGE_WIDTH), (MORE_PICS_RESTRICT_PARENT=='false'?'':SMALL_IMAGE_HEIGHT), 'hspace="5" vspace="5"') . '<br><img border=0 src=images/zoom.gif></a>'; ?>');
//--></script>

<noscript>
<?php echo '<a href="' . tep_href_link (DIR_WS_IMAGES . $products_main_image) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $products_main_image, $product_info['products_name'], 'hspace="5" vspace="5"') . '<br><img border=0 src=images/zoom.gif></a>'; ?>
</noscript>

It will be really cool if these two work together.

It needs to be coded for that, I am sorry currently I am very busy, I can't check this issue right now. Try to fix it yourself

BAD311 · July 1, 2009

Thank you. I got this to work with osC 2.2.

To avoid issues, merge the content of lightbox.css into stylesheet.css.

Do not add this line: <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> into product_info.php. It can cause issues.

Your instructions were very easy to follow.

SpiceUp · July 3, 2009

//060417/zepitt/multi images extra

/// MULTI IMAGE

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>
	  </td>
           </tr>
<?php
   }

for($nb=1; $nb <= NB_IMAGE_EXTRA ; $nb++) {
$var_products_image = "products_image".$nb;
if (tep_not_null($product_info[$var_products_image])) {
?>        
            <tr>
              <td align="center" class="smallText">
<script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow(\\\'' . 
tep_href_link(FILENAME_POPUP_IMAGE_EXTRA, 'pID='.$product_info['products_id']).'&id='.$nb.'\\\')">'.
tep_image(DIR_WS_IMAGES_EXTRA . $product_info[$var_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_EXTRA . $product_info[$var_products_image]) . '" target="_blank">' . tep_image(DIR_WS_IMAGES_EXTRA . $product_info[$var_products_image], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>
              </td>
            </tr>        
<?php
    }
}
?>
</table>

can some one show me how to add Better Product Preview with Lightbox 2 code to the php file above

Thanks

Edited July 3, 2009 by SpiceUp

♥ecartz · July 3, 2009

can some one show me how to add Better Product Preview with Lightbox 2 code to the php file above

So you just want to know how to replace

document.write('<?php echo '<a href="java script:popupWindow(\\\'' .
tep_href_link(FILENAME_POPUP_IMAGE_EXTRA, 'pID='.$product_info['products_id']).'&id='.$nb.'\\\')">'.
tep_image(DIR_WS_IMAGES_EXTRA . $product_info[$var_products_image], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

? It looks like it would be

document.write('<?php echo '<a href="' . DIR_WS_IMAGES_EXTRA . $product_info[$var_products_image] . '" rel="lightbox" title="' . $product_info['products_name'] . '">' . tep_image(DIR_WS_IMAGES_EXTRA . $product_info[$var_products_image], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

I did not test nor download the contribution, so don't forget to backup before trying.

SpiceUp · July 3, 2009

Thanks will give it a try and let you know

OK Great it works perfect, Thanks Matt

Edited July 3, 2009 by SpiceUp

SpiceUp · July 5, 2009

If the title of the product has an apostrophe Example Valentine's Day 4089

then the picture does not display I can fix the problem by changing the title to

Valentine Day 4089

I was wondering if some thing can be edited [Added] in the code so I don’t have to change 100’s of title

Thanks

Edited July 5, 2009 by SpiceUp

♥ecartz · July 5, 2009

Try changing (in the code I posted previously)

'" rel="lightbox" title="' . $product_info['products_name'] . '">'

to

'" rel="lightbox" title="' . addslashes($product_info['products_name']) . '">'

I think that this is a bug in the contribution and that everyone who has apostrophes in their titles will encounter it (not just your modified version).

SpiceUp · July 5, 2009

Thanks a lot ecartz, it work Great !!, you save me a lot of time

SpiceUp · July 5, 2009

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

You guys have been so helpful thanks

I have one more problem, I will like to add this contribution to my products review page

The code is a little different can some one show me how

Thanks again

Edited July 5, 2009 by SpiceUp

♥ecartz · July 5, 2009

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

document.write('<?php echo '<a href="' . DIR_WS_IMAGES . $review['products_image'] . '" rel="lightbox" title="' . addslashes($review['products_name']) . '">' . tep_image(DIR_WS_IMAGES . $review['products_image'], addslashes($review['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

SpiceUp · July 5, 2009

ecartz, Thanks again, it works perfect

ehonda · September 3, 2009

hi, am using Online Merchant 2.2 RC2... the 2nd step...

2-Find this code around line no. 109

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

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

however, I cannot find the original codes in the product_info.php... it seems to be broken into 2 parts....

<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, ' style="margin:0px 0px 0px 0px;"') . ''; ?>');//--></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, ' style="margin:0px 0px 0px 0px;"') . ''; ?>
</noscript>

<?php echo tep_draw_prod_pic_bottom();?>

		</td></tr>
		<tr><td align="center">
<script language="javascript"><!--
document.write('<?php echo '<div><a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . TEXT_CLICK_TO_ENLARGE . '</a></div>'; ?>');//--></script>
<noscript>

how should I replace the code?

Edited September 3, 2009 by ehonda

ehonda · September 6, 2009

how should I replace the code?

please, can anyone help? I am a noob in programming... thanks a lot

jfkafka · September 22, 2009

Really impressive product display method

however having a problem similar to a couple of other people

where clicking on the image opens a new browser window

with the image displayed in the upper left rather than the centered

lightbox- also using ultimate SEO5 which puts a different URL in the address

window- if I disable SEO5, the lightbox works, so it seems to be a matter of

rewriting the document.write directive to accomodate the SEO URL,

just mention this in case it's relevant to anyone else and will post any

modified code that will allow these 2 contribs to coexist.

(Naturally if someone else can provide the solution, I'm all ears)

jfkafka · September 22, 2009

well, I may have found the solution (unless it stops working immediately after I post this)

This applies to using the lightbox with SEO URL 5.

I changed the settings in admin configuration/SEO URL 5

(previously I had Add cpath- false and choose URL rewrite type- standard)

these are the settings that displayed the Lightbox:

Enable SEO URLs? true

Add cPath to product URLs? true

Add category parent to beginning of URLs? true

Filter Short Words 3

Output W3C valid URLs? true

Choose URL Rewrite Type rewrite

Enter special character conversions

Remove all non-alphanumeric characters? false

Set the number of days to store the cache. 7

Reset SEO URLs Cache

Turn degug reporting on/off. false

Select caching system. FileSystem

maybe helpful to somebody with a crying.gif

mirza_yasir4 · September 28, 2009

Really impressive product display method
however having a problem similar to a couple of other people

where clicking on the image opens a new browser window

with the image displayed in the upper left rather than the centered

lightbox- also using ultimate SEO5 which puts a different URL in the address

window- if I disable SEO5, the lightbox works, so it seems to be a matter of

rewriting the document.write directive to accomodate the SEO URL,

just mention this in case it's relevant to anyone else and will post any

modified code that will allow these 2 contribs to coexist.

(Naturally if someone else can provide the solution, I'm all ears)

Sorry I am too busy these days

ahhmarr · July 18, 2010

lightbox with STS V 4.6

hello guys i ve STS installed into my website i just want to know that will the installation will work the same way or is there any modifications to be made

August 6, 2010

Hi Mirza

I just had a look at your site but it doesn´t work there , it just opens a new page and shows the picture there.

Gr, Rob

Better Product Preview with Lightbox 2

--------------------------------------------

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

http://www.lokeshdhakar.com/projects/lightbox2/

To Download the contribution

----------------------------------

Please download it from OsCommerce contributions. here is the link.

http://addons.oscommerce.com/info/6517

Description

-------------

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 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="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>'; ?>');
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

Better Product Preview with Lightbox 2

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Join the conversation