jquery lightbox plugin conflict?

[asith001]

I am currently trying to add a jquery lightbox plugin from http://leandrovieira.com/projects/jquery/lightbox/ into the portfolio section of my site but I cannot get it to work properly.. for some reason the jquery lightbox works when you open the portfolio.html page FIRST but once you click on any of the other links after that & try to go back to the portfolio page again, the lightbox no longer works

I will just attach some of the pages into a zip file so anyone that will be able to help can take a look at it... thanks a lot!

Attachment 3854

[jscheuer1]

1. Only one copy of jQuery is needed. Remove the highlighted:
   
   

       <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
       <script type="text/javascript" src="jquery-lightbox/js/jquery.js"></script>
       <script type="text/javascript" src="jquery-lightbox/js/jquery.lightbox-0.5.js"></script>
       <link rel="stylesheet" type="text/css" href="jquery-lightbox/css/jquery.lightbox-0.5.css" media="screen" />
       <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->

   
   
2. In the js.js file there are some syntax boo boos. These are not javascript errors, but they do something other than is intended. Because they have the () immediate execution suffix, they fire before the show()/load() events they are attached to are completed. Fix those (remove red). And add an initialization for lightbox as shown (green):
   
   

   $(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('slow',loadContent);
   		$('#load').remove();
   		$('#wrapper').append('<span id="load">LOADING...</span>');
   		$('#load').fadeIn('slow');
   		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
   		function loadContent() {
   			$('#content').load(toLoad,'',showNewContent())
   		}
   		function showNewContent() {
   			$('#gallery a').lightBox();
   			$('#content').show('slow',hideLoader());
   		}
   		function hideLoader() {
   			$('#load').fadeOut('slow');
   		}
   		return false;
   		
   	});
   
   });

3. You should also do step one on index.html, as well as to other pages that can load in the gallery to their respective id="content" divisions. Also on those pages (not on portfolio.html) you may remove this:
   
   

       <script type="text/javascript">
       $(function() {
           $('#gallery a').lightBox();
       });
       </script>

Note: Consider updating to jQuery version 1.5.2 - the version (1.2.3) being used is way out of date. 1.5.2 has greater capabilities should you ever need them and is more efficient. It is compatible with the other existing scripts.