如何用 JS 显示图像数组并使用 Lightbox2答案

【问题标题】：How to Display an Image Array with JS and Use Lightbox2如何用 JS 显示图像数组并使用 Lightbox2
【发布时间】：2017-12-17 04:05:56
【问题描述】：

如何在 JS 中显示数组中的所有图像并仍然使用 Lightbox2？

8th gr 数学老师试图创建一个井字游戏板，其中 Lightbox2 允许用户单击以放大图像。在代码中，您会看到我将数组随机化，以使我的孩子更难作弊。重点是让数组将每个 img 显示为 3x3 网格，但允许学生单击并使用模态放大每个图像。

Lightbox2 需要以下代码行：
a href="images/image-1.jpg" data-lightbox="image-1" data-title="我的标题">图片#1 /a 这就是为什么我在 js document.write 代码中有所有低效的 + 符号。

我在这里搜索了答案，其中答案编辑 DOM 或使用 .foreach 在数组中递增，我还没有看到一个解决方案，您仍然可以单击以放大模式中的图像。谢谢你，我的学生会说谢谢！这是我第一次将计算机科学带入课堂，所以我是个菜鸟。

<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<link href="https://fonts.googleapis.com/css?
family=Oswald:300,700|Varela+Round" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="tictactoestyle.css">
<link href="css/lightbox.css" rel="stylesheet">
<script type="text/javascript" src="tictactoe.js"></script>
<script src="js/lightbox-plus-jquery.js"></script>
</head> 

<body>
<div class="title">
<h1>  Tic Tac Toe </h1>
</div>

<div id="gameboard">  <!--Container for all nine divs-->

<script>displayAllImages();</script>
</div>
</body>
</html>

/*Javascript*/

function shuffle(arr) {
var currentIndex = arr.length, temporaryValue, randomIndex;

    // While there remain elements to shuffle...
while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = arr[currentIndex];
    arr[currentIndex] = arr[randomIndex];
    arr[randomIndex] = temporaryValue;
}

return arr;

function displayAllImages() {
var imgArray = [];
imgArray[0] = "image1";
imgArray[1] = "image2";
imgArray[2] = "image3";
imgArray[3] = "image4";
imgArray[4] = "image5";
imgArray[5] = "image6";
imgArray[6] = "image7";
imgArray[7] = "image8";
imgArray[8] = "image9";

imgArray = shuffle(imgArray);

for (i=0;i<imgArray.length;i++) {
    document.write("<div class='card'><a href='images/" + item + "'.jpg 
data-lightbox='" + item + "'><img src='images/" + item + "m.jpg'></a>
</div>");

【问题讨论】：

标签： javascript arrays image lightbox2

【解决方案1】：

您需要做一些事情。首先，您不能只添加一个 div 作为字符串并将其写入 DOM。 jQuery 可以让你做类似的事情，但 vanilla JS 不会将它识别为实际元素。那里还缺少一些括号。我已经添加了 cmets inline 以帮助使事情变得清晰。试试这个：

function shuffle(arr) {
  var currentIndex = arr.length, temporaryValue, randomIndex;

      // While there remain elements to shuffle...
  while (0 !== currentIndex) {

      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = arr[currentIndex];
      arr[currentIndex] = arr[randomIndex];
      arr[randomIndex] = temporaryValue;
  }

  return arr;
}


function displayAllImages() {
  var imgArray = [
    "image1",
    "image2",
    "image3",
    "image4",
    "image5",
    "image6",
    "image7",
    "image8",
    "image9",
  ];

  //Map over the array to create the DOM elements
  var domElements = imgArray.map(function(imgName, index) {
    var cardDiv = document.createElement('div');
    var cardLink = document.createElement('a');
    var cardImage = document.createElement('img');

    //Add the class
    cardDiv.classList.add('card');

    //Add the link to image
    //Utilize interpolation for the variable
    //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
    cardLink.href = `images/${imgName}.jpg`;

    //Set the data attribute
    cardLink.dataset.lightbox = imgName;

    //Set img source
    cardImage.src = `images/${imgName}.jpg`;

    //Put it all together
    cardLink.appendChild(cardImage);
    cardDiv.appendChild(cardLink);

    return cardDiv;

  });

  //Now we have an array with the propper DOM elements
  //Shuffle it
  var shuffled = shuffle(domElements);

  //Append the elements to the DOM
  var body = document.querySelector('body');

  shuffled.forEach(function(card, index) {
    body.appendChild(card);
  });
}

希望这有助于为您指明正确的方向。编码愉快！

【讨论】：

感谢它的出色表现。我仍在浏览您的链接和 cmets 以弄清楚您做了什么。去 Codecademy，非常感谢。 @RickTakes