Edit in JSFiddle

/*
*	THE WAY HOW TO CUSTOMIZE IT
*	by default it shows 3 images, if you want to display more/less images do following:
*
* 1. modify displayedImages variable in JS
*
*/

var	gallery = document.getElementsByClassName("gal-item"),
    galleryLength = gallery.length,
    displayedImages = 3;

if( galleryLength > displayedImages ){
	for( var i=0; i<galleryLength; i++ ){
  	if( i >= displayedImages ){
    	gallery[i].style.display = "none";
    }
  }

  var diff = galleryLength - displayedImages,
  		em = document.createElement('em');
  em.innerHTML = "+" + diff;

  gallery[displayedImages-1].classList.add("expanded");
  gallery[displayedImages-1].children[0].appendChild(em);
}

// init lightbox plugin
baguetteBox.run('.gallery');

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>

<section class="gallery-box">
				<h2>Photo Gallery:</h2>
				
				<div class="gallery">
				  <a href="https://picsum.photos/400.jpg" class="gal-item"><span><img src="https://picsum.photos/200" width="200" height="200" alt="" /></span></a>
					<a href="https://picsum.photos/400/400/?random.jpg" class="gal-item"><span><img src="https://picsum.photos/200/200/?random" width="200" height="200" alt="" /></span></a>
					<a href="https://picsum.photos/g/400.jpg" class="gal-item"><span><img src="https://picsum.photos/g/200" width="200" height="200" alt="" /></span></a>
					<a href="https://picsum.photos/400/400.jpg?image=50" class="gal-item"><span><img src="https://picsum.photos/200/200?image=50" width="200" height="200" alt="" /></span></a>
					<a href="https://picsum.photos/400/400.jpg?image=1081" class="gal-item"><span><img src="https://picsum.photos/200/200/?image=1081" width="200" height="200" alt="" /></span></a>
					<a href="https://picsum.photos/400/400.jpg?image=1082" class="gal-item"><span><img src="https://picsum.photos/200/200?image=1082" width="200" height="200" alt="" /></span></a>
					<a href="https://picsum.photos/400/400.jpg?image=500" class="gal-item"><span><img src="https://picsum.photos/200/200?image=500" width="200" height="200" alt="" /></span></a>
				</div>
</section>

.gallery-box {
  margin: 22px 0 44px;
}
.gallery-box h2 {
  padding-left: 44px;
  margin: 0 0 44px;
  color: #FFAF19;
  font-size: 21px;
}
.gal-item {
  position: relative;
  display: block;
  float:left;
  margin:10px;
}
.gal-item span {
  float:left;
  position: relative;
  display: block;
}
.gal-item span img {
  float: left;
}
.gal-item em {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  background: rgba(255, 165, 25, 0.5);
  font-size: 36px;
  font-style: normal;
  line-height: 200px;
}
.gal-item.expanded em {
  display: block;
}