I'm currently utilizing Glightbox to set up a gallery that includes descriptions for images. I have a specific request where I want the button text to update on click. However, when the button is clicked and the lightbox reopens, the text on the button changes. How can I change the text on the button without having to reopen the lightbox?
If you need more insights into Glightbox, you can refer to the documentation 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)">Choose 1</button></p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/animejs@latest/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', () => {
// Perform an action
lightboxDescription.reload()
});
function choose_button(clicked_id){
document.getElementById(clicked_id).innerHTML = "Changed button text";
}
</script>
</body>
</html>