Ampliar imagen al hacer clic encima con lightbox

En esta ocasión vamos a hacer un pequeño tutorial de cómo ampliar una imagen al hacer clic encima de una manera muy sencilla utilizando un lightbox gratuito, también existen versiones de pago pero no es el caso.

En el siguiente código está explicado paso a paso cómo implementarlo para que automáticamente se ejecute la función de ver imagen a tamaño completo al hacer clic en cualquiera de las imágenes que se encuentren dentro del contenido de la pagina:

Demo

Librerías y cdn's

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://datoweb.com/visor/js/fresco/fresco.js"></script>
<link rel="stylesheet" type="text/css" href="https://datoweb.com/visor/css/fresco/fresco.css" />

Html

<!-- Todas las imagenes dentro de la div .content son cargadas en el visor-->
<div class="content">
	
	<h1>Clic en imagen 1</h1>
	<img src="https://datoweb.com/img/post/3_81_frans_hals.jpg" alt="Prueba" width="400">

	<h1>Clic en imagen 2</h1>
	<img src="https://datoweb.com/img/post/3_58_frans_hals2.JPG" alt="Prueba2" width="400">
</div>


<a id="verimagenes" class='fresco' data-fresco-group='grupo'></a>

Jquery

<script>

$(document).ready(function(){

//Al hacer clic en cualquier img ejecutamos la acción
$('.content img').click(function() {
	//Capturamos el src de la img
	var postimg= $(this).attr('src');
	//Agregamos el src a una href simbólico
	$('#verimagenes').attr('href',postimg);
	//Hacemos clic en el enlace para activar el visor
	$('#verimagenes').click();
});

});
</script>

Demo

Lo más optimo es descargar el script del sitio web oficial y no utilizar cdn's, este es el enlace a la descarga.

Una vez descargado y agregado a la raíz de nuestro sitio web solo tenemos que cambiar las cdn's por esto:

<script src="aqui_la_carpeta_fresco/js/fresco/fresco.js"></script>
<link rel="stylesheet" type="text/css" href="aqui_la_carpeta_fresco/css/fresco/fresco.css" />

salu2
Editado