Javascript Conflict on homebrew PHP based website?

**Gaffen** · 10-28-2010, 08:04 AM

Hi, I've been working on this problem for a couple of days straight now to no avail, so some help would be greatly appreciated!

I'm trying to get a lightbox running on the following page:

http://gaffen.co.uk/projects/projects.php?page=work02

I think the problem is a conflict between the imageflips I'm using and the lightbox script:

HTML Code:

<link rel="stylesheet" type="text/css" media="screen" href="/CSS.css" />
	<link href='http://www.gaffen.co.uk/gaffen/gaffenfavico.png' rel='shortcut icon' type='image/x-png'/>
	<script language="JavaScript">
<!--

  // MouseOn   
     plyopen = new Image(50, 22);
     plyopen.src = "http://i277.photobucket.com/albums/kk64/tonedeafmessiah/Gaffen/images/nav/playopen.jpg";
     blogopen = new Image(22, 27);
     blogopen.src = "http://i277.photobucket.com/albums/kk64/tonedeafmessiah/Gaffen/images/nav/deadcatopen.gif";
     wrkopen = new Image(73, 22);
     wrkopen.src = "http://i277.photobucket.com/albums/kk64/tonedeafmessiah/Gaffen/images/nav/workopen.jpg";

  // MouseOff
     plyclosed = new Image(50, 22);
     plyclosed.src = "http://i277.photobucket.com/albums/kk64/tonedeafmessiah/Gaffen/images/nav/playclosed.jpg";
     blogclosed = new Image(22, 27);
     blogclosed.src = "http://i277.photobucket.com/albums/kk64/tonedeafmessiah/Gaffen/images/nav/deadcatclosed.gif";
     wrkclosed = new Image(73, 22);
     wrkclosed.src = "http://i277.photobucket.com/albums/kk64/tonedeafmessiah/Gaffen/images/nav/workclosed.jpg";

function BNB_mouseon(n){
          imageON = eval(n + "open.src");
          document [n].src = imageON;
}
function BNB_mouseoff(n){
imageOFF = eval(n + "closed.src");
     document [n].src = imageOFF;
}
initLightbox();
// -->
</SCRIPT>
<script type="text/javascript" src="lightbox.js"></script>
<link rel='stylesheet' href='lightbox.css' type='text/css' media='screen' />

This is used in a PHP file I've made, which calls the content from a seperate PHP file. This one includes the

HTML Code:

<a href="image.jpg" rel="lightbox" title="comment"><img src="thumbnail.jpg" /></a>

That calls the lightbox function.

The lightbox I'm currently using is here, after not being able to get this one to work.

All advice is appreciated, I'm running out of ideas!

**Fang** · 10-28-2010, 09:27 AM

Place the LightBox script and css before the call to initLightbox

**Gaffen** · 10-28-2010, 09:36 AM

Thanks a lot for replying but I'm afraid it's had no affect. The header now reads:

HTML Code:

<script type="text/javascript" src="lightbox.js"></script>
	<link rel='stylesheet' href='lightbox.css' type='text/css' media='screen' />
	<script language="JavaScript">
<!--

(imageflip javascript)

// -->
initLightbox();
</SCRIPT>
</HEAD>
<BODY id="allworkand" >

Any other ideas? Thanks again for getting back to me!

**Fang** · 10-28-2010, 09:48 AM

The lightbox.js script links to a .html file. Check the path to lightbox.js

**Gaffen** · 10-28-2010, 11:26 AM

Do you mean "http://huddletogether.com/projects/lightbox/"?

I couldn't find any other links to HTML files.

I *did* try taking the "initLightbox();" function and adding it to an onload event at the begining of the "work02.php" file, like so:

HTML Code:

<div id="project" onload="initLightbox();"><div class="work">
<div class="lfloat"><a href="image" rel="lightbox" title="title"><img src="thumbnail" /></a></div>