Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

support thread for Lightbox v1.0 contribution


mwstinson

Recommended Posts

Hello guys,

 

I'm the webmaster of www.babyhuys.com, and today I discovered the 'lightbox' feature! I tried to add it to my webshop (based on OSCommerce) but i can't get it to work. In product_info.php I put the

<script type="text/javascript" src="lightbox.js"></script>

and I also replaced the part for the image popup with

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" rel="lightbox">' . 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>
<?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, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>

 

But somehow the image still opens in the same window! It doesn't matter what I do, it just won't open with Lightbox.

 

See for example: http://www.babyhuyswebshop.nl/product_info...products_id=908 (but it doesn't really matter which product you choose)

 

Does any of you guys have a solution, or have the same problem?

 

It would help me very much!

Kind regards,

 

Tommy

 

 

As I can see the code on your site is wrong. You have to put

<script type="text/javascript" src="js/lightbox.js"></script>

in your

<head> </head>

tags, NOT you body tags.

Edit your template to do this.

Try that and let me know.

Spyros

Link to comment
Share on other sites

  • Replies 100
  • Created
  • Last Reply

Top Posters In This Topic

Dear,

 

I did put it in the head:

 

<head>

<script type="text/javascript" src="js/lightbox.js"></script>

 

blabla..

 

 

That's why I don't understand why it just won't work:(

 

Anybody got a solution?

 

Thanks for your help in advance!

 

Tommy

Link to comment
Share on other sites

I think I found the problem, but not yet the solution!!

 

There are 2 "<head>" 's in my product_info.php! First there's:

 

<html>

<head>

 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta HTTP-EQUIV="imagetoolbar" CONTENT="no">

</head>

 

But if you scroll down further, you'll find another head:

 

</body>

</html>

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html dir="LTR" lang="nl">

<head>

 

<meta http- blabla

 

 

 

How is that possible? Is this normal in OSCommerce?

 

Thanks,

 

Tommy

Link to comment
Share on other sites

Guys! Nevermind! I discovered the fault already.

It appears I have been mixing up the old and the new version of lightbox! I only added <script type="text/javascript" src="js/prototype.js"></script> to the head, while

 

<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

 

also needed to be added!

 

Everything works fine now!

 

Kind regards,

 

Tommy

www.babyhuys.com

Link to comment
Share on other sites

Not sure if I am getting closer or not! Tried following directions from Lightbox2 site

 

In the support section, it suggests:

 

It doesn't work at all. The image opens up in a new page. What's wrong?

This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example:

<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">

A quick fix to this problem is to append the initLightbox() to the onload attribute as so:

<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">

 

 

I do have a body onload comment in my body (from a differant script altogether) I have added ;initLightbox along with the gif images that are used in Lightbox.

 

It didnt make a differance but I I dont know if that is still bringing me closer to a resolution- is anyone else having this same problem or had this same problem???

Link to comment
Share on other sites

Im using " product info lightbox " http://www.oscommerce.com/community/contributions,5185 .

 

And i dunno why but im getting this problem when i click the thumbnail

 

Parse error: syntax error, unexpected ';' in C:\Program Files\xampp\oscommerce\catalog\popup_image.php on line 20

 

Anyone any idea. The only thing on that line is ?> . The instructions are very basic .

 

Can anyone plz help ??

Link to comment
Share on other sites

  • 3 weeks later...
  • 4 weeks later...

I'm just a newbie with code so please forgive me if I'm wrong (and please tell me) but I think the code should be:

 

<script language="javascript"><!--

document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" rel="lightbox">' . 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>'; ?>');

//--></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, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

</noscript>

 

NOT AS IN THE INSTRUCTIONS:

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" rel="lightbox">' . 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>

<?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, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

</noscript>

 

because if you disable java in your browser you get 2 images on your product info page with the original code because without using java to write the image code the browser reads it as 2 images, hope that makes sense!

Link to comment
Share on other sites

Oooops should be:

 

<script language="javascript"><!--

document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" rel="lightbox">' . 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>'; ?>');

//--></script>

<noscript>

 

you need the 'addslashes' in otherwise it won't display a image if theres an apostrophe in the product description!!

Edited by kidda
Link to comment
Share on other sites

Hi,

I'm trying to use Lightbox 2 with UltraPics and STS.

I've used iggys code for Lightbox2 & UltraPics however when i click on an image the small version of the image pops up rather then the large version!

Where could i have gone wrong?

Thanks

Link to comment
Share on other sites

  • 2 weeks later...

Had installed the contrib from matrix_france on a fresh install from OSC MS2. Everything works fine except I get no next/ previous buttons.

 

Used the IntelliMouse and add pictures from DVD's.

 

With same browser it works on the site from matrix_france.

 

Any Idea?

 

Nick

Link to comment
Share on other sites

Hi, I've installed the contributions and it works with IE6, Safari and Firefox.

Unfortunately I've seen that the image loading.gif is not loaded like the other "close" or else.

And another porblem is that i don't see the product title (the name) displayed at the basis of the pop up.

Does anyone had this problem?

Link to comment
Share on other sites

Solved my problem.

 

Instead of

 

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

 

I have to use this

 

#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

 

Nick

Link to comment
Share on other sites

  • 3 weeks later...

Hi there,

 

I figured out a place where Lightbox is not enabled: In product_reviews_write.php.

 

So replace the line (around line 200):

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

 

with:

document.write('<?php echo '<a rel="lightbox" href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" title="'. $product_info['products_name'] .' - '. $manufacturer['manufacturers_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>'; ?>');

 

And replace:

<?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, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

 

With:

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel=”lightbox”>' . 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>'; ?>

 

 

I hope someone can insert it in the next build and hopefully it helps you.

 

Erik aka Grinse

 

Edit:

Also product_reviews_info.php is not ready to use lightbox out of stock so do the same changes you did in product_reviews_write.php also in product_reviews-info.php (easiest way is copy n paste). But you have to mchange the variable $product_info (from product_reviews_write.php) to $review (in product_reviews_info.php)

Edited by Grinse
Link to comment
Share on other sites

Ok the third place where Lightbox is not enabled is product_reviews.php.

 

So replace the line:

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

 

with:

document.write('<?php echo '<a rel="lightbox" href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" title="'. $product_info['products_name'] .' - '. $manufacturer['manufacturers_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>'; ?>');

 

And replace:

<?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, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

 

With:

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel=”lightbox”>' . 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>'; ?>

 

 

I hope someone can insert it in the next build and hopefully it helps you.

 

Erik aka Grinse

Link to comment
Share on other sites

  • 4 months later...
  • 2 weeks later...

Has anyone gotten this to work with the Dynamic MoPics contribution?

http://www.oscommerce.com/community/contributions,1114/

 

 

I cannot get lightbox to work with the already working Dynamc MoPics.

 

Dynamic MoPics already has a popup generating and when I apply this code so they are probably interacting or something. Can someone help me make these two work?

 

Thanx.

mmmmmmmmmmmm. Doughnuts . . . haha. i said nuts.

Link to comment
Share on other sites

It works fine. Just curious however why these errors in the error console? I get 7 errors written for every view:

 

Warning: reference to undefined property options.transition

Source File: http://www.domain.com/lightbox/effects.js

Line: 244 = if (options && options.transition === false) options.transition = Effect.Transitions.linear;

 

Warning: reference to undefined property object.nodeType

Source File: http://www.domain.com/lightbox/prototype.js

Line: 170 = return object && object.nodeType == 1;

Link to comment
Share on other sites

It works fine. Just curious however why these errors in the error console? I get 7 errors written for every view:

 

Warning: reference to undefined property options.transition

Source File: http://www.domain.com/lightbox/effects.js

Line: 244 = if (options && options.transition === false) options.transition = Effect.Transitions.linear;

 

Warning: reference to undefined property object.nodeType

Source File: http://www.domain.com/lightbox/prototype.js

Line: 170 = return object && object.nodeType == 1;

 

 

Im a bit lost. Who are you replying to? Hopefully not me cause if you are you just lost me. haha

mmmmmmmmmmmm. Doughnuts . . . haha. i said nuts.

Link to comment
Share on other sites

thirdly if you want to use this contrib on the catalog/product_info.php page you will change

 

<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, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></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, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>

 

with

 

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" rel="lightbox">' . 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>
<?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, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>

 

 

I did that and my main picture works. But since I have Dynamic MoPics, my extra pictures dont work. I have to edit the dynamic_mopics.php file. Here is the code it has:

 

<script language="javascript" type="text/javascript"><!--
		document.write('<a href="java script:popupImage(\'<?php echo $extraImagePopupURL; ?>\',\'<?php echo $extraImagePopupHeight; ?>\',\'<?php echo $extraImagePopupWidth; ?>\');"><?php echo $extraImagePopupImage; ?><br /><span class="smallText"><?php echo $extraImageURLText; ?></span></a>');
	  //--></script>
	  <noscript>
		<a href="<?php echo $extraImageURL; ?>" target="_blank"><?php echo $extraImageImage; ?><br /><span class="smallText"><?php echo $extraImageURLText; ?></span></a>
	  </noscript>

 

How would I edit this to make Lightbox work with it?

 

Thanx.

Edited by jsi

mmmmmmmmmmmm. Doughnuts . . . haha. i said nuts.

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