jquery trigger('click') works only once
Question
I'm trying to customize a jQuery lightbox plugin called 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 )
$(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>
3 answers
solution1
2 ACCPTED 2016-04-02 03:09:13
LightGallery needs to be destroyed and initialized again
To destroy LightGallery use this code $lg.data('lightGallery').destroy(true);
source : https://github.com/sachinchoolur/lightGallery/issues/238#issuecomment-161020492
$(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>
solution2
1 2016-04-03 06:38:33
You are not destroying LightGallary the right way.
Use this for ' onCloseAfter.lg ' event:
$lg.on('onCloseAfter.lg', function(event) {
$lg.children().remove();
$lg.toggle();
//$lg.lightGallery().destroy(true);
$lg.data('lightGallery').destroy(true);
});
solution3
0 2016-04-02 02:39:57
I quickly looked through your code and saw you are loading dynamic data Try even delegation , https://learn.jquery.com/events/event-delegation/ The problem is that at the moment of the event binding , not all the "a" elements really existing to bind event on it
Your trigger event should be something like
$(document).on('click','#someId a:first-child',function(){
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.