时间戳

首页 > 解决方案 > 在灯箱打开之前加载灯箱序列中的图像

javascript - 在灯箱打开之前加载灯箱序列中的图像

问题描述

我只想在灯箱序列打开时将我的图像加载到灯箱序列中（以限制带宽）。

到目前为止，我已经设法将它实现到 Javascript 中，但是我当前的代码存在两个问题；

  1. 该代码似乎仅在灯箱已打开后才起作用。所以现在我必须单击打开灯箱弹出窗口的小图像，再次关闭灯箱，然后再次单击小图像，因为只有这样才能在序列中看到额外的图像。

  2. 另一个问题是每次我点击小图像时它都会添加这些图像，我显然想限制一次。因此，如果我关闭 Lightbox 并再次打开它，则有 31 张图像，下一次是 46 张，以此类推。但显然，我想防止它们被多次加载到序列中。

关于如何解决这些问题的任何想法？

代码

$(".smallimage").click(function() {
  var imageArray = [
    "01.jpg",
    "03.jpg",
    "04.jpg",
    "05.jpg",
    "06.jpg",
    "07.jpg",
    "08.jpg",
    "09.jpg",
    "10.jpg",
    "11.jpg",
    "12.jpg",
    "13.jpg",
    "14.jpg",
    "15.jpg",
    "16.jpg",
  ];

  function assignUrl(img_num) {
    return "../img/" + imageArray[img_num];
  }

  $(function() {
    for (var i = 0; i < imageArray.length; i++) {
      var div = $("<a/>").attr("href", assignUrl(i)).attr("rel", "lightbox[sequence_A]");
      div.append($("<img/>").attr("src", assignUrl(i)).attr("class", "image_hidden"));
      console.log($);
      $("body").append(div);
    }
    $("a[rel=sequence_A]").lightbox();
  })
})
<a class="smallimage" href="../img/02.jpg" rel="lightbox[bakel]">
  <img src="../img/02-01.jpg">
  <h2>Title</h2>
</a>

标签： javascripthtmlimagelightbox

解决方案

推荐阅读