Carregando...

Galeria de Fotos

Postado: 11 de abril de 2021

Galeria de Fotos

Galeria de Fotos
Galeria de Fotos

Neste artigo passo a passo veja como fazer ums Galeria de Fotos com o plugin shadowbox-js, mesmo com pouco conhecimento na área do desenvolvimento.

Estrutura Código Html

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 galeria.

Adicionei uma Classe -> “box-galeria” para englobar o loop.

A segunda classe -> “box-foto” é a classe que ficara com o atributo img e href.

<div class="box-galeria">
                    
                <div class="box-foto">
                    <a href="uploads/foto1.jpg" rel="shadowbox[vocation]" title="Foto 1">
                        <img src="uploads/foto1.jpg">
                    </a>
                </div>

                <div class="box-foto">
                    <a href="uploads/foto2.jpg" rel="shadowbox[vocation]" title="Foto 2">
                        <img src="uploads/foto2.jpg">
                    </a>
                </div>

                <div class="box-foto">
                    <a href="uploads/foto3.jpg" rel="shadowbox[vocation]" title="Foto 3">
                        <img src="uploads/foto3.jpg">
                    </a>
                </div>

                <div class="box-foto">
                    <a href="uploads/foto4.jpg" rel="shadowbox[vocation]" title="Foto 4">
                        <img src="uploads/foto4.jpg">
                    </a>
                </div>

                <div class="box-foto">
                    <a href="uploads/foto5.jpg" rel="shadowbox[vocation]" title="Foto 5">
                        <img src="uploads/foto5.jpg">
                    </a>
                </div>

                <div class="box-foto">
                    <a href="uploads/foto6.jpg" rel="shadowbox[vocation]" title="Foto 6">
                        <img src="uploads/foto6.jpg">
                    </a>
                </div>

                <div class="box-foto">
                    <a href="uploads/foto7.jpg" rel="shadowbox[vocation]" title="Foto 7">
                        <img src="uploads/foto7.jpg">
                    </a>
                </div>

                <div class="box-foto">
                    <a href="uploads/foto8.jpg" rel="shadowbox[vocation]" title="Foto 8">
                        <img src="uploads/foto8.jpg">
                    </a>
                </div>

</div><!--Box Galeria-->

Estrutura Código Css

Para conseguirmos um design mais atraente, 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 nossa galeria de fotos.

.box-galeria{ 

	width:100%; 
	float:left; 

}
.box-foto{ 
	
	width:100%; 
	float:left; 
	margin-bottom:4%; 
	background:#fff; 
	box-shadow: 1px 0px 1.2px 0px #e3e3e3; 
	border-radius:3px; 
	padding:0.5em;
	transition:0.7s; 
}

.box-foto:hover { background-color:#333333; }

/*Responsivo*/

/*600 dividido por 16 = 37,5em*/
@media (min-width:37em){

    .box-foto{ width:23.5%; margin-right:2%; margin-bottom:2%; }
    .box-foto:nth-of-type(4n+0) { margin-right:0; }

} 

No Terceiro bloco vamos Adicionar o Script

adicione antes de fechar a tag -> </body>

<link rel="stylesheet" type="text/css" href="js/shadowbox/shadowbox.css" />
<script src="js/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
    
    $(function () {

        Shadowbox.init();

    });

</script>

Combinando as três seções acima com Html e Css e jquery  temos o seguinte Resultado!

Veja o Resultado baixo!

Galeria de Fotos – Veja o Resultado abaixo.

Baixar Código Veja Funcionando

Conclusão

Neste artigo, você aprendeu o passo a passo de como criar ums Galeria de Fotos, existem diversas formas de criar uma 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.

A imaginação é mais importante que o conhecimento. O conhecimento é limitado, enquanto a imaginação abraça o mundo inteiro, estimulando o progresso, dando à luz à evolução.– (Albert Einstein)

Publicado por: Loop Nerd

1.234 Visualizações

Uma resposta para “Galeria de Fotos”

  1. Paulo Kuba disse:

    Boa tarde.
    Muito bom esta galeria de fotos, simples porem funcional.
    Testei este codigo com imagens em webp, mas nao funfou.
    Na verdade funfou, mas a imagem fica com tamanho diferente dentro da galeria.

    Forte abraço.
    Paulo Kuba

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados