What are the steps to refresh the content in a glightbox slider?

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>

Answer №1

Your plugin is generating separate elements for images and descriptions that are dynamic, so you cannot modify them directly. Currently, there are two buttons with the same ID; one is created statically, and the other is created by the plugin. This is why when you use

document.getElementById(clicked_id).innerHTML ..
, the static button's content changes, and you can observe these changes in the slider without reopening it.

Instead of this approach, consider using data attributes. By updating both the statically created button and the dynamically generated button when a user clicks, you can see immediate changes without having to close and reopen the slider.

Demo Code :

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

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

function choose_button(clicked_id) {
  //loop through same data-ids
  document.querySelectorAll('[data-id="' + clicked_id + '"]').forEach(function(el) {
    //change text
    el.textContent = "button text changed"
  })

}
img {
  width: 50px;
  height: 100px
}
<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="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>

<!-- 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="https://biati-digital.github.io/glightbox/demo/img/large/gm2.jpg" class="glightbox2" data-glightbox="title: Description Right; description: .custom-desc1; descPosition: left;">
                <img src="https://biati-digital.github.io/glightbox/demo/img/large/gm2.jpg" alt="image" />
              </a>

              <div class="glightbox-desc custom-desc1">
                <p>
                  <!--pass data-id-->
                  <button data-id="button1" onclick="choose_button(this.getAttribute('data-id'))">Choose 1</button></p>

              </div>
            </div>
          </li>
          <li class="box">
            <div class="inner">
              <a href="https://biati-digital.github.io/glightbox/demo/img/large/gm5.jpg" class="glightbox2" data-glightbox="title: Description Right; description: .custom-desc2; descPosition: left;">
                <img src="https://biati-digital.github.io/glightbox/demo/img/large/gm5.jpg" alt="image" />
              </a>

              <div class="glightbox-desc custom-desc2">
                <p>
                  <!--pass data-id-->
                  <button data-id="button2" onclick="choose_button(this.getAttribute('data-id'))">Choose 2</button></p>

              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain the appropriate selection in the dropdown based on the model in Angular

I am working on a dropdown menu that contains numbers ranging from 1 to 10. Below is the HTML code for it: <div class="form-group"> <label>{{l("RoomNumber")}}</label> <p-dropdown [disab ...

Ways to retrieve interface definition using a variable

I have an interface that organizes various states together export interface ScanFiltersStatePage1 { keywords: SensitiveInfoFileKeywordFilter categories: string[] classifications: string[] fileTypes: string[] infotypes: string[] regulations: str ...

Retrieving every item from an unnumbered inventory in PHP

I have a list of tag clouds: <ul #id = "tag-cloud-list"> <li class = "items">Music</li> <li class = "items">Lion</li> <li class = "items">Dwarf</li< </ul> This tag cloud list was generated using ...

Is it possible to create a development build using Npm with React and Typescript?

I have successfully set up a TypeScript React app by using the command below: npx create-react-app my-app --template typescript However, running "npm start" generates development javascript files and launches a development server which is not id ...

The file input modification event is disregarded if the identical filename is selected for upload

In my Vue.js application, I am utilizing Vuetify's v-file-input component. The file uploaded is connected to formData.file and its validation is controlled by the rules prop. <v-file-input :rules="fileValidationRules" v-model="fo ...

What is the best way to implement lazy loading for headless UI Dialog components in a React

Is there a way to implement lazy loading for the headless ui Dialog component while preserving transitions? Below is the current implementation that almost works: // Modal.js const Modal = ({ isOpen }) => { return ( <Transition show={isOpen ...

How can the CORS issue be resolved when sending a form from a client to an AWS API gateway function?

Within my front end React application, I am looking to implement a contact form that will submit data to a Lambda function via an API Gateway with a custom domain attached. The frontend operates on the domain dev.example.com:3000, while the API Gateway is ...

Easily accessible jQuery tabs with the option to directly link to a specific tab

I currently have tabs set up on my webpage. The code for these tabs is as follows: $('ul#tabs li a').click(function(){ var id = $(this).attr('id'); var counter = 1; $("ul#tabs a.current").removeClass('cur ...

Transitioning from using lerna to adopting pnpm

We are in the process of transitioning our project from Lerna to PNPM and we currently have a script that we run. Here are the commands: "postinstall": "npm run bootstrap" "bootstrap": "lerna bootstrap --hoist", &quo ...

Having trouble understanding how to display an HTML file using Next.JS?

Currently, I am working on a project that involves utilizing Next.JS to develop a webpage. The main goal is to display a PDF file on the left side of the screen while integrating Chaindesk on the right side to create a chat bot capable of extracting inform ...

Dividing Javascript code in bs4 using Python

I've encountered some challenges when attempting to extract Javascript values from a bs4 code. The javascript snippet appears like this: <script type="text/javascript"> var FancyboxI18nClose = 'Close'; var FancyboxI18nNext = 'Ne ...

Verify whether the user is obstructing third-party domain

I've encountered a recurring issue where many of our support calls pertain to images not loading due to users blocking Amazon S3 or a similar third-party service. I rely on third-party services for hosting images, videos, and certain JavaScript elemen ...

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Example Please take a look at this Plunkr example. Requirement I am looking for a way to retrieve an element by its id. The provided code should be capable of applying a CSS class to any existing DOM element within the current view. This functionality ...

Troubleshooting a JSF graphicImage onclick issue

Have you ever visited websites that have internationalization flags you can click on to switch languages? That's the functionality I'm trying to achieve using JSF tags. UPDATE: When I click on the language icon, nothing happens. Below is the xh ...

How can you identify when an input value has been modified in Angular?

For my current project, I am developing a directive to be used with a text input field in order to format currency input. This directive has two HostListeners - one for when the input loses focus and one for when it gains focus. When the blur event occurs, ...

Node responds with a 404 error upon receiving the post request

I am facing an issue with my jQuery code. Here is what I have: $.ajax( { type: 'POST', data : mydata, url : '/routerfunction', dataType : 'String', success : function(data) ...

What is the significance of storing a JSON Web Token (JWT) in memory, and what is the process of accomplishing this

Learning about JWTs has been quite the journey. People keep emphasizing not to store it in cookies or local storage, which makes sense. But hearing that I should store it in memory just leaves me scratching my head. Imagine making a fetch request with Jav ...

Issues with the event firing in the Polymer component for google-signin?

I recently set up a new starter-kit project using polymer-cli 1.7 and I'm attempting to incorporate Google authentication utilizing the google-signin element. Although the sign in button appears and works for signing in, the signedIn property isn&apo ...

typescript unconventional syntax for object types

As I was going through the TypeScript handbook, I stumbled upon this example: interface Shape { color: string; } interface Square extends Shape { sideLength: number; } var square = <Square>{}; square.color = "blue"; square.sideLength = 10; ...

Is there a way to render an image onto a canvas using an input tag?

Looking to create an image preview using canvas? Upload the image with the input tag and watch it display on canvas. I've experimented with various methods such as using img tags, setting img src for canvas using img tags, and trying onclick function ...