我该如何修复这个照片库？

Question

I created or tried to make a Photo Gallery on one of my web pages. It worked perfectly at first, but when the "Show more images" button is clicked, it changes the logo and doesn't show the other added images. (See pictures below). How can I avoid the logo changing and show the rest of the photos?

I really will appreciate if somebody can help me to find the error. Thanks!

Here's the html code:

<h1 class="headings1">ABOUT US</h1>
<article>
  <div id="leftarrow">
    <p>&lt;</p>
  </div>
  <figure id="fig2">
    <img class="about" width="360" height="202" />
  </figure>
  <figure id="fig3">
    <img class="about" width="480" height="270" />
  </figure>
  <figure id="fig4">
    <img class="about" width="360" height="202" />
  </figure>
  <div id="rightarrow">
    <p>&gt;</p>
  </div>
  <div id="fiveButton">
    <p>Show more images</p>
  </div>
</article>

Here's javascript code:

"use strict"; // interpret document contents in JavaScript strict mode

/* global variables */
var photoOrder = [1,2,3,4,5];
var figureCount = 3;

/* add src values to img elements based on order specified on photoOrder array */
function populateFigures() {
    var filename;
    var currentFig;

    if (figureCount === 3){ 
    
        for (var i = 1; i < 4; i++) {
            filename = "images/about_0" + photoOrder[i] + "sm.jpg";
            currentFig = document.getElementsByClassName("about") [i - 1];
            currentFig.src = filename;
        }

    } else {
        for (var i = 0; i < 5; i++) {
            filename = "image/about_0" + photoOrder[i] + "sm.jpg";
            currentFig = document.getElementsByClassName("about")[1];
            currentFig.src = filename;
        }
    }
}

/* shift all images one figure to the left, and change values in photoOrder array to match  */
function rightArrow() {
   for (var i = 0; i < 5; i++) {
      if ((photoOrder[i] + 1) === 6) {
         photoOrder[i] = 1;
      } else {
         photoOrder[i] += 1;
      }
      populateFigures();
   }
}

/* shift all images one figure to the right, and change values in photoOrder array to match  */
function leftArrow() {
   for (var i = 0; i < 5; i++) {
      if ((photoOrder[i] - 1) === 0) {
         photoOrder[i] = 5;
      } else {
         photoOrder[i] -= 1;
      }
      populateFigures();
   }
}

/* switch to 5-images */
function previewFive() {
    //create figure and img elements for fifth image
    var articleEl = document.getElementsByTagName("article")[0];

    var lastFigure = document.createElement("figure");    
    lastFigure.id = "fig5";
    lastFigure.style.zIndex = "5";
    lastFigure.style.position = "absolute";
    lastFigure.style.right = "45px"
    lastFigure.style.top = "67px";

    var lastImage = document.createElement("img");
    lastImage.classList = "about";
    lastImage.width = "240";
    lastImage.height = "135"

    lastFigure.appendChild(lastImage);
    // articleEl.appendChild(lastFigure);
    articleEl.insertBefore(lastFigure, document.getElementById("rightarrow"));

    //clone figure element for fifth image and edit to be first image
    var firstFigure = lastFigure.cloneNode(true);
    firstFigure.id = "fig1";
    firstFigure.style.right = "";
    firstFigure.style.left = "45px";

    // articleEl.appendChild(firstFigure);
    articleEl.insertBefore(firstFigure, document.getElementById("fig2"));

    //add appropiate src values to two img elements
    document.getElementsByTagName("img")[0].src = "images/about_0" + photoOrder[0] + "sm.jpg";
    document.getElementsByTagName("img")[4].src = "images/about_0" + photoOrder[4] + "sm.jpg";

    figureCount = 5;

    //change button to hide extra images
    var numberButton = document.querySelector("#fiveButton p");
    numberButton.innerHTML = "Show fewer images";
    if (numberButton.addEventListener) {
        numberButton.removeEventListener("click", previewFive, false);
        numberButton.addEventListener("click", previewThree, false);
    } else if (numberButton.attachEvent) {
        numberButton.detachEvent("onclick", previewFive);
        numberButton.attachEvent("onclick", previewThree);

    }

}

/* switch to 3-image layout */
function previewThree() {
    var articleEl = document.getElementsByTagName("article") [0];
    var numberButton = document.querySelector("#fiveButton p");

    articleEl.removeChild(document.getElementById("fig1"));
    articleEl.removeChild(document.getElementById("fig5"));

    figureCount = 3;
    numberButton.innerHTML = "Show more images";
    if (numberButton.addEventListener) {
        numberButton.removeEventListener("click", previewThree, false);
        numberButton.addEventListener("click", previewFive, false);
    } else if (numberButton.attachEvent) {
        numberButton.detachEvent("onclick", previewThree);
        numberButton.attachEvent("onclick", previewFive);
    }
}

/* Create event listener for left arrow, right arrow and center figure element */
function createEventListeners() {

    var leftarrow = document.getElementById("leftarrow");
    if (leftarrow.addEventListener) {
        leftarrow.addEventListener("click", leftArrow, false);
    } else if (leftarrow.attachEvent) {
        leftarrow.attachEvent("onclick", leftArrow);
    }

    var rightarrow = document.getElementById("rightarrow");
    if (rightarrow.addEventListener) {
        rightarrow.addEventListener("click", rightArrow, false);
    }else if (rightarrow.attachEvent) {
        rightarrow.attachEvent("onclick", rightArrow);
    }

    var mainFig = document.getElementsByTagName("img")[1];
    if (mainFig.addEventListener) {
        mainFig.addEventListener("click", zoomFig, false);
    } else if (mainFig.attachEvent) {
        mainFig.attachEvent("onclick", zoomFig);
    }

    var showAllButton = document.querySelector("#fiveButton p");
    if (showAllButton.addEventListener) {
        showAllButton.addEventListener("click", previewFive, false);
    }else if (showAllButton.attachEvent) {
        showAllButton.attachEvent("onclick", previewFive);
    }

}

/* open center figure in separate window */
function zoomFig() {
    var propertyWidth = 960;
    var propertyHeight = 600;
    var winLeft = ((screen.width - propertyWidth) / 2);
    var winTop = ((screen.height - propertyHeight) / 2);
    var winOptions = "width = 960, height = 600";
    winOptions += ",left=" + winLeft;
    winOptions += ",top=" + winTop;
   var zoomWindow = window.open("zoom.html", "zoomwin", winOptions);

   zoomWindow.focus();
}

/* create event listeners and populate image elements */
function setUpPage() {
   createEventListeners();
   populateFigures();
}

/* run setUpPage() function when page finishes loading   */
if (window.addEventListener) {
  window.addEventListener("load", setUpPage, false); 
} else if (window.attachEvent)  {
  window.attachEvent("onload", setUpPage);
}

Answer 1

I think the part where the logo is changing is in the previewFive function. It's where you select img elements with document.getElementsByTagName and reference the first one, which will be the first img in the document. You can use the following alternative to select the img elements within your photo gallery:

document. querySelectorAll ("article img")

document.querySelectorAll("article img")[0].src = "images/about_0" +
  photoOrder[0] + "sm.jpg";
document.querySelectorAll("article img")[4].src = "images/about_0" +
  photoOrder[4] + "sm.jpg";

Answer 2

I have included a tiny library with a constructor called ImgViewer . Admittedly, if you resize the screen vertically, it can be a slight issue, but it's all the time I'm willing to take right now. Hopefully you can learn something from this.

 //<![CDATA[ /* js/external.js */ let doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC, ImgViewer; // for use on other loads addEventListener('load', ()=>{ doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id); mobile = /Mobi/i.test(nav.userAgent); S = (selector, within)=>{ let w = within || doc; return w.querySelector(selector); } Q = (selector, within)=>{ let w = within || doc; return w.querySelectorAll(selector); } hC = (node, className)=>{ return node.classList.contains(className); } aC = (node, ...classNames)=>{ node.classList.add(...classNames); return aC; } rC = (node, ...classNames)=>{ node.classList.remove(...classNames); return rC; } tC = (node, className)=>{ node.classList.toggle(className); return tC; } ImgViewer = function(imgArray, imgsWide = 3){ if(imgsWide % 2 === 0){ throw new Error('imgsWide must be odd number'); } this.container = M('div'); this.leftArrow = M('div'); this.view = M('div'); this.rightArrow = M('div'); this.container.className = 'imgViewer'; this.view.className = 'view'; this.leftArrow.className = this.rightArrow.className = 'arrow'; this.leftArrow.textContent = '<'; this.rightArrow.textContent = '>'; this.container.appendChild(this.leftArrow); this.container.appendChild(this.view); this.container.appendChild(this.rightArrow); const center = Math.floor(imgsWide/2), iA = [], imA = imgArray.slice(); this.size = ()=>{ const b = this.view.getBoundingClientRect(), w = b.width/imgsWide-40; for(let i=0,l=iA.length; i<l; i++){ iA[i].width = i === center ? w+50 : w; } return this; } this.create = (where = bod)=>{ // default document.body where.appendChild(this.container); const v = this.view, b = v.getBoundingClientRect(), w = b.width/imgsWide-40; for(let i=0,m,l=imgArray.length; i<l; i++){ m = M('img'); m.width = i === center ? w+50 : w; m.src = imgArray[i]; iA.push(m); // cache all the images if(i < imgsWide){ if(i === center){ // add a click event to center if you want - I did not } else if(i < center){ m.onclick = ()=>{ for(let n=i; n<center; n++){ this.rightArrow.onclick(); } } } else{ m.onclick = ()=>{ for(let n=i; n<imgsWide; n++){ this.leftArrow.onclick(); } } } v.appendChild(m); } } const c = v.children; const dispImgs = ()=>{ for(let n=0; n<imgsWide; n++){ c[n].src = imA[n]; } } this.leftArrow.onclick = ()=>{ imA.push(imA.shift()); dispImgs(); } this.rightArrow.onclick = ()=>{ imA.unshift(imA.pop()); dispImgs(); } onresize = this.size; return this; } } // tiny library above - magic below can be put on another page using a load Event except `}); // end load` line const imgURLs = [ 'https://images.freeimages.com/images/large-previews/afa/black-jaguar-1402097.jpg', 'https://images.freeimages.com/images/large-previews/7e9/ladybird-1367182.jpg', 'https://images.freeimages.com/images/large-previews/535/natural-wonders-1400924.jpg', 'https://images.freeimages.com/images/large-previews/035/young-golden-retriever-1404848.jpg', 'https://images.freeimages.com/images/large-previews/981/cow-1380252.jpg', 'https://images.freeimages.com/images/large-previews/9fc/yet-another-flower-1399208.jpg', 'https://images.freeimages.com/images/large-previews/72c/fox-1522156.jpg', 'https://images.freeimages.com/images/large-previews/e2a/boise-downtown-1387405.jpg', 'https://images.freeimages.com/images/large-previews/f37/cloudy-scotland-1392088.jpg' ]; const imgV = new ImgViewer(imgURLs); imgV.create(); }); // end load //]]>

 /* css/external.css */ *{ /* size font individually to avoid font whitespace */ box-sizing:border-box; font-size:0; margin:0; padding:0; overflow:hidden; } html,body{ width:100%; height:100%; } /* below is what you need to see - above is set for this example */ .imgViewer{ width:100%; height:100%; } .imgViewer,.imgViewer *{ display:flex; justify-content:center; align-items:center; } .imgViewer>.arrow{ cursor:pointer; width:32px; height:70px; background:#777; color:#fff; font:bold 14px san-serif; } .imgViewer>.view{ width:calc(100% - 32px); height:100%; } .imgViewer>.view>img{ cursor:pointer; margin:0 7px; box-shadow:1px 1px 2px; } .imgViewer>.view>img:first-child{ margin-left:0; } .imgViewer>.view>img:last-child{ margin-right:0; }

 <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' /> <title>ImgViewer</title> <link type='text/css' rel='stylesheet' href='css/external.css' /> <script src='js/external.js'></script> </head> <body> </body> </html>

Of course, I didn't make the dummy window for zooming, but you can ask another question for that!