Vamos lá.. esse post é mais ou menos uma mescla de outros 3 posts meus.

Nesse script eu vou, carregar conteudo com ajax(usando jQuery), vou deixar o lightbox funcionando, e também fazer com que a URL mude.

Para que o visitante possa dar F5, e o conteudo “continuar lá”(sem voltar para a index). E também, para que ele consiga sei lá, enviar para um amigo, uma página interna do seu site.

Bom, o código javascript ficou assim:

$(document).ready(function(){
		var content = $('#content');

		//pre carregando o gif
		loading = new Image(); loading.src = 'ico-loading.gif';
		
		
		
		$('#menu a').click(function( e ){
			var arq = pega_arq( $( this ).attr('href') );
			abre( arq, content );
		});
		
		
		/* iniciando com a home */
		abre( pega_arq( document.location.href ), content ); 
	});
	function abre( href, content ){
		content.html( '<img src="ico-loading.gif" />' );
		

		$.ajax({
			url: href,
			success: function( response ){		
				content.delay(1000).hide().html( response ).fadeIn();
				
				init_plugins( href );
			}
		});
	}
	function pega_arq( url ){
		var file = url.split('#');
		return ( file[1] ) ? file[1]+'.html' : 'home.html';
	}
	function init_plugins( href )
	{
		if( href=='lightbox.html' )
		{
			$('#gallery a').click(function( e ){
				e.preventDefault();
			})
			$('#gallery').lightBox();
		}
	}

Usando lightbox em página que foi carregada com ajax

É isso. Comentem! Sério.. se vc usar, deixa um comentário aqui..