Tenho uma div
que recebe dados do banco MySQL e lista as imagens. Coloquei um lightbox para ficar mais interessante a visualização das imagens e um efeito de fade-in para que sempre que troque a categoria do menu*refresh* fosse dado apenas na div
e não na página inteira. Só que quando eu tenho abrir o lightbox em alguma outra categoria que não seja a padrão, que exibe todos eles, não abre.
<!-- Script do Fade In -->
<script>
$(document).ready(function(){
var content = $('#modal');
//pre carregando o gif
loading = new Image(); loading.src = 'images/loading_ajax.gif';
$('#menu-portifolio a').live('click', function( e ){
e.preventDefault();
content.html( '<img src="images/loading_ajax.gif" />' );
var href = $( this ).attr('href');
$.ajax({
url: href,
success: function( response ){
//forçando o parser
var data = $( '<div>'+response+'</div>' ).find('#modal').html();
//apenas atrasando a troca, para mostrarmos o loading
window.setTimeout( function(){
content.fadeOut('slow', function(){
content.html( data ).fadeIn();
});
}, 500 );
}
});
});
});
</script>
<!-- Script do Lightbox -->
<script>
$(document).ready(function(){
$("a[rel=modal]").click( function(ev){
ev.preventDefault();
var id = $(this).attr("href");
var alturaTela = $(document).height();
var larguraTela = $(window).width();
//colocando o fundo preto
$('#mascara').css({'width':larguraTela,'height':alturaTela});
$('#mascara').fadeIn(50);
$('#mascara').fadeTo("slow",0.8);
var left = ($(window).width() /2) - ( $(id).width() / 2 );
var top = ($(window).height() / 2) - ( $(id).height() / 2 );
$(id).css({'top':top,'left':left});
$(id).show();
});
$("#mascara").click( function(){
$(this).hide();
$(".window").hide();
});
$('.fechar').click(function(ev){
ev.preventDefault();
$("#mascara").hide();
$(".window").hide();
});
});
</script>
Os resultados da consulta SQL, no caso imagens estão sendo exibidas por categorias.
Categoria 01
mostra apenas imagens que forem desta categoria.
Ao carregar a página ele automaticamente mostra as imagens que estejam na categoria todos.
Aí o lightbox funciona normal, porém ao mudar para a Categotia 01
por exemplo o lightbox já não funciona mais, em nenhuma outra categoria.
Tem algum outro script de efeito fade-in pra me indicar, já que ainda sou leigo no assunto de jQuery e AJAX.