How to make lightgallery enter full screen mode with code?

Question

I want to make lightGallery ( https://github.com/sachinchoolur/lightGallery.git ) automatic enter full screen mode with a function call.
But I can't find the way to make it work.
Please help me.

Here is my code

 $("#preview").lightGallery({ fullScreen: true }); // TODO: I want automatic enter full screen mode by code here ( same with click on thumbnail image ) console.log('I want automatic enter full screen mode here');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lightgallery.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/js/lightgallery-all.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lg-fullscreen/1.1.0/lg-fullscreen.min.js"></script> <div id="preview"> <a href="https://sachinchoolur.github.io/lightgallery.js/static/img/1.jpg"> <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-1.jpg"> </a> </div>

Answer 1

If you want the image to open automatically on page load, you can accomplish it by adding an id attribute to the img element & a click event to it like so:

HTML:

<div id="preview">
  <a href="https://sachinchoolur.github.io/lightgallery.js/static/img/1.jpg">
    <img id="gallery" src="https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-1.jpg">
  </a>
</div>

JS:

$("#preview").lightGallery({
    fullScreen: true
});

$('#gallery').click()

You can check this working code sample .