2

Galera é o seguinte, Estou tentando fazer um ação só que não está saindo como eu espero.

*Código HTML *

<div id="apresentar">
    <img src="img2/fechar.png" class="fechar-foto">
    <div id="foto-grande" ><img src="" width="100%" height="100%"><p></p></div>
    </div>
<header>
    <div id="logo"><a href="index.html"><img src="img2/Logo.png" width="220" height="220"  class="logo zoom" alt="Página Inicial"></a></div>
    <div id="sociais">
        <a href="https://www.facebook.com/BlitzHaus" target="_blank"><img src="img/facebook.png" class="fade" alt="Facebook"></a>
        <a href="https://twitter.com/blitz_haus" target="_blank"><img src="img/twitter.png" class="fade" alt="Twitter"></a>
    </div>
</header>
<!--<nav class="fade-in um">-->
<nav>
    <ul id="menu-principal">
        <span class="ativo-desl"></span>
        <li><a href="index.html">HOME</a></li>
        <li><a href="programacao.html">PROGRAMAÇÃO</a></li>
        <li><a href="parceiros.html">PARCEIROS</a></li>
        <li><a href="galeria.html" class="ativo" id="selecionado">GALERIA</a></li>
        <li><a href="localizacao.html">LOCALIZAÇÃO</a></li>
        <li><a href="contato.html">CONTATO</a></li>
    </ul>
</nav>
<div class="clear"></div>
<div id="corpo">
    <section id="breadcrumb" class="fade-in um"><a href="index.html"><span>Home</span></a><span> > </span><span class="ativo">Galeria de Fotos</span></section>
    <div id="conteudo">
        <h1 id="titulo-principal" class="fade-in dois">GALERIA DE FOTOS</h1>
        <img src="img2/galeria/img01.jpg" class="img-galeria fade-in tres" alt="Foto1">
        <img src="img2/galeria/img02.jpg" class="img-galeria fade-in tres" alt="Foto2">
        <img src="img2/galeria/img03.jpg" class="img-galeria fade-in tres" alt="Foto3">
        <img src="img2/galeria/img04.jpg" class="img-galeria fade-in quatro" alt="Foto4">
        <img src="img2/galeria/img05.jpg" class="img-galeria fade-in quatro" alt="Foto5">
        <img src="img2/galeria/img06.jpg" class="img-galeria fade-in quatro" alt="Foto6">
        <img src="img2/galeria/img07.jpg" class="img-galeria fade-in cinco" alt="Foto7">
        <img src="img2/galeria/img08.jpg" class="img-galeria fade-in cinco" alt="Foto8">
        <img src="img2/galeria/img09.jpg" class="img-galeria fade-in cinco" alt="Foto9">
        <img src="img2/galeria/img10.jpg" class="img-galeria fade-in cinco" alt="Foto10">
        <img src="img2/galeria/img11.jpg" class="img-galeria fade-in cinco" alt="Foto11">
        <img src="img2/galeria/img12.jpg" class="img-galeria fade-in cinco" alt="Foto12">
        <img src="img2/galeria/img13.jpg" class="img-galeria fade-in cinco" alt="Foto13">
    </div>
</div>

Código JavaScript

$(function(){
$("#conteudo img").click(function(){
    var image = $(this).attr('src');
    var legenda = $(this).attr('alt');
    $("#apresentar").fadeIn(300);
    $("#foto-grande").fadeIn(300);
    var vlr = $(this).position().top / 2;
    $('#apresentar').css('top',vlr)
    $('html, body').animate({ scrollTop: vlr}, 400);
    $('#foto-grande img').attr('src', image); 
    $('#foto-grande p').text(legenda);
    $('#foto-grande').hover(function(){ $('#foto-grande p').fadeIn(300)} , function (){$('#foto-grande p').fadeOut(300)});
    document.body.style.overflow='hidden';
    $('#apresentar').click(function(){ $('#apresentar').fadeOut(300); document.body.style.overflow='';});
  });
});

function fechar(){
$('#apresentar').fadeOut(300);
document.body.style.overflow='';
}

Estou tentado fazer o seguinte, quando a pessoa clica na Div apresentar ele fecha a DIV, e quando a pessoa clica na div foto-grande não faz nada, estilo o facebook. Mas quando clico na div foto-grande, ele fecha por estar dentro da div apresentar.

Por favor me ajudem :'( .

8
  • Podes colocar o HTML todo? faltam elementos como #conteudo
    – Sergio
    Commented 14/05/2015 às 17:51
  • "quando a pessoa clica na div foto-grande não faz nada, estilo o facebook. Mas quando clico na div foto-grande, ele fecha por estar dentro da div apresentar.", não entendi. Commented 14/05/2015 às 17:52
  • 1
    Se entendi corretamente, basta você utilizar o método stopPropagation ao clicar na div #foto-grande para impedir que o evento seja disparado nos elementos pais. api.jquery.com/event.stoppropagation
    – Oeslei
    Commented 14/05/2015 às 17:54
  • Oslei, é mais ou menos isso, como eu aplico o stopPropagation? Sergio o código inteiro já está disponível., Commented 14/05/2015 às 17:57
  • Romario: o que o @Oeslei sugeriu é o que precisas (talvez ele junte resposta com isso). Para além disso dá uma olhada aqui para perceberes melhor qual o elemento que deves referir dentro do event handler: pt.stackoverflow.com/a/63399/129
    – Sergio
    Commented 14/05/2015 às 18:05

1 Resposta 1

2

A idéia é adicionar um handler para o evento onclick da div filha, mas retornar false neste evento. Isso fará com que o evento pare de ser processado, e deste modo a div pai não será escondida.

Fiz um Fiddle para exemplificar:

https://jsfiddle.net/4jucz895/

Nele, está obviamente simplificado, pois não adicionei imagens nem outros elementos dentro da div. Mas a idéia é esta, basta expandir para os elementos que você não desja que propague o evento onclick.

Para simplificar isso, você poderia inclusive criar uma classe click-prevent, por exemplo, e adicionar às div's que não devem permitir propagação do evento onclick, criando assim uma solução em JS genérica:

<div id="apresentar">
    <div class="click-prevent"></div>
</div>
<script>
    $(function () {
        $("#apresentar").click(function () {
            $(this).fadeOut(100);
        });
        $(".click-prevent").click(function () { return false; });
    });
</script>

Seleção de DIV

Vou responder a pergunta feita em comentário modificando o exemplo acima.

Imagina que você possua várias div's com id="apresentar", e que o comportamento de todas devem ser iguais, ocultando-as apenas quando o clique é realizado nelas.

Você poderia implementar este comportamento utilizando selectores do CSS, em especial o seletor >, que faz referência ao elemento filho imediato.

Imagine o HTML:

<div id="apresentar">
    <div id="filha">
        <div id="neta">
        </div>
    </div>
</div>
<div id="apresentar">
    <div id="filha">
        <div id="neta">
        </div>
    </div>
</div>

Utilizando o seletor #apresentar div, selecionaríamos todas as div's dentro da div#apresentar. Se utilizarmos #apresentar > div, selecionamos apenas as div's que são filhas (não "netas", etc) da div#apresentar.

Veja este outro Fiddle: https://jsfiddle.net/carwmhLc/2/

Repare que o CSS vermelho foi aplicado a todas as div, sejam elas filhas ou netas. Mas o CSS que aplica a cor branca, foi aplicado apenas a div filha da div#apresentar. Isto ocorre por causa do seletor >.

Repare também, que utilizamos este seletor com o jQuery. Clickando nas div's vermelhas, o alert é disparado uma vez por causa do evento onclick registrado na vermelha, e outra por causa do evento onclick registrado na branca. Adicionalmente, temos uma terceira vez que o evento é disparado por causa do comportamento do jQuery de não substituir callbacks, e sim acumulá-los e disparar todos registraos em um mesmo evento.

4
  • Po cara me salvou -, pode me explicar um pouco mais de como selecionar ações só para div pai, ou div filha? :D Obrigado cara :D Commented 14/05/2015 às 18:03
  • Vlw cara me ajudou basatante, agora consegui entender melhor como colocar um evento somente na div filho e na div pai. Commented 14/05/2015 às 18:18
  • @RomarioPires Adicionei detalhes sobre os seletores. Veja se te ajuda! Commented 14/05/2015 às 18:19
  • 1
    Vlw cara, vc me ajudou bastante, nem passava isso pela minha cabeça. Obrigado mesmo. Commented 14/05/2015 às 18:25

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 .