Lightbox - Conflicting Scripts?

**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:

Code:

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:

Code:

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

<!--[if IE ]>
  <link href="ukie.css" rel="stylesheet" type="text/css">
<![endif]-->
<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:

Code:

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

I believe the workaround is:

Code:

      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)

Thread: Lightbox - Conflicting Scripts?

Thread Tools

Search Thread

Lightbox - Conflicting Scripts?

Bookmarks

Bookmarks

Posting Permissions