Jump to content
Sign in to follow this  
mirza_yasir4

Better Product Preview with Lightbox 2

Recommended Posts

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 by Jan Zonjee

Thanks and Regards

Yasir Imran Mirza

My Contributions

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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


Thanks and Regards

Yasir Imran Mirza

My Contributions

Share this post


Link to post
Share on other sites
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


Thanks and Regards

Yasir Imran Mirza

My Contributions

Share this post


Link to post
Share on other sites
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


Thanks and Regards

Yasir Imran Mirza

My Contributions

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

//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 by SpiceUp

Share this post


Link to post
Share on other sites
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.


Always back up before making changes.

Share this post


Link to post
Share on other sites

Thanks will give it a try and let you know

 

OK Great it works perfect, Thanks Matt

Edited by SpiceUp

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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


Always back up before making changes.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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>'; ?>');


Always back up before making changes.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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


Thanks and Regards

Yasir Imran Mirza

My Contributions

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×