Ajax breaking JQuery

Ajax breaking JQuery

Hi Guys.

I'm new to Ajax and JQuery, so bear with me.

I have a site that uses Ajax to load the pages, with effects instead of reloading the whole page. This works great.

On the index page I have a JQuery MB(mask) Gallery. And I also have a gallery page separate using a different, full gallery. Both of these pages work fine when loaded directly. By this I mean previewing the page from dreamweaver, or going direct to the link on my web server.

However, if I use the navigation to go to the page, then the JQuery breaks and my images end up stacked on top of one another in a column - basically having no effects/styling.

My javascript files are linked like this:

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/js.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery.galleria.js"></script>
<script type="text/javascript" src="javascript/mbMaskedGallery.js"></script>
   <script type="text/javascript" src="javascript/jquery.metadata.js"></script>
script type="text/javascript">
$(document).ready(function(){ $('ul.gallery').galleria(); })
</script>

<script type="text/javascript">
   $(function(){
      $("#g1").mbMaskGallery({
         type:"normal",
         galleryMask:"images/border1.png",
         galleryUrl:"",
         galleryColor:"black",
         galleryLoader:"images/loader_black.gif",
         loaderOpacity:.3,
         loader:true,
         fadeTime: 500,
         slideTimer: 6000,
         changeOnClick:true,
         navId:"gallerynav" //nav1
      });
            });
   
      </script>


My navigation looks like this:

  <ul id="nav">
        <li><a href="Index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="gallery.html">Gallery</a></li>
    </ul>


You can see whats happening if you go to:

http://www.vracingleague.com/ste/Website%20Files

as you can see, clicking on home in the navigation breaks the index page, and clicking on gallery breaks that. But if you go direct to either page, it works. http://www.vracingleague.com/ste/Websit ... llery.html

The javascript for the ajax is this:


$(document).ready(function() {
                     
   var hash = window.location.hash.substr(1);
   var href = $('#nav 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)
      }                                 
   });

   $('#nav li a').click(function(){
                         
      var toLoad = $(this).attr('href')+' #content';
      $('#content').hide('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').show('normal',hideLoader());
      }
      function hideLoader() {
         $('#load').fadeOut('normal');
      }
      return false;
      
   });

});



I am so seriously confused about what to do now. I've tried everything I know!

Please help!!

Cheers,

Ste.