Results 1 to 3 of 3

Thread: Using two scripts together: lightbox and accordion menu

  1. #1
    Join Date
    Nov 2008
    Thanked 0 Times in 0 Posts

    Default Using two scripts together: lightbox and accordion menu

    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

    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" "">
    <html xmlns="">
    <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>

  2. #2
    Join Date
    Mar 2005
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries

  3. #3
    Join Date
    Nov 2008
    Thanked 0 Times in 0 Posts


    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?



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts