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 :'( .
#conteudo
stopPropagation
ao clicar na div#foto-grande
para impedir que o evento seja disparado nos elementos pais. api.jquery.com/event.stoppropagation