jQuery Lightbox/Colorbox/Fancybox breaks jQuery image cross-fade. HALP!

jQuery Lightbox/Colorbox/Fancybox breaks jQuery image cross-fade. HALP!

O, hallo.  :|  Sorry to bother...  I hope I'm posting this in the right place.  There were a few areas that looked like likely places to put this, but I figured this was the most relevant.

I've tried all three of the above "boxes" and have the same issue with each.  I currently have a page in which I'm using a jQuery image cross-fade slideshow.  That works just fine on its own.  On that page, I also have a menu along the top.  I want the links to pop up in a box.  I suppose you can call it inline content or an iframe?  I don't really know which is more accurate.

In any case, as soon as I add the pop-up box code, the cross-fade function breaks.  Instead of cycling through a series of images, they end up arrayed all together vertically, one after another.  It's pretty poopy, but I was hoping someone could help me, please.  Here is the markup I have right now, in which only the cross-fading slideshow is implemented:

  1. <html>

    <head>
    <link href='http://fonts.googleapis.com/css?family=Amarante' rel='stylesheet' type='text/css'>
    <title>Testing...</title>
    <style type="text/css">
    .slideshow { width: 578px; margin: auto }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('.slideshow').cycle({
    fx: 'fade'
    });
    });
    </script>
    <style type="text/css">
    #menu{
    margin:0;
    padding:0;
    }
    #menu ul{
    padding:0;
    margin:0;
    z-index: 5;
    text-align: center;
    }
    #menu li{
    position: relative;
    float: left;
    list-style: none;
    margin:0;
    padding:0;
    z-index: 5;
    }
    #menu li a{
    width: 150px;
    height: 30px;
    display: block;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
    color: #000000;
    text-shadow:
    -1px -1px 1px #ffe7a3,
    1px -1px 1px #ffe7a3,
    -1px 1px 1px #ffe7a3,
    1px 1px 1px #ffe7a3;
    -webkit-text-fill-color: #ffe7a3;
    -webkit-text-stroke: 1px #ffe7a3;
    }
    #menu li a:hover{
    color: #ffe7a3;
    text-shadow:
    -1px -1px 1px #000000,
    1px -1px 1px #000000,
    -1px 1px 1px #000000,
    1px 1px 1px #000000;
    -webkit-text-fill-color: #ffe7a3;
    -webkit-text-stroke: 1px #000000;
    }
    #menu ul ul{
    position: absolute;
    top: 30px;
    width: 100px;
    visibility: hidden;
    }
    #menu ul li:hover ul{
    visibility: visible;
    }
    </style>
    <style type="text/css">
    .center {
    width: 578px ;
    margin-left: auto ;
    margin-right: auto ;
    }
    </style>
    </head>

    <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" bgcolor="#000000">
    <font face="Amarante, sans-serif" color="#99CCFF">
    <table width="auto" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td>
    <div id="menu">
    <ul>
    <li><a class='iframe' href="index.htm">NEWS</a>
    </li>
    <li><a class='iframe' href="#nogo">ABOUT</a>
    <ul>
    <li><a class='iframe' href="Mission.htm">Mission</a></li>
    <li><a class='iframe' href="Story.htm">Story</a></li>
    <li><a class='iframe' href="Characters.htm">Characters</a></li>
    <li><a class='iframe' href="FAQs.htm">FAQs</a></li>
    <li><a class='iframe' href="Credits.htm">Credits</a></li>
    </ul>
    </li>
    <li><a class='iframe' href="#nogo">MEDIA</a>
    <ul>
    <li><a class='iframe' href="Gallery.htm">Gallery</a></li>
    <li><a class='iframe' href="Videos.htm">Videos</a></li>
    </ul>
    </li>
    <li><a class='iframe' href="#nogo">CONTRIBUTE</a>
    <ul>
    <li><a class='iframe' href="Donations.htm">Donations</a></li>
    <li><a class='iframe' href="Casting.htm">Casting</a></li>
    <li><a class='iframe' href="Crewing.htm">Crewing</a></li>
    </ul>
    </li>
    <li><a class='iframe' href="Contact.htm">CONTACT</a>
    </li>
    </ul>
    </div>
    </td>
    </tr>
    </table>
    <div class="center" style="position:relative">
    <img src="CQlogo.png" style="position:absolute; top:0px; left:0px; z-index:4"/>
    </div>
    <div class="slideshow center" style="position:relative; top:50px; z-index:0">
    <img src="CQimg1.jpg" />
    <img src="CQimg2.jpg" />
    <img src="CQimg3.jpg" />
    <img src="CQimg4.jpg" />
    <img src="CQimg5.jpg" />
    <img src="CQimg6.jpg" />
    <img src="CQimg7.jpg" />
    <img src="CQimg8.jpg" />
    <img src="CQimg9.jpg" />
    <img src="CQimg10.jpg" />
    <img src="CQimg11.jpg" />
    <img src="CQimg12.jpg" />
    <img src="CQimg13.jpg" />
    <img src="CQimg14.jpg" />
    <img src="CQimg15.jpg" />
    <img src="CQimg16.jpg" />
    <img src="CQimg17.jpg" />
    <img src="CQimg18.jpg" />
    <img src="CQimg19.jpg" />
    <img src="CQimg20.jpg" />
    <img src="CQimg21.jpg" />
    <img src="CQimg22.jpg" />
    <img src="CQimg23.jpg" />
    <img src="CQimg24.jpg" />
    <img src="CQimg25.jpg" />
    <img src="CQimg26.jpg" />
    <img src="CQimg27.jpg" />
    <img src="CQimg28.jpg" />
    <img src="CQimg29.jpg" />
    <img src="CQimg30.jpg" />
    <img src="CQimg31.jpg" />
    <img src="CQimg32.jpg" />
    <img src="CQimg33.jpg" />
    <img src="CQimg34.jpg" />
    <img src="CQimg35.jpg" />
    <img src="CQimg36.jpg" />
    <img src="CQimg37.jpg" />
    </div>
    </body>

    </html>




































































































































































You can see that I have all of the JavaScript, CSS and HTML bunched into one file.  It's actually easier for me to have it all in one place until I have things functioning properly and then I can complicate things by cleaning it up.  ;P

Anyway, once I add in the Lightbox/Colorbox/Fancybox script, that's when the trouble starts.  Specifically, it's the line that calls "jquery-1.9.1.min.js" that seems to do it.  I put the part that goes into the head section right before the </head> closing tag and the rest that goes into the body into the pertinent places.  I can get it to work, to a point, if I don't call that one file.  Then the box appears as a horizontal rectangle along the top of the viewport.  Once I add in the reference to "jquery-1.9.1.min.js" (or any others; I've tried), that's when the whole layout goes completely awry.

Sorry to be so long-winded, but I hope I've explained everything clearly enough.  Is there anyone who can help me get around this problem?  Thanks in advance.