I'm trying to customize a jQuery lightbox plugin called [LightGallery](http://sachinchoolur.github.io/lightGallery/) to achieve the following result:

1- Make the script fetch all images from a folder, using index increment as an image path;

2- Make the Lightbox open after clicking another element.

**The problem is:**

The plugin opens the lightbox **one time only!**. 

I'm using `trigger('click')` to fires it for the first time, but after closing it and trying to click to repeat it again it does NOT work.

the plugin looks destroyed and it opens one image only!

I want it to opens the lightbox every time I click the targetted elements.

Here's my attempts: ( [**Pen here**](http://codepen.io/anon/pen/KzXgOv?editors=0010) )

```js
$(document).ready(function() {

  var $lg = $('#lightgallery');

  function fetchFolderImages() {
    var checkImages, endCheckImages;
    var img;
    var imgArray = new Array();
    var i = 1;

    var myInterval = setInterval(loadImage, 1);

    if ($lg.children().length > 0) {
      checkImages = false;
      endCheckImages = true;
    } else {
      checkImages = true;
      endCheckImages = false;
    }

    function loadImage() {
      if (checkImages) {
        checkImages = false;
        img = new Image();
        img.src = 'http://sachinchoolur.github.io/lightGallery/static/img/' + i + '.jpg';
        img.onload = moreImagesExists;
        img.onerror = noImagesExists;
      }
      if (endCheckImages) {
        clearInterval(myInterval);
        console.log('function [loadImage] done');
        runLightGallery();
        return;
      }
    }

    function moreImagesExists() {
      imgArray.push(img);
      $lg.append($('<a/>', {
        'href': img.src
      }).html(img));
      i++;
      checkImages = true;

      console.log('function [moreImagesExists] done');
    }

    function noImagesExists() {
      endCheckImages = true;

      console.log('function [noImagesExists] done');
    }

    console.log('function [fetchFolderImages] done');
  }

  function runLightGallery() {

    if ($lg.lightGallery()) {
      //alert('working');
    } else {
      //alert('destroyed');
      $lg.lightGallery({
        thumbnail: true
      });

    }
    //trigger click event on image to open the lightbox
    $lg.children('a').trigger('click');

    //empty method, thought we may can use
    $lg.on('onAfterOpen.lg', function(event) {
      //maybe we can use this method?
    });

    $lg.on('onCloseAfter.lg', function(event) {
      $lg.children().remove();
      $lg.toggle();
      //$lg.lightGallery().destroy(true);
    });

    console.log('function [runLightGallery] done');

  }

  $('.gallery-item').each(function() {
    $(this).on('click', function() {
      $lg.toggle();
      fetchFolderImages();
    });
  });

});
```

```html
<!DOCTYPE html>
<html>

<head>
  <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.16/css/lightgallery.css" />
</head>

<body>

  <div class="gallery">
    <div class="gallery-item">Gallery Item 1</div>
    <div class="gallery-item">Gallery Item 2</div>
    <div class="gallery-item">Gallery Item 3</div>
  </div>

  <div id="lightgallery" style="display: none; border: 5px solid red"></div>

  <!--============== scripts ==============-->
  <!-- jQuery -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.js"></script>
  <!-- jQuery mouse wheel -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
  <!-- lightGallery : a lightbox jQuery plugin -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.16/js/lightgallery.js"></script>
  <!-- lightGallery plugin for thumbnails -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.16/js/lg-thumbnail.js"></script>

</body>

</html>
```