(Resolvido) Transformando modal simples em galeria

ferrt · Fevereiro 16, 2015

Boa tarde a todos,

Fiz a criação de um modal simples para a exibição de um conteudo na minha pagina. No meu caso ao clickar em um link que é uma imagem miniatura é exibido a imagem grante dentro de uma modal. segue o exemplo:

--javascript

$(document).ready(function(){
    $("a[rel=modal]").click( function(ev){
        ev.preventDefault();
 
        var id = $(this).attr("href");
 
        var alturaTela = $(document).height();
        var larguraTela = $(window).width();
     
        // fundo preto
        $('#mascaramodal').css({'width':larguraTela,'height':alturaTela});
        $('#mascaramodal').fadeIn(1000); 
        $('#mascaramodal').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();   
    });
 
    $("#mascaramodal").click( function(){
        $(this).hide();
        $(".modalwindow").hide();
    });
 
    $('.modalfechar').click(function(ev){
        ev.preventDefault();
        $("#mascaramodal").hide();
        $(".modalwindow").hide();
    });
});

--CSS

.modalwindow{
    display:none;
    width:667px;
    height:500px;
    position:absolute;
    left:0;
    top:0;
    background:#FFF;
    z-index:9900;
    padding:10px;
    border-radius:10px;
}
 
#mascaramodal{
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
}
 
.modalfechar{display:block; text-align:right;}

.modalimage{
 width:90%;
 height:90%;
 display: block;
 margin-left: auto;
 margin-right: auto;
 padding-top: 5px;
 }

--html

<html>

<head>
<title>asdfasdg</title>

<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.min.js"> </script>
<script type="text/javascript" src="modal.js"></script>

</head>
<body>


<a href="#janela1" rel="modal"> <img src="miniatura1.jpg"/></a> 
<div class="modalwindow" id="janela1">
    <a href="#" class="modalfechar">X Fechar</a>
    <img src="original1.jpg" class="modalimage">
</div>

<a href="#janela2" rel="modal"> <img src="miniatura2.jpg"/></a> 
<div class="modalwindow" id="janela2">
    <a href="#" class="modalfechar">X Fechar</a>
    <img src="original2.jpg" class="modalimage">
</div>
 
  
<div id="mascaramodal"></div>


</body>
</html>

Aviso que não sou muito conhecedor de javascript porem com algum estudo consegui desenvolver essa solução temporaria. E minha duvida consiste na seguinte, como podem ver minha pagina exibe 2 imagens já que a pagina é aberta e cada uma direciona para a imagen maior até ai tudo simples porem eu gostaria de interligar esse modal ou saber se há como eu criar uma especie de galeria no modal aberto já que para imagen que eu faço isso por exemplo em uma serie de 10 miniaturas eu utilizo 10x o mesmo codigo.

ferrt · Fevereiro 19, 2015

Resolvido com plugin prettyphoto super simples e já vem na estrutura pronta pra sair desenvolvendo

Entrar

(Resolvido) Transformando modal simples em galeria

Pergunta

ferrt

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

ferrt

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades