I want to load my images in a lightbox sequence only when the lightbox sequence is opened (to limit bandwidth).

So far I've managed to implement it into Javascript, yet there are two problems with my current code;

1. The code only seems to work AFTER the lightbox is already opened. So now I have to click the small image which opens the lightbox pop-up, close Lightbox again, and then again click the small image because only then the extra images are visible in the sequence.

2. The other problem is that it will add those images every time I click on the small image, which I obviously want to limit to one time. So if I close Lightbox and open it again, there are 31 images, next time 46, and so on. But obviously, I want to prevent that they're loaded multiple times into the sequence.

Any ideas on how these problems might be fixed?

Code

$(".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>