How to update content of glightbox slider?

  ajax, javascript, lightbox

I’m using Glightbox to create gallery with images description.
I would like to update text of button on click.
When button is clicked and lightbox is reopened text on button is changed.
How to change text on button without reopening a lightbox?

Glightbox documentation can be found here

        <!DOCTYPE html>

            <head>
                <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" />
                <link
                    rel="stylesheet"
                    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
                    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
                    crossorigin="anonymous"
                />
                <link rel="stylesheet" href="demo/css/style.css" />
                <link rel="stylesheet" href="dist/css/glightbox.css" />
                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
            </head>

            <body>

                <!-- Images with description example -->
                <section class="section pair">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <ul class="box-container three-cols">
                                    <li class="box">
                                        <div class="inner">
                                            <a href="demo/img/large/gm8.jpg" class="glightbox2" data-glightbox="title: Description Right; description: .custom-desc1; descPosition: left;">
                                                <img src="demo/img/small/gm8.jpg" alt="image" />
                                            </a>

                                            <div class="glightbox-desc custom-desc1">
                                                <p>
                                                    <button id="button1" onclick="choose_button(this.id)">Wybierz1</button></p>
                                               
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>
            
                <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
                <script src="demo/js/valde.min.js"></script>
                <script src="dist/js/glightbox.js"></script>
                <script src="demo/js/site.js"></script>
                <script>
                

                    var lightboxDescription = GLightbox({
                        selector: '.glightbox2',
                    });

                    lightboxDescription.on('close', () => {
                    // Do something
                    lightboxDescription.reload()
                });


                function choose_button(clicked_id){
                document.getElementById(clicked_id).innerHTML = "button text changed"

            }

            </script>
        </body>
    </html>

Source: Ask Javascript Questions

LEAVE A COMMENT