Simple javascript image gallery lightbox

javascript image gallery lightbox

This is a simple JavaScript image gallery lightbox to show selected image in a lightbox. Very to easy to understand and implement this javascript image lightbox with CSS. When an image is showing in the lightbox you can see the left and right arrows to navigate previous and next images. Below to image we are displaying caption which is mentioned in the image alt attribute.

Below is the CSS used for this example:

body {
  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

#mainContainer{ width: 980px; margin:0 auto;}
.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}
  
.marginTop50px{ margin-top:50px;}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

HTML used for javascript image lightbox:

<div id="mainContainer">
<div class="row marginTop50px">
  <div class="column">
    <img src="images/img1.jpg" width="230px" onclick="openModal(1);" class="hover-shadow">
  </div>
  <div class="column">
    <img src="images/img2.jpg" width="230px" onclick="openModal(2);" class="hover-shadow">
  </div>
  <div class="column">
    <img src="images/img3.jpg" width="230px" onclick="openModal(3);" class="hover-shadow">
  </div>
  <div class="column">
    <img src="images/img4.jpg" width="230px" onclick="openModal(4);" class="hover-shadow">
  </div>
</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
        <img src="images/img1.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
        <img src="images/img2.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
        <img src="images/img3.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
        <img src="images/img4.jpg" style="width:100%">
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>

    <div class="column">
      <img class="demo" width="230px" src="images/img1.jpg" onclick="currentSlide(1)" alt="Image1">
    </div>

    <div class="column">
      <img class="demo" width="230px" src="images/img2.jpg" onclick="currentSlide(2)" alt="Image2">
    </div>

    <div class="column">
      <img class="demo" width="230px" src="images/img3.jpg" onclick="currentSlide(3)" alt="Image3">
    </div>

    <div class="column">
      <img class="demo" width="230px" src="images/img4.jpg" onclick="currentSlide(4)" alt="Image4">
    </div>
  </div>
</div>
</div>

JavaScript that is used for the lightbox:

function openModal(num) {
  document.getElementById('myModal').style.display = "block";
  currentSlide(num)
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  
  var currentImg = slideIndex-1;
  
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
	dots[i].className = dots[i].className.replace(" active", "");
  }

  slides[currentImg].style.display = "block";
  dots[currentImg].className += " active";
  captionText.innerHTML = dots[currentImg].alt;
}

You can download and demo this javascript image lightbox example using below links.

Download / Demo

You may also like...