Jump to content
Sign in to follow this  
mwstinson

support thread for Lightbox v1.0 contribution

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

Share this post


Link to post
Share on other sites

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

Share this post


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

Share this post


Link to post
Share on other sites

found how to edit the 'upper' head section, and placed <script type="text/javascript" src="js/lightbox.js"></script> there too, but still won't work:(

Share this post


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

Share this post


Link to post
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???

Share this post


Link to post
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 ??

Share this post


Link to post
Share on other sites

where has this contribution gone??? I have used it previously and LOVED it, now I need it again and cant find it

 

please help

Share this post


Link to post
Share on other sites

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!

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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?

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


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

Share this post


Link to post
Share on other sites

where is the contrib pager ,it has diseapear, could someone do once again a full package and post it ?


MS2

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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;

Share this post


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

Share this post


Link to post
Share on other sites
Im a bit lost. Who are you replying to? Hopefully not me cause if you are you just lost me. haha

 

I wasn't replying to anyone. I was asking a question.

Share this post


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

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  

×