Creating a lightbox instance without links

[RightView]

Hi!

I'm using Chocolat because it is so beautiful, simple, easy to use, and provides clean, clear fullscreen images. I'm not an advanced coder, so I'm having trouble with something that probably has a really simple solution, but I can't find any answer in the documentation:

I'd like to use a container that starts off with the first image.

I can use links (12345 below) to open the lightbox in my container, no problem, but I want the first image to be shown in the container without the user having to click on anything to instanciate it.

I tried using the Option 'firstImageIndex' but the container still just starts as a grey box, without any image inside until one of the links is clicked.

How do I do it, please? Thanks! :-)

`

Doodles

<a class="chocolat-image" href="Chocolat-1.0.4/doodles/5.jpg" title="chef"> 1 </a>

<a class="chocolat-image" href="Chocolat-1.0.4/doodles/1.jpg" title="elf"> 2 </a> 

<a class="chocolat-image" href="Chocolat-1.0.4/doodles/2.jpg" title="helf"> 3 </a>

<a class="chocolat-image" href="Chocolat-1.0.4/doodles/3.jpg" title="bird"> 4 </a> 

<a class="chocolat-image" href="Chocolat-1.0.4/doodles/4.jpg" title="face"> 5 </a>      
                                
                            </div>
                        </ul>
                    

<!-- container for doodles Gallery, with relative width -->



                                <div id="GalleryBox" style="width: 60%; max-width:1000px; height: 255px; background: #E0E0E0; margin:auto;">
                                </div>
                       </br></br>    

    <script>
        // lightbox options
       

        Chocolat(document.querySelectorAll('#doodles .chocolat-image'), {
            container: document.querySelector('#GalleryBox'),
            loop: true,
            imageSize: 'scale-down',
            firstImageIndex: 1

})

    </script>`

[nicolas-t]

Hello @RightView

Can you try like this :

// lightbox options

const { api } = Chocolat(document.querySelectorAll('#doodles .chocolat-image'), {
    container: document.querySelector('#GalleryBox'),
    loop: true,
    imageSize: 'scale-down'
})

api.open()

[RightView]

Thank you so much, that is perfect. I was hesitant to use 'api' because I didn't know what it was, but now I see it is very simple and just works. I am very grateful!