Álbum modal em HTML5 CSS3. Vídeo 99

Na videoaula anterior nós vimos como funciona uma imagem modal, o que é um modal e como fazer para que uma imagem abra em um modal.

Agora nós criamos um álbum de fotos modal, isso mesmo, um álbum de imagens que abra dentro de um modal.

Alterei minimamente o código fonte anterior, então, antes de darmos continuidade nesta "aula"crie um documento HTML e outro CSS, lembrando, estes dois documentos podem ter qualquer nome, mas não se esqueça de linkar seu documento CSS no documento HTML.

Código fonte HTML (inicial):

Código fonte CSS (inicial):

.dialogo {
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     background: rgba(255,193,193,0.5);
     z-index: 11111111;
     opacity: 0;
     pointer-events: none;
     overflow: scroll;
}

.dialogo:target {
     opacity: 1;
     pointer-events: auto;
}

.imgfake {
     position: relative;
     margin-left: 25%;
     margin-top: 5%;
}

.imagemmodal {
     display: block;
     float: center;
     width: 50%;
}
.fechar {
     color: #ffffff;
     position: absolute;
     text-align: left;
     width: 24px;
     text-decoration: none;
     font-weight: bold;
}

Antes de assistir ao vídeo tenha em mente que para fazer seu álbum modal você tem que saber o número de imagens que terão em seu álbum (isso utilizando somente "HTML5 e CSS3").

Mas o que nós vemos no vídeo?

A primeira coisa que fazemos é inserir todas as imagens no HTML, essa parte eu dei Ctrl+C / Ctrl+V mesmo pois o posicionamento das imagens no seu site depende do seu layout (depende de você), nesse tutorial o foco é fazer um álbum modal.

Assista ao vídeo:

Por favor, não saia copiando e colocando o código fonte do álbum, o foco do Em Busca do Código é entender como se faz, entender como se cria um modal ("aula" anterior), entender o passo a passo do álbum dentro de um modal.

A partir do momento que você entende como funciona um modal, você faz qualquer tipo de modal, inclusive adicionando outras linguagens.

Código fonte HTML (final):

<!DOCTYPE html>

<html>
     <head>
          <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
          <title>Imagem modal</title>
          <link rel="stylesheet" href="modal.css">
     </head>
     <body>
          <a href="#Bookmark01">
               <figure>
                    <img src="img01.png" width="12%"></img>
                    <figcaption>imagem</figcaption>
               </figure>
          </a>
          <a href="#Bookmark02">
               <figure>
                    <img src="img02.png" width="12%"></img>
                    <figcaption>imagem</figcaption>
               </figure>
          </a>
          <a href="#Bookmark03">
               <figure>
                    <img src="img03.png" width="12%"></img>
                    <figcaption>imagem</figcaption>
               </figure>
          </a>
          <div id="Bookmark01" class="dialogo">
               <div class="imgfake">
                    <a class="fechar" title="Fechar" href="#qualquernome">X</a>
                    <img class="imagemmodal" src="img01.png"></img>
                    <ul class="listafixa">
                         <li><a href="#Bookmark01"><img src="img01.png"></img></a></li>
                         <li><a href="#Bookmark02"><img src="img02.png"></img></a></li>
                         <li><a href="#Bookmark03"><img src="img03.png"></img></a></li>
                    </ul>
               </div>
          </div>
          <div id="Bookmark02" class="dialogo">
               <div class="imgfake">
                    <a class="fechar" title="Fechar" href="#qualquernome">X</a>
                    <img class="imagemmodal" src="img02.png"></img>
               </div>
                    <ul class="listafixa">
                         <li><a href="#Bookmark01"><img src="img01.png"></img></a></li>
                         <li><a href="#Bookmark02"><img src="img02.png"></img></a></li>
                         <li><a href="#Bookmark03"><img src="img03.png"></img></a></li>
                    </ul>
          </div>
          <div id="Bookmark03" class="dialogo">
               <div class="imgfake">
                    <a class="fechar" title="Fechar" href="#qualquernome">X</a>
                    <img class="imagemmodal" src="img03.png"></img>
               </div>
                    <ul class="listafixa">
                         <li><a href="#Bookmark01"><img src="img01.png"></img></a></li>
                         <li><a href="#Bookmark02"><img src="img02.png"></img></a></li>
                         <li><a href="#Bookmark03"><img src="img03.png"></img></a></li>
                    </ul>
          </div>
     </body>
</html>

Código fonte CSS (final):

.dialogo {
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     background: rgba(255,193,193,0.5);
     z-index: 11111111;
     opacity: 0;
     pointer-events: none;
     overflow: scroll;
}

.dialogo:target {
     opacity: 1;
     pointer-events: auto;
}

.imgfake {
     position: relative;
     margin-left: 25%;
     margin-top: 5%;
}

.imagemmodal {
     display: block;
     float: center;
     width: 50%;
}

.fechar {
     color: #ffffff;
     position: absolute;
     text-align: left;
     width: 24px;
     text-decoration: none;
     font-weight: bold;
}
.listafixa {
     position: fixed;
     text-align: left;
     top: 0px;
     right: 0px;
     list-style-type: none;
}
.listafixa img {
     width: 100px
}
li {
          opacity: 0.5;
}
li:hover {
     opacity: 1;
}

Caso não entenda ou conheça algo que está no código fonte busque por esse termo logo a seguir (campo de pesquisa), este é o nosso código fonte número 99, existem mais 98 códigos fontes de HTML e CSS neste site, esses códigos fontes são nossos. Espero que este link tenha sido útil.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.