Galeria de Fotos

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