Já procurei à respeito em outros lugares mas não encontrei uma solução que funcionasse pra mim. O site é este:
http://pedrowebdesign.hol.es/damaso/
Esses 3 quadrados na parte superior, são locais para as fotos dos serviços prestados aos 3 últimos clientes (apresentadas em slideshow). Quando clico em qualquer um deles, o JavaScript efetua uma chamada AJAX a um script PHP que lista as imagens das pastas inseridas como atributo 'data' no link. Cada cliente têm uma pasta com imagens. Sim, o site é estático. Fiz um lightbox caseiro pra não usar plugins demais(já que estou usando jcycle). O problema é quando eu fecho o lightbox.
Seja lá quem for que estiver lendo, acesse o site por gentileza (ainda não otimizado pra smartphones e tablets) e dê um clique em uma das caixas azuis na parte superior. Funcionou, não? Agora dê o clique no quadradinho no canto superior direito. Poderá notar que tudo fecha como o esperado. Agora tente dar mais um clique em qualquer uma das caixas. Muito provável que não tenha funcionado. Não consegui identificar o erro até o momento. Alguém saberia me dizer o porque de isto estar acontecendo? Só funciona no primeiro clique. Depois, só recarregando a página :/
Eis o código:
<script type="text/javascript">
$(document).ready(function(){
$('.featured .client').on("click", function(e){
e.preventDefault();
$('body').addClass('active');
$('.modal').fadeIn();
$.ajax({
method: 'GET',
url: '/damaso-cod/gallery.php',
data: "main_dir=client_images&images_dir="+$(this).data('folder'),
success: function(data){
$('.modal').html(data);
$('.modal').cycle({
'next': '#next',
'prev': '#prev'
});
}
});
$('#close-btn').on("click", function(e){
e.preventDefault();
$('.modal').html('').cycle('reinit');
$('.filter').fadeOut();
$('body').removeClass('active');
});
});
});
</script>
destroy
remove todos os binds de eventos.$('#close-btn').on("click",
de dentro do primeiro$('.featured .client').on("click"