Help! I'm stuck with AJAX loaded content and SLIMBOX2!! thx

Help! I'm stuck with AJAX loaded content and SLIMBOX2!! thx

I've been trying to figure this out for some time now and it's starting to mess with my sanity.

I'm dyanmically loading content into a div via AJAX using this code:
$(document).ready(function() {
   
   $('.content_box').hide();
   $('.sf-menuUP a').click(function(){
   $('.content_box').fadeIn('slow');
   });
                     
   var hash = window.location.hash.substr(1);
   var href = $('.sf-menuUP li a').each(function(){
      var href = $(this).attr('href');
      if(hash==href.substr(0,href.length-5)){
         var toLoad = hash+'.html #content';
         $('#content').load(toLoad)
      }                                 
   });

   $('.sf-menuUP li a').click(function(){
                         
      var toLoad = $(this).attr('href')+' #content';
      $('#content').fadeOut('fast',loadContent);
      $('#load').remove();
      $('#wrapper').append('<span id="load">LOADING...</span>');
      $('#load').fadeIn('normal');
      window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
      function loadContent() {
         $('#content').load(toLoad,'',showNewContent())
      }
      function showNewContent() {
         $('#content').fadeIn('normal',hideLoader());
      }
      function hideLoader() {
         $('#load').fadeOut('normal');
      }
      return false;
   });
   // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
   jQuery(function($) {
      $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
         return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
      });
   });
});


My problem is SLIMBOX 2 isn't reinitializing with the new content so the images just load normally.

The page I'm working on is http://xxladvertising.com/core2/#portfolio/university_toronto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
   <title>Core Metal</title>
   <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="js/supersized.1.0.js"></script>
   <script type="text/javascript">
   
   $(function(){
      $.fn.supersized.options = { 
         startwidth: 1280, 
         startheight: 841,
         slideshow: 1,
         slideinterval: 12000
      };
        $('#supersize').supersized();
    });

   </script><!---end sueprsize -->   
   <script type="text/javascript" src="js/hoverIntent.js"></script>

   <script type="text/javascript" src="js/superfish.js"></script>
   <script type="text/javascript">

   // initialise plugins
   jQuery(function(){
      jQuery('ul.sf-menuUP').superfish();
   });

   </script> <!---end superfish -->
   <script type="text/javascript" src="js/content.js"></script>
   <script type="text/javascript" src="js/slimbox2.js"></script>

   <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen">
   <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">

   
   <!--[if IE 7]>
      <link href="css/ie7.css" rel="stylesheet" type="text/css">
   <![endif]-->
      
   <link rel="stylesheet" type="text/css" href="css/supersize.css" media="screen">
   <link rel="stylesheet" type="text/css" href="css/menu.css" media="screen">
   <link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />

</head>

<body>

<div id="supersize">
   <img src="img/1.jpg" class="activeslide"/>
   <img src="img/2.jpg"/>

   <img src="img/3.jpg"/>
</div>

<div class="nav">
   <ul class="sf-menuUP">
      <li>
         ABOUT <img src="img/bullet.png" class="bullet">
         <ul>
            <li>
               <a href="about/company.html">COMPANY</a>

            </li>
            <li>
               <a href="about/environment.html">ENVIRONMENT</a>
            </li>
            <li>
               <a href="about/people.html">PEOPLE</a>
            </li>
            <li>

               <a href="about/careers.html">CAREERS</a>
            </li>
         </ul>         
      </li>
      <li>
         PROCESS <img src="img/bullet.png" class="bullet">
         <ul>
            <li>

               <a href="process/creation.html">CREATION</a>
            </li>
            <li>
               <a href="process/fabrication.html">FABRICATION</a>
            </li>
            <li>
               <a href="process/management.html">MANAGEMENT</a>

            </li>
            <li>
               <a href="process/drawings.html">DRAWINGS</a>
            </li>
            <li>
               <a href="process/estimate.html">ESTIMATE</a>
            </li>
         </ul>

      </li>
      <li>
         PORTFOLIO <img src="img/bullet.png" class="bullet">
         <ul>
            <li>
               <a href="portfolio/university_toronto.html">UNIVERSITY OF TORONTO</a>
            </li>
            <li>

               <a href="portfolio/bell_mobility.html">BELL MOBILITY MISSISSAUGA</a>
            </li>
            <li>
               <a href="portfolio/sheraton.html">SHERATON HOTEL TORONTO</a>
            </li>
            <li>
               <a href="portfolio/pearson_airport.html">PEARSON TORONTO AIRPORT</a>

            </li>
            <li>
               <a href="portfolio/la_meridien.html">HOTEL LA MERIDIEN</a>
            </li>
            <li>
               <a href="portfolio/sofitel.html">SOFITEL HOTEL</a>
            </li>
            <li>

               <a href="portfolio/mgm_grand.html">MGM GRAND</a>
            </li>
            <li>
               <a href="portfolio/la_meridien.html">HOTEL LA MERIDIEN</a>
            </li>
         </ul>
      </li>
   
      <li>

         <a href="contact.html">CONTACT</a>
      </li>      
   </ul>
   <div class="logo">
      <img src="img/logo.png">
      <span>ARCHITECTURAL</span>
    </div>
</div> <!-- end nav menu -->


<div class="content_box">
   <div id="content"></div>
</div>

</body>
</html>


ANY help would be GREATLY appreciated! thanks.