Galeria de Fotos
Postado: 11 de abril de 2021
Nesse artigo vamos ver como montar uma galeria de fotos com o plugin shadowbox-js
Primeiro Bloco vamos adicionar o Html
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-->
No Segundo Bloco vamos Adicionar o Css
.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>
Baixar Código Veja Funcionando
Publicado por: loopnerd
658 Visualizações
Deixe um comentário