I am a digital design student working on a final year project that requires me to build a website that utilises both MooTools and LightBox.
For MooTools I have used a hacked acordion script from a tutorial by David Walsh [
http://davidwalsh.name/simple-mootools-accordion]. This works near perfectly.
For the LightBox I have used LightBox 2 [
http://www.huddletogether.com/projects/lightbox2/]. This also works near perfectly.
However, when I try to combine both libraries into the same HTML document either one or the other will work but not both together. Depending on what order I put the JS links in my header I will have either one or the other scripts working. :confused:
I have very little experience with Javascript and cannot for the life of me work out where I've gone wrong. The LightBox website says this:
Code:
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 cannot find any onload attributes (maybe I'm looking in the wrong place?) or maybe that's not the issue at all.
I'll include my HTML below.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Jak</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<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>
<script type="text/javascript" src="js/mootools.svn.84.HACKED.js"></script>
<script language="javascript">
/////////////////////////////////////////////////////////
//
// START OF CHRIS ESLER FUNCTIONS
//
/////////////////////////////////////////////////////////
//
// QUICK TOGGLE FUNCTION
// objClass is the target flag className
//
function toggleDisplay(objClass){
$S('.'+objClass).each(function(el){
if (el.className.indexOf("Hide") != -1) el.className = el.className.replace("Hide","Show");
else el.className = el.className.replace("Show","Hide");
});
}
/////////////////////////////////////////////////////////
//
// SETUP KEYPRESS CONTROL VARS
//
var control = false;
var nextKey = false;
/////////////////////////////////////////////////////////
//
// DETERMINE WHICH KEYPRESS FUNCTIONS TO
// USE BY BROWSER TYPE
//
if (!/MSIE (5\.5|6|7\.)/.test(navigator.userAgent)) {
/////////////////////////////////////////////////////////
//
// MOZILLA-STYLE PROPAGATE DOWN EVENT ARCHITECTURE
//
// Much better than IE's. Actually captures key combo's
// and doesn't affect other key combo's
function detectspecialkeys(e){
var evtobj= e
var keyCode = e.which;
if (evtobj.ctrlKey){
toggleAccordion(keyCode);
}
}
document.onkeypress=detectspecialkeys;
}else{
//
/////////////////////////////////////////////////////////
//
// MICROSOFT-STYLE BUBBLE UP EVENT ARCHITECTURE
//
// retarded IE requires this funky capture system
// checks if control key pressed, then marks true
// then captures next key, then marks it true
// if control key true and next key true, then it does
// conditional statement
document.onkeydown = function () {
var keyCode=event.keyCode
// if its control key, mark it true
// and reset nextKey
if(keyCode == 17){
control = true;
nextKey = false;
// if control is true, then flag nextKey
}else{
nextKey = true;
}
// if both control and next key, then do our conditional statements
if (control && nextKey) {
if(keyCode == 49 || keyCode == 50 || keyCode == 51 || keyCode == 52 || keyCode == 53){
//alert ('control key pressed + '+keyCode);
toggleAccordion(keyCode);
}
// reset control vars
control = false;
nextKey = false;
// this is here last, so it nullifies IE beviours for these buttons
// otherwise we don't want it to nullify other bbuttons such as Control-P (for print), etc
if(keyCode == 49 || keyCode == 50 || keyCode == 51 || keyCode == 52 || keyCode == 53){
return false;
}
} else {
return true;
}
}
//
/////////////////////////////////////////////////////////
}
/////////////////////////////////////////////////////////
//
// SETUP ACCORDION ASSOCIATIVE ARRAY
// maps key presses to the accordion toggle
// 49 = number 1 key, 50 = number 2 key, and so on
//
var accArray = [0, 1, 2, 3, 4];
var keyArray = [49, 50, 51, 52, 53];
var newAccArray = accArray.associate(keyArray);
var currentArrow = 0;
/////////////////////////////////////////////////////////
//
// FUNCTION TO TOGGLE ACCORDION BASED ON KEYPRESS COMBO
// control key + number 1 key opens accordion[0]
//
function toggleAccordion(obj) {
// check if the 1-5 keys are pressed in conjunction with the control key
if(obj == 49 || obj == 50 || obj == 51 || obj == 52 || obj == 53) {
// get the associated accordion to the key pressed
var newAccObj = newAccArray[obj];
// grab our accordion object
var newArrow = $('arrow'+newAccArray[obj]);
// set the new current Arrow
currentArrow = newAccArray[obj];
// toggle the accordion
//myAccordion.showThisHideOpen(newAccArray[obj]);
myAccordion.showThisHideOpen(newAccArray[obj]);
}
}
/////////////////////////////////////////////////////////
//
// FUNCTIONS TO TOGGLE THE PILL IMAGE AND SET CURRENT TOGGLE
//
// change pill to ON
function toggleAccordionImageShow(el) {
// grab our pill image
var obj = el.getLast().getFirst();
// get our arrow id / accordion id
var newArrowId = obj.id.replace(/arrow/g,'');
// set current Arrow
currentArrow = newArrowId;
// set the new source
if(!obj.src.test('Lite')){
obj.setProperty('src',obj.src.replace(/.gif/g,'Lite.gif'));
}
}
// change pill to off
function toggleAccordionImageHide(el) {
// grab our pill image
var obj = el.getLast().getFirst();
// set the new source
obj.setProperty('src',obj.src.replace(/Lite/g,''));
}
/////////////////////////////////////////////////////////
//
// ACCORDION VARS SETUP
//
var myAccordion;
var myStretch;
var myStretcher;
/////////////////////////////////////////////////////////
//
// WINDOW ONLOAD STUFF - onDomReady from Moottools
//
Window.onDomReady(function() {
// get accordion elements
myStretch = document.getElementsByClassName('toggler');
myStretcher = document.getElementsByClassName('accordion');
// setup the accordion elements by clearing display styles
myStretcher.each(function(el){
el.style.display = '';
});
// Create the accordion
myAccordion = new fx.Accordion(myStretch, myStretcher,
{
/*fixedHeight: 125,*/
opacity : true,
openClose : true,
onActive : function(el){toggleAccordionImageShow(el)},
onBackground : function(el){toggleAccordionImageHide(el)},
itemsOpen : [0],
start : 'first-open'
});
/////////////////////////////////////////////////////////
//
// SETUP THE TOOLTIPS
//
// tooltip array
var as = [];
// grab all images that are supposed to have a tooltip
$S('img.hasTooltip').each(function(a){ if (a.getAttribute('title')) as.push(a); });
// create tooltip instance
new Tips(as, {maxOpacity: 0.9, maxTitleChars: 300});
});
//--->
</script>
</head>
<body>
<h1>Jak</h1>
<div>
<!--### START ACCORDION ###-->
<div class="wrap">
<div class="toggler" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';">
<div><img src="images/icons/arrow_right.png" id="arrow0" alt="" align="middle" class="hasTooltip" title="Toggle One :: Click this row or press Control+1 to open this section" /> <span>Hello, world!</span></div>
</div>
<div class="accordion">
<div>
<div align="center"><p>
Some Text
</P>
</div>
<div class="bottomMargin"> </div>
</div>
</div>
<div class="toggler" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';">
<div><img src="images/icons/arrow_right.png" id="arrow1" alt="" align="middle" class="hasTooltip" title="Toggle Two :: Click this row or press Control+2 to open this section" /> <span>Toggle Section Two</span> </div>
</div>
<div class="accordion">
<div>
<div>
More variable length content
<br />
<br />
<br />
<br />
<br />
<br />
<a href="images/butterfly.gif" rel="lightbox" title="Love me long time">Butterfly</a>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
END.
</div>
<div class="bottomMargin"> </div>
</div>
</div>
<div class="toggler" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';">
<div><img src="images/icons/arrow_right.png" id="arrow2" alt="" align="middle" class="hasTooltip" title="Toggle Two :: Click this row or press Control+3 to open this section" /> <span>Toggle Secion Three</span> </div>
</div>
<div class="accordion">
<div>
<div>
More variable length content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
END.
</div>
<div class="bottomMargin"> </div>
</div>
</div>
<div class="toggler" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';">
<div><img src="images/icons/arrow_right.png" id="arrow3" alt="" align="middle" class="hasTooltip" title="Toggle Four :: Click this row or press Control+4 to open this section" /> <span>Toggle Section Four</span> </div>
</div>
<div class="accordion" style="overflow: hidden; height: 0px; visibility: hidden; opacity: 0;">
<div>
<div>
This one is not in the open first array. More variable Content.
<br />
<br />
<br />
<br />
END.
</div>
<div class="bottomMargin"> </div>
</div>
</div>
<div class="toggler" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';">
<div><img src="images/icons/arrow_right.png" id="arrow4" alt="" align="middle" class="hasTooltip" title="Toggle Five :: Click this row or press Control+5 to open this section" /> <span>Toggle Section Five</span> </div>
</div>
<div class="accordion" style="overflow: hidden; height: 0px; visibility: hidden; opacity: 0;">
<div>
<div>
This one is not in the open first array. More variable Content.
<br />
<br />
<br />
<br />
END.
</div>
<div class="bottomMargin"> </div>
</div>
</div>
</div>
<br />
<h3>Footer
<br />
Oooters
</h3>
</body>
</html>
Please, if you have ANY idea where I'm going wrong I'm in desperate need of your help! If there are any other files (such as the JS libraries themselves, or the CSS) please let me know and I'll post them up pronto.
I'm working to a very tight deadline and I'll be waiting here, in front of my computer with baited breath for your answer!
Thank you in advance :)
Jak
Before you post, read our: 
[MooTools + LightBox2] Scripts conflicting, please help with resolve
