Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Better Product Preview with Lightbox 2


mirza_yasir4

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

Link to comment
Share on other sites

  • 1 month later...
  • 2 weeks later...

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.

Link to comment
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

Link to comment
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

Link to comment
Share on other sites

  • 3 months later...

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.

Link to comment
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
Link to comment
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.

Link to comment
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
Link to comment
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.

Link to comment
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
Link to comment
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.

Link to comment
Share on other sites

  • 1 month later...

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

  • 3 weeks later...

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)

Link to comment
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

Link to comment
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

Link to comment
Share on other sites

  • 9 months later...
  • 3 weeks later...

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...