- Página Inicial
- Jquery
- Galeria de Fotos
- Voltar
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.632 Visualizações
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