View Full Version : Using two scripts together: lightbox and accordion menu

11-11-2008, 08:04 PM
Hello all,

I have worked tirelessly on numerous fixes that I have found throughout the web, but to no avail. I am getting desperate! I would REALLY appreciate any help any of you could give me on this.

I am using the latest version of lightbox in conjunction with an accordion style menu found on this site. I can not get the two to work together for some reason, and I feel like I have tried everything. I want to cry :(

The page I am working on can be found on http://www.inblakewetrust.com

I have tried a bunch of different fixes, but I am a Java noob, so none of them have worked. Thanks in advance!

My code at the top of the page, until the the first image in the gallery looks like this (please excuse the HUGE length of this, I want to be thorough):

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to my online portfolio.</title>
<link href="NEW_4.css" rel="stylesheet" type="text/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="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="ddaccordion.js"></script>

<script type="text/javascript">

headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing




<div id="header"><div align="center"><img src="images/site_header2.png" alt="Header" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="26,151,826,273" href="index.html" alt="Home" />

<table width="1191" border="0">
<td width="165" height="20" valign="top" align="right">

<div id="sidebarwrapper">
<div class="applemenu">
<div class="silverheader"><a href="index.html">Work</a></div>
<div class="submenu">
<span style="font-weight: bold;">Check out some art.</span><br /><br />
<a style="text-decoration: none; color: #666666; "href="index.html">Page 1</a><br />

<a style="text-decoration: none; color: #666666;"href="index2.html">Page 2</a><br />
<a style="text-decoration: none; color: #666666; "href="index3.html">Page 3</a><br />
<a style="text-decoration: none; color: #666666; "href="index4.html">Page 4</a><br />

<div class="silverheader"><a href="about.html">About</a></div>
<div class="submenu">
Come here to learn a little bit about my life, my work, and even a few of my idiosyncrasies.<br />

<div class="silverheader"><a href="contact.html">Contact</a></div>
<div class="submenu">
Come here to contact me - Just fill out the form and hit the submit button!<br />
<div class="silverheader"><a href="other.html">Other</a></div>
<div class="submenu">

Coming Soon! Please check back!<br />

<td width="850" rowspan="2">

<!--Start Main Content-->
<div class="Top"></div>

<div class="NavBack"><div align="center"><img src="images/activedot.jpg" width="25" height="25" /><a href="index2.html"><img src="images/inactivedot.jpg" border="0" /></a><a href="index3.html"><img src="images/inactivedot.jpg" width="25" height="25" border="0" /></a><a href="index4.html"><img src="images/inactivedot.jpg" alt="" width="25" height="25" border="0" /></a></div>


<div class="CellBack">

<div align="center"><a class="Blakeroll" rel="lightbox" href="images/Blake_Display.jpg" title="A type treatment testing the limits of Illustrator - 100% vector."></a>
<div class="Captions">Type Treatment II</div></div>

11-12-2008, 05:07 AM


11-12-2008, 05:52 AM
Hi John - thanks so much for your reply! It worked. I saw that fix in an earlier post, but I think I must have put the var $j = jQuery.noConflict() in the wrong spot.

I have one final question, then I promise to leave you alone ;-) Again, you are the best and thanks for the help.

My question is: is there any way to get the bottom header to stop shifting a bit when the other headers animate up? I mean, a way to keep it solidly in place?

:D :D :D :D