0

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>
3
  • Nãp sei se vou conseguir ajudar, mas... Era para estar destruindo o ciclo mesmo? Nunca mexi com Cycle, mas, de acordo com a documentação, chamar destroy remove todos os binds de eventos. Commented 14/08/2014 às 16:10
  • 1
    @RuiPimentel, como eu limpo todo o HTML da div quando fecho o lightbox, não tem porque deixar o cycle em funcionamento. A intenção é iniciar a cada clique e encerrar cada vex que o lightbox for fechado. Commented 14/08/2014 às 16:18
  • Retire $('#close-btn').on("click", de dentro do primeiro $('.featured .client').on("click" Commented 14/08/2014 às 16:39

4 Respostas 4

1

Consegui fazer funcionar no fiddle: http://jsfiddle.net/jaderw/1f4efku7/

jquery: (marquei abaixo o que foi modificado)

$('.featured .client').on("click", function (e) {
    e.preventDefault();
    $('body').addClass('active');
    $('.filter, .modal').fadeIn(); // MODIFICADO

    $.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'
                });
            }
        });
});

// on click abaixo foi retirado de dentro do on click de cima...

$('#close-btn').on("click", function (e) {
    e.preventDefault();
    $('.filter, .modal').fadeOut(400, function () {
        $('.modal').cycle('destroy').html('');
        $('body').removeClass('active');
    }); // MODIFICADO
});
1
  • Se não me engano o e.preventDefault(); não deixa que você repita uma ação.
    – Otto
    Commented 26/08/2014 às 18:28
0

Bom, na hora que voce fecha o lightbox voce simplesmente ta colocando um style="display:none" na div do dito cujo, então nunca mais ele aparecerá, o legal seria que toda vez que voce aciona o botão, ele adicione um style="display:display;" na classe da div

1
  • Na verdade estou usando fadeIn e fadeOut pra isso... Commented 14/08/2014 às 16:23
0

Pedro Vinícius,

Tente usar jQuery 1.7.2, com .live

 <script type="text/javascript">
 $(document).ready(function(){
     $('.featured .client').live("click", function(e){
         e.preventDefault();
         $('body').addClass('active');
         $('.modal').show();

         $.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').live("click", function(e){
        e.preventDefault();
        $('.modal').html('').cycle('reinit');
        //$('.filter').fadeOut();  nao compreendi
        $('.modal').hide();
        $('body').removeClass('active');
    });
});
4
  • .live está deprecated e a indicação da versão do jquery para um release antigo não ajuda. Pode-se usar .on com a mesma funcionalidade do .live Commented 14/08/2014 às 17:08
  • O fato de estar "deprecated" nao o torna ruim. Eu o uso constantemente sem nem um tipo de problema. Commented 14/08/2014 às 17:14
  • 1
    um comando deprecated tem vida curta, em releases futuros ele certamente será removido, se continuar usando ele em projetos novos, somente irá aumentar a quantidade de código-fonte que deverá ser refatorado quando isto acontecer Commented 14/08/2014 às 17:34
  • "deprecated" já é um alerta para refatoração :) Commented 10/12/2014 às 14:52
0

Tente usar o Firebug, do firefox, provavelmente só funciona uma vez pois está levantando uma exceção que provavelmente pode ser no PHP.

1
  • Já fiz debug no PHP... Está tudo certo. Commented 14/08/2014 às 17:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .