【发布时间】：2016-04-01 09:34:31
【问题描述】：
我正在尝试自定义一个名为 LightGallery 的 jQuery 灯箱插件以实现以下结果：
1- 使脚本从文件夹中获取所有图像，使用索引增量作为图像路径；
2- 单击另一个元素后打开灯箱。
问题是：
插件只打开一次灯箱！。
我第一次使用trigger('click') 触发它，但是在关闭它并尝试再次单击以重复它之后它不起作用。
插件看起来已损坏，并且只打开一张图片！
我希望它在每次单击目标元素时打开灯箱。
这是我的尝试：(Pen here)
$(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();
});
});
});<!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>【问题讨论】：
标签： javascript jquery lightbox lightgallery