- Página Inicial
- Códigos CSS Prontos
- Galeria de Fotos Responsiva Flexbox
- Voltar
Galeria de Fotos Responsiva Flexbox

Neste artigo vamos criar uma Galeria de Fotos Responsiva Flexbox com a opção de ampliar ao clicar na foto.
Estrutura Base que vamos usar no projeto!
A estrutura base do nosso pequeno projeto para a Galeria de fotos vai ser composta por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css.
Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.
Nesta seção, projetaremos uma estrutura simples nas tags <figure>, <img>, <figcaption> e a tag <a> para inserirmos o link de destino.
Essa tag que usaremos para criar os Galeria de Fotos Responsiva Flexbox.
A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.
Nesta seção, usaremos algumas as tags HTML para montar a estrutura da nossa Galeria de Fotos.
Estrutura Código Html:
<div class="gallery"> <figure class="galleryItem"> <a href="#"><img src="uploads/foto1.jpg" alt="Londres"></a> <figcaption>Londres</figcaption> </figure> <figure class="galleryItem"> <a href="#"><img src="uploads/foto2.jpg" alt="Ponte Golden Gate"></a> <figcaption>Ponte Golden Gate</figcaption> </figure> <figure class="galleryItem"> <a href="#"><img src="uploads/foto3.jpg" alt="Nova York"></a> <figcaption>Nova York</figcaption> </figure> <figure class="galleryItem"> <a href="#"><img src="uploads/foto1.jpg" alt="Londres"></a> <figcaption>Londres</figcaption> </figure> <figure class="galleryItem"> <a href="#"><img src="uploads/foto3.jpg" alt="Nova York"></a> <figcaption>Nova York</figcaption> </figure> <figure class="galleryItem"> <a href="#"><img src="uploads/foto2.jpg" alt="Ponte Golden Gate"></a> <figcaption>Ponte Golden Gate</figcaption> </figure> </div><!--Gallery-->
Estrutura Código CSS
Para conseguirmos o efeito desejado na galeria, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.
Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.
Nesta seção, usaremos algumas propriedades CSS para estilizar a Galeria.
.gallery { display: flex; flex-flow: row wrap; align-content: flex-start; align-items: stretch; width: 100%; margin: auto; } .gallery .galleryItem { flex: 1 1 auto; margin: 0.3em; border: 1px solid #dddddd; border-radius: 6px; position: relative; width: 12em; height: 13em; overflow: hidden; } @media (min-width: 40em) { .gallery .galleryItem { width: 10em; height: 10em; } } @media (min-width: 80em) { .gallery .galleryItem { width: 17em; height: 17em; } } .gallery .galleryItem:hover img { transform: scale(1.2); } .gallery a { display: block; width: 100%; height: 100%; } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: 0.2s; } .gallery figcaption { background-color: rgba(0, 0, 0, 0.4); color: #fff; position: absolute; bottom: 0; left: 0; right: 0; padding: 1em; } .lightBoxOverlay { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); } .lightBoxOverlay .closeButton { position: absolute; top: 0.5em; right: 0.5em; color: #000; background-color: #fff; font-size: 1.5em; border-radius: 1em; padding: 0.44em 0.66em; height: 2em; width: 2em; cursor: pointer; transition: 0.2s; } .lightBoxOverlay .closeButton:hover { color: #fff; background-color: #000; } @media (min-width: 80em) { .lightBoxOverlay .closeButton { font-size: 2em; top: 1em; right: 1em; height: 2em; width: 2em; } } .lightBoxOverlay .container-galeria { margin: 0; display: flex; flex-flow: column nowrap; justify-content: center; align-content: center; align-items: center; width: 100%; height: 100%; padding: 1em; } @media (min-width: 40em) { .lightBoxOverlay .container-galeria { padding: 3em; } } @media (min-width: 80em) { .lightBoxOverlay .container-galeria { padding: 5em; } } .lightBoxOverlay img { max-width: 100%; max-height: 100%; } .lightBoxOverlay figcaption { margin-top: 1em; padding: 0.5em 1em; color: #fff; background: rgba(0, 0, 0, 0.8); border-radius: 5em; }
Vamos adicionar mais uma sessão para ampliar a imagem quando clicarmos na foto.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script type="text/javascript"> let galleryItems = document.querySelectorAll('.galleryItem'); const closeLightBox = (galleryItem, overlay) => { let originLinkTag = galleryItem.querySelector('a'); let image = overlay.querySelector('img'); let caption = overlay.querySelector('figcaption'); // move image and caption back to their original parents originLinkTag.appendChild(image); galleryItem.appendChild(caption); // remove the light box overlay document.body.removeChild(overlay) } const openLightBox = (galleryItem) => { // create the overlay to darken the page let lightBoxOverlay = document.createElement('div'); lightBoxOverlay.classList.add('lightBoxOverlay'); // create the close button let lightBoxClose = document.createElement('a'); lightBoxClose.innerText = 'X'; lightBoxClose.classList.add('closeButton'); lightBoxOverlay.appendChild(lightBoxClose); // create a container for the image let lightBoxImageContainer = document.createElement('figure'); lightBoxImageContainer.classList.add('container-galeria'); lightBoxOverlay.appendChild(lightBoxImageContainer); // take the already existing image and move it into the overlay container let image = galleryItem.querySelector('img'); lightBoxImageContainer.appendChild(image); // take the already existing figcaption and move it into the overlay container let caption = galleryItem.querySelector('figcaption'); lightBoxImageContainer.appendChild(caption); // add a closing routine to close button lightBoxClose.addEventListener('click', (e) => { e.preventDefault(); closeLightBox(galleryItem, lightBoxOverlay); }); // display the overlay document.body.appendChild(lightBoxOverlay); } galleryItems.forEach(el => { let linkTag = el.querySelector('a'); linkTag.addEventListener('click', (e) => { e.preventDefault(); openLightBox(el); }); }); </script>
Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Veja o Resultado baixo!
Galeria de Fotos Responsiva Flexbox
Baixar Código Veja Funcionando
Neste artigo, você aprendeu o passo a passo de como estilizar Galeria de Fotos Responsiva Flexbox
.
existem diversas formas de estilizar Galeria de Fotos com efeitos, cores, formas e animações diferentes.
Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.
faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.
Publicado por: Loop Nerd
374 Visualizações
Deixe um comentário