Lightbox 2.03a conflict with Google Shopping Cart Please Help

**MystiqueCollection** · 11-11-2008, 03:46 AM

1) Script Title: Lightbox 2.03a

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem:
I am trying to add Google Cart to my site with an existing Lightbox
2.03a image gallery script. Both scripts work well on their own, but
not together. The shopping cart script disables the image gallery
script and I cannot figure out what I am doing wrong. I had Google
Checkout Buy Now buttons previously with the Lighbox script and
everything worked fine. If I place the scripts where Goggle specifies
I get this error:
Line: 465
Char: 5
Error: Array length must be assigned a finite positive number
and The image gallery continues to function.

Lightbox calls from the head section, and Google Cart calls from the body section. I tried placing the Google script before the Lightbox script in the head, which the cart then functions properly, but it disables lightbox. I cannot figure out what is wrong. Here is the script from my page:
<html>

<head>
<style>

</style>
<script type="text/javascript" src="lightbox2.03a/js/prototype.js"></
script>
<script type="text/javascript" src="lightbox2.03a/js/scriptaculous.js?
load=effects"></script>
<script type="text/javascript" src="lightbox2.03a/js/lightbox.js"></
script>
<link rel="stylesheet" href="lightbox2.03a/css/lightbox.css"
type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>cards</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<style fprolloverstyle>A:hover {color: #000000}
</style>
<meta name="Microsoft Border" content="tb, default">
</head>
<body link="#808080" vlink="#808080">
<table border="0" width="710" height="1000" cellspacing="1">
<tr>
<td width="100%" valign="top" align="center">
<table border="0" width="710">
<tr>
<td width="100%" colspan="3">
<p align="center"><font size="4" face="Tahoma"
color="#808080">Greeting
Cards</font></td>
</tr>
<tr>
<td width="34%">
<p align="center"><img border="0" src="flowers.jpg"
width="192" height="137"></td>
<td width="33%">
<p align="center"><img border="0" src="lakeshore.jpg"
width="188" height="137"></td>
<td width="33%">
<p align="center"><img border="0" src="lighthouses.jpg"
width="181" height="137"></td>
</tr>
<tr>
<td width="100%" colspan="3" height="20">
<p align="center"><font face="Tahoma" color="#808080"
size="2">Our
original photography given digital effects and printed on
high
quality matte cardstock. Each card comes with a plain
white envelope
and measures 5" X 6 1/2". Price includes
shipping.</font></td>
</tr>
<tr>
<td width="100%" colspan="3" height="25"></td>
</tr>
<tr>
<td width="34%" align="center" height="101"><a
href="purple_flower_card.jpg" rel="lightbox"><img
src="purple_flower_card_small.jpg" alt="" width="75" height="100" /></
a></td>
<td width="33%" align="center" height="101"><a
href="split_rock_card.jpg" rel="lightbox"><img
src="split_rock_card_small.jpg" alt="" width="75" height="100" /></a></
td>
<td width="33%" align="center" height="101"><a
href="yellow_flower_card.jpg" rel="lightbox"><img
src="yellow_flower_card_small.jpg" alt="" width="75" height="100" /></
a></td>
</tr>
<tr>
<td width="34%" align="center"><font face="Tahoma" size="2"
color="#808080">A
Purple Flower<br>
$3.00</font></td>
<td width="33%" align="center"><font face="Tahoma" size="2"
color="#808080">Split
Rock Lighthouse<br>
$3.00</font></td>
<td width="33%" align="center"><font face="Tahoma" size="2"
color="#808080">A
Yellow Flower<br>
$3.00</font></td>
</tr>
<tr>
<td width="34%" height="25" align="center"></td>
<td width="33%" height="25" align="center"></td>
<td width="33%" height="25" align="center"></td>
</tr>
<tr>
<td width="34%" height="25" align="center"></td>
<td width="33%" height="25" align="center"></td>
<td width="33%" height="25" align="center"></td>
</tr>
<tr>
<td width="34%" height="25" align="center"><a
href="butterfly_on_tryst_card.jpg" rel="lightbox"><img
src="butterfly_on_tryst_card_small.jpg" alt="" width="100"
height="75" /></a></td>
<td width="33%" height="25" align="center"><a
href="lake_superior_sunrise_card.jpg" rel="lightbox"><img
src="lake_superior_sunrise_card_small.jpg" alt="" width="100"
height="75" /></a></td>
<td width="33%" height="25" align="center"><a
href="lakeshore_card.jpg" rel="lightbox"><img
src="lakeshore_card_small.jpg" alt="" width="100" height="75" /></a></
td>
</tr>
<tr>
<td width="34%" height="25" align="center"><font
face="Tahoma" size="2" color="#808080">Butterfly
On Tryst<br>
$3.00</font></td>
<td width="33%" height="25" align="center"><font
face="Tahoma" size="2" color="#808080">Lake
Superior Sunrise<br>
$3.00</font></td>
<td width="33%" height="25" align="center"><font
face="Tahoma" size="2" color="#808080">The
Lakeshore<br>
$3.00</font></td>
</tr>
</table>
</td>
</tr>
</table>

<script id='googlecart-script' type='text/javascript' src='https://
checkout.google.com/seller/gsc/v2/cart.js?mid=943059389526775'
integration='jscart-wizard' currency='USD'></script></body>
</html>

Any help is appreciated. I am growing very frustrated. Thanks.

Matt

**jscheuer1** · 11-11-2008, 11:29 AM

It's possible that the two scripts are simply incompatible. However, since I don't really understand Google Cart all that well, there may be a work around. Looking at your code, I see none of the class names generally associated with Google Cart, so I assume you are using some alternative method of Google Cart that I haven't been able to find any documentation on yet.

But, rather than trying to find a work around involving Google Cart, which as I say I don't quite 'get'. We could just try other image viewing scripts. One would be Lightbox 2.04, or if you need the extended functionality of Lightbox 2.03a, you could use Lightbox 2.04a (which also has a number of bug fixes, so use 2.04a anyway), see:

http://www.dynamicdrive.com/forums/s...470#post163470

Lightbox 2.04/2.04a will resolve the conflict if it is simply a matter of competition over events assigned to links on the page because the .04 architecture uses a non-competitive method of evaluating the events.

But there may (or also) be a conflict in variable and/or function names used by the two scripts. If this is the case, you may have to switch to a jQuery based image viewer and run it in no conflict mode.

If it's both of these things, the jQuery based viewer will need to run in no conflict mode and use the some sort of non-competitive event evaluation. Modifications to ThickBox (a jQuery viewer) for non-competitive event evaluation can be found here:

http://www.dynamicdrive.com/forums/s...96&postcount=2

But it would still need to be run in no conflict mode, so try Lightbox 2.04a first, and get back to me as to the result.

Also, a link to your page would help in determining the extent of the conflict.

Please post a link to the page on your site that contains the problematic code so we can check it out.

**MystiqueCollection** · 11-11-2008, 02:39 PM

Thank you for the reply. I have installed the google cart on three of my pages so far, but stopped when I discovered the conflict.

Here: http://www.mystiquecollection.net/magnets.htm the cart functions properly as Lightbox is not installed on this page, and I have the HTML laid out per Google specifications.

On: http://www.mystiquecollection.net/cards.htm The cart functions, but has disabled Lightbox. I have the cart script first, in the head section before the Lightbox script. This is not per Google instruction, but trial and error of myself. If I place the Google Cart script right before the </body> tag as google specifies I receive a Javascript error and the cart does not function, but Lightbox works properly.

This is where I am stuck. I tried installing Image Thumbnail Viewer on a test page with Google Cart and revieved the same results all around.

matt

**jscheuer1** · 11-11-2008, 04:05 PM

Your page:

http://www.mystiquecollection.net/cards.htm

is working in FF and in Opera. It even works in IE, except that the lightbox links are executing as regular links, after attempting to launch the lightbox. So, I imagine that, even without using a different script, if you were just to add a script like:

Code:

<script type="text/javascript">
if(window.attachEvent && !window.addEventListener)
document.attachEvent('onclick', function(){
var s = window.event.srcElement;
if((s.rel && /^lightbox/.test(s.rel)) || (s.parentNode && s.parentNode.rel && /^lightbox/.test(s.parentNode.rel)))
return false;
});
</script>

That should take care of it. If not, then use:

Code:

<script type="text/javascript">
if(window.attachEvent && !window.addEventListener)
document.onclick = function(){
var s = window.event.srcElement;
if((s.rel && /^lightbox/.test(s.rel)) || (s.parentNode && s.parentNode.rel && /^lightbox/.test(s.parentNode.rel)))
return false;
};
</script>

Which is more of a blunt instrument, but should do the trick, as it is more or less what I typed into the address bar that got the page working in IE.

Placement of this script should be unimportant, but the best spot would be right before the </body> tag.

Now, there is just one possible problem, your host adds code to the page. This may be interfering, if so, they may have a policy against adding certain types of, or all scripts to your pages. Please make sure you are not in violation of your host's policy. They may allow certain types of scripts though and have simply blocked this one by accident. If that is the case, one or the other of the two methods I've outlined may well work. Then again, it may have nothing to do with your host, in which case either script would probably do the trick.

Still, there could also be other problems, if this works at least to get the lightbox to show, those can be worked out. But, if Lightbox 2.04a takes care of things for you, I'd go with it, as it won't need so much added code to get it to work in IE.

**MystiqueCollection** · 11-12-2008, 03:25 AM

Many thanks John!

I added the script:
<script type="text/javascript">
if(window.attachEvent && !window.addEventListener)
document.attachEvent('onclick', function(){
var s = window.event.srcElement;
if((s.rel && /^lightbox/.test(s.rel)) || (s.parentNode && s.parentNode.rel && /^lightbox/.test(s.parentNode.rel)))
return false;
});
</script>

you provided, before the </body> tag and it corrected my problem.

Thread: Lightbox 2.03a conflict with Google Shopping Cart Please Help

Thread Tools

Search Thread

Lightbox 2.03a conflict with Google Shopping Cart Please Help

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions