-99 works

Responsive Modal Image Gallery using HTML and CSS


dashboard+ Project

Posted by @sohaibiftikhar #css #html #javascript

Step 0: First of all create an html document by using any text editor and copy the below code and place it inside the body tag of the html document.

<h2 style="text-align:center">Modal Image Gallery</h2>
<div class="row">
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </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="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="placeholder.png" 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 cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(1)" alt="Sample image 1">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(2)" alt="Sample image 2">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(3)" alt="Sample image 3">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(4)" alt="Sample image 4">
    </div>
  </div>
</div>
content_copyCopy to Clipboard

Step 1: After copying the html code now we have to style the html web page. For that purpose copy and paste the below code in the same html document inside the header tag. If you don't want to keep the css code in the same html document you can create an external css file and link it with this html web page.

<style>
body {
  font-family: Verdana, sans-serif;
  margin: 0;
}
* {
  box-sizing: border-box;
}
.row > .column {
  padding: 8px 8px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.column {
  float: left;
  width: 25%;
}
/* 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: #333;
  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);
  color:#fff;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 16px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.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)
}
</style>
content_copyCopy to Clipboard

Step 2: To change the behavior of the web page we have to include the javascript. For that purpose copy and paste the below code in the same html document before the body closing tag.

<script>
function openModal() {
  document.getElementById('myModal').style.display = "block";
}
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}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
content_copyCopy to Clipboard

Code snippet source:

https://www.w3schools.com/howto/howto_js_lightbox.asp,

>> Browse more code snippets

more_vert