lightgallery does not work on click

[bridgemove]

I want to run lightgallery on click, there is a solid reason so I want to run lightgallery on click function. The issue is that it works on second click not on first click. That's weired. I want it to work on first click always and on close it should close gallery. And on new click it should start new gallery lightbox. This is the code and it works as intended **but only issue is that it works on second click not on first click.
**

`

function run_gallery(_class, _class2, _class3){    	
   	var lightbox = jQuery('.'+_class);	
   	lightbox.lightGallery({
   		selector: '.'+_class3+_class2,
   		galleryId: 1,
   		subHtmlSelectorRelative: true
   	});
   	// lightbox.on("onCloseAfter.lg", function() {
   	//     lightbox.data('lightGallery').destroy(true);
   	// });	
   	if(lightbox.data('lightGallery')){
   		lightbox.one("onCloseAfter.lg", function() {			
   		    lightbox.off("onCloseAfter.lg") // <-- unbind
   		        .data('lightGallery').destroy(true);
   		        lightbox.data('lightGallery').destroy(true);
   		});
   	}
   }
   jQuery(document).on('click','.gt-gallery-box', function(){		    	
   	var cLick = jQuery(this).data('id');
   	var _class = 'gt-wrapper';
   	var _class3 = 'gt-gallery-box';	
   	var lightbox = jQuery('.'+_class);	
   	run_gallery(_class, cLick, _class3);		
   });

`

Any one there who can help me out what's wrong I am doing ??? Really wasted my time in this but it should be quiet simple but its not that easy for me at least ...

In short I want above my function to run on click each time but it runs on second click don't know why ? My light gallery starts only on second click ... any solutions please ???

Thanks

[bridgemove]

Any one there ??? :(

[cristianFryla]

@bridgemove same issue here! I tried the solution given by others users:

$('#btnVerFotos').on('click', function() {
$('.first-item').trigger('click');
});

and it opens the lightbox, but in less than a second it's close and the next error appears in the console:

Uncaught (in promise) TypeError: Document not active
    at c.exitFullscreen (lightgallery-all.min.js:4)
    at c.destroy (lightgallery-all.min.js:4)
    at Function.<anonymous> (lightgallery-all.min.js:4)
    at Function.each (jquery-3.2.1.slim.min.js:2)
    at b.destroy (lightgallery-all.min.js:4)
    at lightgallery-all.min.js:5
    at dispatch (jquery-3.2.1.slim.min.js:3)
    at q.handle (jquery-3.2.1.slim.min.js:3)

[douglasresende]

I solve this issue, adding a condition to verifier if document is fullscreen mode if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) { ... }

    Fullscreen.prototype.exitFullscreen = function() {
      if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    };

[bridgemove]

Then can you let me know what will be full code now ? Really thanks for that please.

[bridgemove]

Because I don't know how to use this code of yours ? As I already provided my code above so let me know how can I use yours with mine to make it working properly. Thanks for your entire help and time in advance.

[douglasresende]

Write this code into file modules/lg-fullscreen.js
Line: 82

    Fullscreen.prototype.exitFullscreen = function() {
        if (isFullScreen()) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        }
    };

[douglasresende]

The function isFullScreen() declared at line 29, returns same condition:

    function isFullScreen() {
        return (
            document.fullscreenElement ||
            document.mozFullScreenElement ||
            document.webkitFullscreenElement ||
            document.msFullscreenElement
        );
    }

[bridgemove]

Thank you very much for your quick response buddy. I will surely try it out and will let you know with any of the result.

Thanks once again ;)

[bridgemove]

So, the code you provided earlier I will replace that with line 82 with same code. Right ?

[douglasresende]

Yes!
My diff code:

diff --git a/modules/lg-fullscreen.js b/modules/lg-fullscreen.js
index 712b943..6d47eff 100644
--- a/modules/lg-fullscreen.js
+++ b/modules/lg-fullscreen.js
@@ -80,14 +80,16 @@
     };
 
     Fullscreen.prototype.exitFullscreen = function() {
-        if (document.exitFullscreen) {
-            document.exitFullscreen();
-        } else if (document.msExitFullscreen) {
-            document.msExitFullscreen();
-        } else if (document.mozCancelFullScreen) {
-            document.mozCancelFullScreen();
-        } else if (document.webkitExitFullscreen) {
-            document.webkitExitFullscreen();
+        if (isFullScreen()) {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.msExitFullscreen) {
+                document.msExitFullscreen();
+            } else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen();
+            } else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen();
+            }
         }
     };

[douglasresende]

If you use just the file dist/js/lightgallery-all.js, replace the code at line 1654:

    Fullscreen.prototype.exitFullscreen = function() {
        if (isFullScreen()) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        }
    };

[bridgemove]

Surely I will tey it by tomorrow and will update you with its behavior.

[cristianFryla]

@douglasresende tks for your help. Unfortunately it didn't solved my problem... I mean, the console error that said "Uncaught (in promise) TypeError: Document not active" it's solved actually! But my original problem that "it opens the lightbox, but in less than a second it's close" still the same. If I open the lightbox in a traditional way (just click on the image) it works just fine. Any other idea? Tks you in advance!

[douglasresende]

I'm sorry! My code solve other issue (the same error, but trying close the gallery)
Can you post a example code to reproduce the error and try help you?

[cristianFryla]

Yes of course and tks you again! I create an example of the error in this link:

https://www.fryla.com.ar/cliOcampo/testForGithub

with this code:

<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="icon" href="img/favicon/favicon.ico">
	
	<title>Test</title>
	<link href="css/bootstrap.css" rel="stylesheet"> 
	<link href="css/custom.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet"> 
	
	<!-- OWLCARROUSEL ================= -->
	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/owl.theme.default.min.css">
	
	    <!-- LIGHTBOX ================= -->
	<link href="css/lightgallery.css" rel="stylesheet"> 
</head>
<body>
<div class="container-fluid border-bottom-azul padding-clear margin-clear position-relative" >
		<div class="row">
			<div class="col">				
				<div class="owl-carousel owl-theme owl-loaded owl-drag border-bottom-azul owl-ficha">
					<div class="owl-stage-outer">
						<div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 2376px;" id="lightgallery">
							
							<div class="owl-item active" style="width: 178px; margin-right: 20px;">
								<div class="item">
									<a href="https://static.tokkobroker.com/pictures/110278015352062423560285832462412309163408043693891742681499518729218158175465.jpg" class="item-galeria" id="first-item">
										<img src="https://static.tokkobroker.com/pictures/110278015352062423560285832462412309163408043693891742681499518729218158175465.jpg" class="img-fluid "/>
									</a>
								</div>
							</div>

								<div class="owl-item" style="width: 178px; margin-right: 20px;">
									<div class="item">
										<a href="https://static.tokkobroker.com/pictures/12367439981727170491841852952246920129923528545192331791027280725907064922443.jpg" class="item-galeria">
											<img src="https://static.tokkobroker.com/pictures/12367439981727170491841852952246920129923528545192331791027280725907064922443.jpg" class="img-fluid"/>
										</a>
									</div>
								</div>

						</div>
					</div>
				</div>
			</div>
		</div>
			
		<div class="container position-absolute container-share">
			<div class="row">
				<div class="col">
					<a href="#" id="btnVerFotos" class="pull-right btn btn-white txt14">Ver Fotos <i class="fa fa-angle-right ml-5"></i></a>
					<a href="#"id="btnShare" class="pull-right btn btn-white shadow txt14  mr-10"><i class="fa fa-share-alt mr-5"></i>Compartir</a>
				</div>
			</div>
		</div>
	</div>

	<!-- Bootstrap core JavaScript ================= -->
	<script src="js/jquery-3.2.1.slim.min.js"></script>   
	<script src="js/popper.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	
	<!-- LIGHTBOX ================= -->
	<script src="js/lightgallery-all.js"></script>
	
	<!-- OWLCarrousel ================= -->
	<script src="js/owl.carousel.min.js"></script>
	
	
	<script>
		$(document).ready(function(){    
			$('#lightgallery').lightGallery({
				selector: ".item-galeria",
				thumbnail:true,
				animateThumb: false,
				showThumbByDefault: false
			}); 
		});
	</script>
	
	<script>
		$('#btnVerFotos').on('click', function() {
			$('#first-item').trigger('click');
		});
	</script>


</body>
</html>

[cristianFryla]

Note that if you click any of the photos, it's working fine. But when you click the button ("Ver fotos") ... the one second open/close ocurrs =S

[douglasresende]

It's simple to solve. Just call the method event.preventDefault(); into the 'click' function.
Example:

      $('#btnVerFotos').on('click', function(event) {
        event.preventDefault();
        $('#first-item').trigger('click');
      });

https://codepen.io/anon/pen/vbwxBv?editors=1000

[cristianFryla]

Can't believe myself (face palm by 10), so obvious... I forgot the Ockham Razor principle!!
Tks you very much douglas, I owe you one.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If the issue is still valid for version 2.x, please re-open. Apologize for not responding on time. Thank you for your contributions.