-1

Tengo este código de una galería responsive que no hace nada, pero me gustaría que al clicar en cada imagen, esta se viese sola y grande sobre un fondo oscurecido tipo lightbox (creo que se llama así) y también responsive. mi galeria es esta link online

Aquí hay un ejemplo https://mobirise.com/extensions/agencym4/sliders.html

Gracias anticipadamente

<!DOCTYPE html>
<html>
<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
    background-color: #2c2b2b;
    color: white;
}

.header {
    text-align: center;
    padding: 32px;
}

.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}
</style>
<body>

<!-- Header -->
<div class="header">
  <h1>Trabajos realizados</h1>
  
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="images/0001book.jpg" style="width:100%">
    <img src="images/0002book.jpg" style="width:100%">
    <img src="images/0003book.jpg" style="width:100%">
    <img src="images/0004book.jpg" style="width:100%">
    <img src="images/0005book.jpg" style="width:100%">
    <img src="images/0006book.jpg" style="width:100%">
    <img src="images/0007book.jpg" style="width:100%">
    <img src="images/0008book.jpg" style="width:100%">
    <img src="images/0009book.jpg" style="width:100%">
    <img src="images/0010book.jpg" style="width:100%">
    <img src="images/0011book.jpg" style="width:100%">
    <img src="images/0012book.jpg" style="width:100%">
    <img src="images/0013book.jpg" style="width:100%">
    <img src="images/0014book.jpg" style="width:100%">
    <img src="images/0018fantasia.jpg" style="width:100%">
    
  </div>
  <div class="column">
    <img src="images/0001fantasia.jpg" style="width:100%">
    <img src="images/0002fantasia.jpg" style="width:100%">
    <img src="images/0003fantasia.jpg" style="width:100%">
    <img src="images/0004fantasia.jpg" style="width:100%">
    <img src="images/0005fantasia.jpg" style="width:100%">
    <img src="images/0006fantasia.jpg" style="width:100%">
    <img src="images/0007fantasia.jpg" style="width:100%">
    <img src="images/0008fantasia.jpg" style="width:100%">
    <img src="images/0009fantasia.jpg" style="width:100%">
    <img src="images/0010fantasia.jpg" style="width:100%">
    <img src="images/0011fantasia.jpg" style="width:100%">
    <img src="images/0012fantasia.jpg" style="width:100%">
    <img src="images/0013fantasia.jpg" style="width:100%">
    <img src="images/0014fantasia.jpg" style="width:100%">
    <img src="images/0019fantasia.jpg" style="width:100%">

  </div>  
  <div class="column">
    <img src="images/0001moda.jpg" style="width:100%">
    <img src="images/0002moda.jpg" style="width:100%">
    <img src="images/0003moda.jpg" style="width:100%">
    <img src="images/0004moda.jpg" style="width:100%">
    <img src="images/0005moda.jpg" style="width:100%">
    <img src="images/0006moda.jpg" style="width:100%">
    <img src="images/0007moda.jpg" style="width:100%">
    <img src="images/0008moda.jpg" style="width:100%">
    <img src="images/0009moda.jpg" style="width:100%">
    <img src="images/0015fantasia.jpg" style="width:100%">
    <img src="images/0016fantasia.jpg" style="width:100%">
    <img src="images/0017fantasia.jpg" style="width:100%">
    

  </div>
  <div class="column">
    <img src="images/0001loreal.jpg" style="width:100%">
    <img src="images/0002loreal.jpg" style="width:100%">
    <img src="images/0003loreal.jpg" style="width:100%">
    <img src="images/0015book.jpg" style="width:100%">
    <img src="images/0016book.jpg" style="width:100%">
    <img src="images/0017book.jpg" style="width:100%">
    <img src="images/0018book.jpg" style="width:100%">
    <img src="images/0019book.jpg" style="width:100%">
    <img src="images/0020book.jpg" style="width:100%">
    <img src="images/0021book.jpg" style="width:100%">
    <img src="images/0022book.jpg" style="width:100%">
    <img src="images/0024book.jpg" style="width:100%">
    <img src="images/0025book.jpg" style="width:100%">
  
  </div>
</div>

</body>
</html>

2 respuestas 2

1

Basando en tu código, pordrías usar la librería de FancyBox, que es similar a la de lightbox que comentas en tu pregunta.

Para ello dentro del <head> de tu archivo importas las librerías y jQuery para que puedas trabajar con los mismos.

y en tu etiqueta img agregas la <a> antes bueno si no me supe explicar anexo código.

NOTA: No he editado ni una línea de tu código, solo agregue las librerias. Espero te sea útil.

**Solo te queda remplazar el valor de href con la dirección de tus imágenes originales.

<!DOCTYPE html>
<html>
	<head>
		<style>
		
		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			font-family: Arial;
			background-color: #2c2b2b;
			color: white;
		}

		.header {
			text-align: center;
			padding: 32px;
		}

		.row {
			display: -ms-flexbox; /* IE10 */
			display: flex;
			-ms-flex-wrap: wrap; /* IE10 */
			flex-wrap: wrap;
			padding: 0 4px;
		}

		/* Create four equal columns that sits next to each other */
		.column {
			-ms-flex: 25%; /* IE10 */
			flex: 25%;
			max-width: 25%;
			padding: 0 4px;
		}

		.column img {
			margin-top: 8px;
			vertical-align: middle;
		}

		/* Responsive layout - makes a two column-layout instead of four columns */
		@media screen and (max-width: 800px) {
			.column {
				-ms-flex: 50%;
				flex: 50%;
				max-width: 50%;
			}
		}

		/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
		@media screen and (max-width: 600px) {
			.column {
				-ms-flex: 100%;
				flex: 100%;
				max-width: 100%;
			}
		}
		</style>
	
		<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
		<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
	</head>
	<body>

	<!-- Header -->
	<div class="header">
	  <h1>Trabajos realizados</h1>	  
	</div>

	<!-- Photo Grid -->
	<div class="row"> 
	  <div class="column">  
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>	
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>	
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>	
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>   
	  </div>
	  
	  <div class="column">
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>	
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>	
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>	
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>
	  </div> 
	  
	  <div class="column">
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>	
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>	
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>	
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>
	  </div>
	  
	  <div class="column">
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>	
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>	
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>	
		<a data-fancybox="gallery" href="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg"><img src="http://adrtecnology.com/wp-content/uploads/2013/04/portfolio3.jpg" style="width:100%"></a>
		<a data-fancybox="gallery" href="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg"><img src="https://c1.staticflickr.com/1/429/19120501824_7dec99f31e_b.jpg" style="width:100%"></a>	  
	  </div>	  
	</div>
	</body>
</html>

4
  • funciona perfecto, es justo lo que quería. muchísimas gracias!!! una pregunta, el codigo que hay dentro de las librerias deberia copiarlo y tenerlo en un archivo local por si algun dia lo quitan o no es necesario?
    – Basicmix
    Commented el 16 jul. 2018 a las 16:27
  • 1
    Es correcto, podrías descargar las librerías y manejarlas de forma local es lo más recomendable, Saludos. Commented el 16 jul. 2018 a las 18:57
  • lo he probado pero no funciona igual, solo hace zoom y nada mas, lo dejo como estaba
    – Basicmix
    Commented el 16 jul. 2018 a las 20:30
  • Igual tienes un error a la hora de llamar JQuey o alguna de las librerías, si te interesa puedes indicar como insertas los plugin de forma local para poder orientarte, No debería darte ningún problema si los descargaste de la URL de la respuesta. Saludos. Commented el 16 jul. 2018 a las 20:36
0

Descarga y agrega las siguientes librerías:

        <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
  <style>
    .group2 img {
      width: 100%;
    }
  </style>
    <script>
    $(document).ready(function(){
    $(".group2").colorbox({rel:'group2', transition:"fade"});
    });
    </script>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <a class="group2 cboxElement" href="images/0001book.jpg"><img src="images/0001book.jpg"></a>
    <a class="group2 cboxElement" href="images/0002book.jpg"><img src="images/0002book.jpg"></a>
    <a class="group2 cboxElement" href="images/0003book.jpg"><img src="images/0003book.jpg"></a>
    <a class="group2 cboxElement" href="images/0004book.jpg"><img src="images/0004book.jpg"></a>
    <a class="group2 cboxElement" href="images/0005book.jpg"><img src="images/0005book.jpg"></a>
    <a class="group2 cboxElement" href="images/0006book.jpg"><img src="images/0006book.jpg"></a>
    <a class="group2 cboxElement" href="images/0007book.jpg"><img src="images/0007book.jpg"></a>
    <a class="group2 cboxElement" href="images/0008book.jpg"><img src="images/0008book.jpg"></a>
    <a class="group2 cboxElement" href="images/0009book.jpg"><img src="images/0009book.jpg"></a>
    <a class="group2 cboxElement" href="images/0010book.jpg"><img src="images/0010book.jpg"></a>
    <a class="group2 cboxElement" href="images/0011book.jpg"><img src="images/0011book.jpg"></a>
    <a class="group2 cboxElement" href="images/0012book.jpg"><img src="images/0012book.jpg"></a>
    <a class="group2 cboxElement" href="images/0013book.jpg"><img src="images/0013book.jpg"></a>
    <a class="group2 cboxElement" href="images/0014book.jpg"><img src="images/0014book.jpg"></a>
    <a class="group2 cboxElement" href="images/0018fantasia.jpg"><img src="images/0018fantasia.jpg"></a>
  </div>
  <div class="column">
    <a class="group2 cboxElement" href="images/0001fantasia.jpg"><img src="images/0001fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0002fantasia.jpg"><img src="images/0002fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0003fantasia.jpg"><img src="images/0003fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0004fantasia.jpg"><img src="images/0004fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0005fantasia.jpg"><img src="images/0005fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0006fantasia.jpg"><img src="images/0006fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0007fantasia.jpg"><img src="images/0007fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0008fantasia.jpg"><img src="images/0008fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0009fantasia.jpg"><img src="images/0009fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0010fantasia.jpg"><img src="images/0010fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0011fantasia.jpg"><img src="images/0011fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0012fantasia.jpg"><img src="images/0012fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0013fantasia.jpg"><img src="images/0013fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0014fantasia.jpg"><img src="images/0014fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0019fantasia.jpg"><img src="images/0019fantasia.jpg"></a>
  </div>  
  <div class="column">
    <a class="group2 cboxElement" href="images/0001moda.jpg"><img src="images/0001moda.jpg"></a>
    <a class="group2 cboxElement" href="images/0002moda.jpg"><img src="images/0002moda.jpg"></a>
    <a class="group2 cboxElement" href="images/0003moda.jpg"><img src="images/0003moda.jpg"></a>
    <a class="group2 cboxElement" href="images/0004moda.jpg"><img src="images/0004moda.jpg"></a>
    <a class="group2 cboxElement" href="images/0005moda.jpg"><img src="images/0005moda.jpg"></a>
    <a class="group2 cboxElement" href="images/0006moda.jpg"><img src="images/0006moda.jpg"></a>
    <a class="group2 cboxElement" href="images/0007moda.jpg"><img src="images/0007moda.jpg"></a>
    <a class="group2 cboxElement" href="images/0008moda.jpg"><img src="images/0008moda.jpg"></a>
    <a class="group2 cboxElement" href="images/0009moda.jpg"><img src="images/0009moda.jpg"></a>
    <a class="group2 cboxElement" href="images/0015fantasia.jpg"><img src="images/0015fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0016fantasia.jpg"><img src="images/0016fantasia.jpg"></a>
    <a class="group2 cboxElement" href="images/0017fantasia.jpg"><img src="images/0017fantasia.jpg"></a>
  </div>
  <div class="column">
    <a class="group2 cboxElement" href="images/0001loreal.jpg"><img src="images/0001loreal.jpg"></a>
    <a class="group2 cboxElement" href="images/0002loreal.jpg"><img src="images/0002loreal.jpg"></a>
    <a class="group2 cboxElement" href="images/0003loreal.jpg"><img src="images/0003loreal.jpg"></a>
    <a class="group2 cboxElement" href="images/0015book.jpg"><img src="images/0015book.jpg"></a>
    <a class="group2 cboxElement" href="images/0016book.jpg"><img src="images/0016book.jpg"></a>
    <a class="group2 cboxElement" href="images/0017book.jpg"><img src="images/0017book.jpg"></a>
    <a class="group2 cboxElement" href="images/0018book.jpg"><img src="images/0018book.jpg"></a>
    <a class="group2 cboxElement" href="images/0019book.jpg"><img src="images/0019book.jpg"></a>
    <a class="group2 cboxElement" href="images/0020book.jpg"><img src="images/0020book.jpg"></a>
    <a class="group2 cboxElement" href="images/0021book.jpg"><img src="images/0021book.jpg"></a>
    <a class="group2 cboxElement" href="images/0022book.jpg"><img src="images/0022book.jpg"></a>
    <a class="group2 cboxElement" href="images/0024book.jpg"><img src="images/0024book.jpg"></a>
    <a class="group2 cboxElement" href="images/0025book.jpg"><img src="images/0025book.jpg"></a>
  </div>
</div>
1
  • gracias por tu tiempo!!! he probado el código y al clicar en la imagen se hace más grande pero no se puede cerrar creo que hago algo mal y no se que es (tampoco entiendo mucho). Con la respuesta anterior ya me funciona. Gracias de nuevo!
    – Basicmix
    Commented el 16 jul. 2018 a las 16:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.