Question

我尝试自定义名为LightGallery的jQuery灯箱插件，以实现以下结果：

1-使用索引增量作为图像路径，使脚本从文件夹中获取所有图像;

2-点击另一个元素后打开灯箱。

问题是：

该插件只会打开灯箱一次！。

我是第一次使用public ProgressBar startProgressBar() { Stage primaryStage = new Stage(); ProgressBar pb = new ProgressBar(0); ProgressIndicator pi = new ProgressIndicator(0); pi.progressProperty().bind(pb.progressProperty()); HBox hb = new HBox(); hb.setSpacing(5); hb.setAlignment(Pos.CENTER); hb.getChildren().addAll(pb, pi); Scene scene = new Scene(hb, 300, 100); primaryStage.setScene(scene); primaryStage.show(); return pb; }触发它，但是在关闭它并尝试再次点击它之后它不起作用。

插件看起来被破坏了，它只打开一个图像！

我希望每次单击目标元素时都打开灯箱。

这是我的尝试：（Pen here）

＆＃13;

trigger('click')

＆＃13;

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

＆＃13;

Answer 1

LightGallery需要销毁并再次初始化

要销毁LightGallery，请使用此代码$lg.data('lightGallery').destroy(true);

来源：https://github.com/sachinchoolur/lightGallery/issues/238#issuecomment-161020492

Pen

$(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.data('lightGallery').destroy(true);
    });

    console.log('function [runLightGallery] done');

  }

  $('.gallery-item').each(function() {
    $(this).on('click', function() {
      $lg.toggle();
      fetchFolderImages();
    });
  });

});

<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>

Answer 2

你没有以正确的方式摧毁LightGallary。

将此用于' onCloseAfter.lg '事件：

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

Answer 3

我快速查看了您的代码，发现您正在加载动态数据尝试甚至授权，https://learn.jquery.com/events/event-delegation/ 问题是，在事件绑定的那一刻，并非所有的＆＃34; a＆＃34;真正存在的元素绑定事件

您的触发事件应该类似于

$(document).on('click','#someId a:first-child',function(){

})

jquery触发器（＆＃39;点击＆＃39;）只能运行一次

3 个答案: