如何用JS显示一个图片数组并使用Lightbox2

Question

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

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

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

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

<!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>");

Answer 1

您需要做一些事情。首先，您不能只添加一个 div 作为字符串并将其写入 DOM。 jQuery 让我们做类似的事情，但普通 JS 不会将其识别为实际元素。那里也有一些缺失的括号。我添加了内联评论以帮助说明问题。试一试：

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);
  });
}

希望这能帮助您指明正确的方向。编码愉快！

如何用JS显示一个图片数组并使用Lightbox2

How to Display an Image Array with JS and Use Lightbox2

javascript

arrays

image

lightbox2