In de <head> staat de link naar de Lightbox-css, plus nog wat zelf toegevoegde css.
De link naar de Lightbox-css moet je aanpassen, naar waar die css bij jou staat.

<link href="css/lightbox.css" rel="stylesheet">

<style type="text/css">
.gal img {
   border-radius: 100px;
   transition:all 1s;
   border:3px solid #ddd;
}
.gal img:hover{
   opacity: 0.7;
   border: 3px solid #69f;
   transform:scale(1.1);
   }
</style>

Aan de links om de plaatjes is data-lightbox toegevoegd.
Als die waarde steeds hetzelfde is dan is het een groep,
waar je met de pijltjestoetsen doorheen kan.
Onderschriften kun je toevoegen met data-title.
Alle plaatjes staan tesamen in een <div class=gal>

<div class="gal">

<a href="hr/1.jpg" data-lightbox="1" data-title="Groot plaatje" >
<img src="lr/1.jpg" width="200" height="200"></a>
<a href="hr/2.jpg" data-lightbox="1" data-title="Klein plaatje" >
<img src="lr/2.jpg"  width="200" height="200" ></a>

</div>

Onderaan in de HTML staat het script + opties:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/lightbox.min.js"></script>

<script>
   lightbox.option({
   'resizeDuration': 400,
   'showImageNumberLabel': false,
   'fadeDuration':400,   
   })
</script>

De eerste is de jqyery-library, die op een Google server staat.
De tweede is het lightbox-script, die link moet je aanpassen naar waar het werkelijk staat.
De derde is optioneel.