Search code examples
javascriptphoto-gallerylightgallery

How to make lightgallery enter full screen mode with code?

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>

Solution

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