Javascript响应式图片库缩略图

Question

I need to do a responsive image thumbnail gallery and mine currently looks like this the one you can see in the snippet.

Since I must have 30 images showing, Is there a way a can make my code more efficient so that I dont have to repeat images all the time?

Unfortunately I cannot use plugins but I am free to use jQuery.

You can check my pen here

My html and css look like this:

HTML:

<h2 style="text-align:center">Lightbox</h2>

<div class="row">
  <div class="column">
    <img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://placehold.it/180x180.jpg " 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="https://placehold.it/180x180.jpg " style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://placehold.it/180x180.jpg " style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://placehold.it/180x180.jpg " style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://placehold.it/180x180.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 cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>

CSS:

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

* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 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: 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)
}

Answer 1

You are going to have to have the image elements one way or another, so that shouldn't be your focus. But, there certainly are other things you can do to reduce redundancy, separate the content, presentation and behavior and provide yourself a better way to scale and debug the page as time goes on.

First, instead of applying inline styles to elements, use CSS selectors to reduce redundancy and separate the content from the presentation.

Also, while static HTML doesn't use any of the JavaScript runtime's power, you can automate the application of those classes as well as the setting up of the click event handlers (which shouldn't be done with inline HTML event handling attributes anyway) with JavaScript. This won't eliminate having all the image elements, but it will decrease the redundancy of that code.

A couple of other things... Some of your HTML is invalid as some of your image elements don't have the required alt attribute to provide an alternate text description for those who use screen reader software or otherwise can't see the images.

Lastly, it looks like many of your image paths have a trailing space as part of the attribute value.

 // Place all of this code into a <script></script> element and place that element // just before the closing of the <body> element (</body>) so that by the time // the script is reached, all the HTML will have already been parsed into memory. // Get references to the elements you need to work with: var prev = document.querySelector(".prev"); var next = document.querySelector(".next"); var close = document.querySelector(".close"); // Get a node list of the sets of images and turn the node list into a proper array var columnImages1 = Array.prototype.slice.call(document.querySelectorAll("div.row > div.colum > img.hover-shadow.cursor")); var columnImages2 = Array.prototype.slice.call(document.querySelectorAll("div.column > img.demo")); // Loop over the first group of images and set up their click event handlers columnImages1.forEach(function(img, index){ img.addEventListener("click", function(){ openModal(); currentSlide(index + 1); }); }); // Loop over the second group of images and set up their click event handlers columnImages1.forEach(function(img, index){ img.addEventListener("click", function(){ currentSlide(index + 1); }); }); // Set up the click event handler for the close, previous and next buttons close.addEventListener("click", closeModal); prev.addEventListener("click", function(){ plusSlides(-1) }); next.addEventListener("click", function(){ plusSlides(1) }); 

 * { box-sizing: border-box; } body { font-family: Verdana, sans-serif; margin: 0; } /* This will eliminate the need to repeat "width:100%" on all your slides */ .mySlides > img, .column > img { width: 100%; } .row > .column { padding: 0 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; } 

 <h2 style="text-align:center">Lightbox</h2> <div class="row"> <div class="column"> <img src="https://placehold.it/180x180.jpg" alt="You need a short description here" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://placehold.it/180x180.jpg" alt="You need a short description here" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://placehold.it/180x180.jpg" alt="You need a short description here" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://placehold.it/180x180.jpg" alt="You need a short description here" class="hover-shadow cursor"> </div> </div> <div id="myModal" class="modal"> <span class="close cursor">&times;</span> <div class="modal-content"> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="https://placehold.it/180x180.jpg" alt="You need a short description here"> </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="https://placehold.it/180x180.jpg" alt="You need a short description here"> </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="https://placehold.it/180x180.jpg" alt="You need a short description here"> </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="https://placehold.it/180x180.jpg" alt="You need a short description here"> </div> <a class="prev">&#10094;</a> <a class="next">&#10095;</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="column"> <img class="demo cursor" src="https://placehold.it/180x180.jpg" alt="Nature and sunrise"> </div> <div class="column"> <img class="demo cursor" src="https://placehold.it/180x180.jpg" alt="Trolltunga, Norway"> </div> <div class="column"> <img class="demo cursor" src="https://placehold.it/180x180.jpg" alt="Mountains and fjords"> </div> <div class="column"> <img class="demo cursor" src="https://placehold.it/180x180.jpg" alt="Northern Lights"> </div> </div> </div>