Lightbox - Conflicting Scripts? [Archive]

Schmoopy

11-21-2008, 03:46 AM

Hi there, I'm trying to use Lightbox on one of my pages, but when I've tried implementing it, there's an error with one of my current scripts.

I currently use this script for the image map on my page:

function ShowMapAreaDiv()
{
this.elems=[];
this.params=arguments;

this.init=function()
{
var args=this.params, areas=document.getElementById( args[0] ).getElementsByTagName('area');

for(var i=1, len=args.length; i<len; i++)
{
this.elems[ args[i] ] = document.getElementById(args[i]);

if(!this.elems[ args[i] ])
alert( args[i] +' Not Found');

areas[i-1].onclick=(function(obj, ident)
{
return function()
{
var elems=obj.elems;

if(elems[ident].style.display=='block')
elems[ident].style.display='none';
else
for(var i in elems)
elems[i].style.display = (elems[i]===elems[ident]) ? 'block' : 'none';

return false;
}
})(this, args[i]);
}
}

this.init();
}

Now, I try and link the scripts to lightbox like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

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

<title>UK Riding Spots - Bomb The Hills</title>

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

<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="uk.css" />

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


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

/***********************************************
* All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

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

But using this code, I get an error, when looking at it in FF's Error Console it says "elems[i].style is undefined - Line 27". As soon as I take away the three ligthbox scripts it works fine again,

anyone know what's wrong here?

Jack

Nile

11-21-2008, 04:04 AM

Make sure that you've got the right code, also does the error appear in the lightbox code, or another code? Also make sure your not redefining a variable redundantly, and then mistaking one for being a different.

jscheuer1

11-21-2008, 04:16 AM

The prototype script library automatically extends many objects. This is probably what has happened here:

for(var i in elems)
elems[i].style.display = (elems[i]===elems[ident]) ? 'block' : 'none';

I believe the workaround is:

for(var i in elems)
if(elems.hasOwnProperty(i))
elems[i].style.display = (elems[i]===elems[ident]) ? 'block' : 'none';

There could also be other problems. Also, it might just be better to use a subsidiary for(var j=0, elen=elems.length; j<elen; j++) instead of for(var i in elems)