Galeria de Fotos Magnific Popup

Vamos fazer uma galeria de fotos Responsiva com css e ampliar as fotos com o Magnific Popup.

Magnific Popup é um script de caixa de luz e diálogo responsivo com foco no desempenho e proporcionando a melhor experiência para o usuário com qualquer dispositivo.

Vamos Adicionar o Html:

<div class="my-galeria">
                   
    <article class="foto">                      
      <div class="mascara"></div>
      <a href="uploads/1.jpg" title="veja" class="image-link"> <i class="icon icon-search"></i> </a>  
      <img src="uploads/1.jpg">
    </article>

    <article class="foto">                     
      <div class="mascara"></div>
      <a href="uploads/2.jpg" title="veja" class="image-link"> <i class="icon icon-search"></i> </a>  
      <img src="uploads/2.jpg">      
    </article>

    <article class="foto">                  
      <div class="mascara"></div>
      <a href="uploads/3.jpg" title="veja" class="image-link"> <i class="icon icon-search"></i> </a>  
      <img src="uploads/3.jpg">      
    </article>

    <article class="foto">                   
      <div class="mascara"></div>
      <a href="uploads/4.jpg" title="veja" class="image-link"> <i class="icon icon-search"></i> </a>  
      <img src="uploads/4.jpg">   
    </article>

    <article class="foto">   
       <div class="mascara"></div>
       <a href="uploads/5.jpg" title="veja" class="image-link"> <i class="icon icon-search"></i> </a>  
       <img src="uploads/5.jpg">     
    </article>

    <article class="foto">                   
       <div class="mascara"></div>
       <a href="uploads/6.jpg" title="veja" class="image-link"> <i class="icon icon-search"></i> </a>  
       <img src="uploads/6.jpg">     
    </article>

    <article class="foto">                
       <div class="mascara"></div>
       <a href="uploads/7.jpg" title="veja" class="image-link"> <i class="icon icon-search"></i> </a>  
       <img src="uploads/7.jpg">  
    </article>

    <article class="foto">                   
        <div class="mascara"></div>
        <a href="uploads/8.jpg" title="veja" class="image-link"> <i class="icon icon-search"></i> </a>  
        <img src="uploads/8.jpg">     
    </article>

</div>

Vamos Adicionar o Css para deixar nossa galeria com formato legal:

/*Inícia Galeria*/
.my-galeria { 

	width:100%; 
	float:left; 
	position:relative;
	overflow:hidden; 
}

.my-galeria .foto .mascara { 
    
    background: rgba(0,0,0,0);
    transition:0.5s;  
	position:absolute; 
	width:100%; 
	height:100%; 
	left:0; bottom:0; 
}

.my-galeria .foto .image-link { 
	
	display: block;
	position: absolute;
	left:35%;
	bottom:25px;
	text-align: center;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 1.8em;
	background: transparent;
	color: #ffffff;
	border-radius: 50px;
	text-decoration: none;
	transition: all .3s ease-in-out;
	opacity:0;
	margin-left: 20px;
	margin-bottom: 20px;  

}

.my-galeria .foto { 

	width:100%; 
	float:left; 
	display:block; 
	margin-bottom:5%;  
	border:1px #f0f0f0 solid; 
	position:relative; 
	overflow:hidden; 
	border-radius:6px; 
}

.foto:hover .image-link { bottom:20%; transition: all .3s ease-in-out; opacity:1; } 
.foto:hover .mascara    { background:rgba(0, 0, 0, 0.70); } 
/*Termina Galeria*/

/*Aqui Começa o Responsivo*/

/*768 dividido por 16 = 48em*/
@media (min-width:48em){

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

} 

/*1280PX BREAKPOINT*/
/*1280 dividido por 16 = 80em*/
@media (min-width:80em){

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

para finalizar vamos adicionar o script para ampliar as fotos

<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>

<script>
    $('.my-galeria').magnificPopup({ 
      type: 'image',
      delegate: 'a',
      
      gallery:{enabled:true},
      callbacks: {
        
        buildControls: function() {
         
          this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
        }
        
      }
    });
</script>

Baixar Código Veja Funcionando