Custom jquery code not working inside the popup box

[r-interactive]

Hello,

I have a list inside the popup box, and I have some custom js code added. I am using the inline element (text content inside the popup box). The code will loop through all the list items and add the classname 'active' to one of the item every 4 seconds.
The first item has the 'active' classname, after 4 seconds, the classname gets removed from the first one, and the 'active' classname gets added to the 2nd list item, etc...
The code below is not working when the list is inside the popup box. However, the code is working if the list is outside the popup box.
Why isn't my jquery code isn't working when I target the content inside the popup box?

The HTML list inside the popup:

<ul class="test-list-1">
<li class="test active">List item 1</li>
<li class="test">List item 2</li>
<li class="test">List item 3</li>
</ul>

my jquery code::

(function($){

  function cycle(){
     var items = $('.test-list-1 li');
     var i = 0;
     setInterval(function () {

          items.removeClass('active').eq(i).addClass('active');
          i++;
         
           if (i >= items.length ) {
               i = 0;
           }

     }, 4000);

  }

  cycle();
})(jQuery);

[gingerchew]

It sounds like you're using the inline slide. The thing to remember about how GLightbox works, the HTML that is being used for inline slides isn't used. It is copied.
So when the page loads and you use $('.test-list-1 li') it only sees the one on the page.

When you open the lightbox, it copies that HTML and inserts that into the slide.

There are a few solutions to this problem, the one I would suggest is using the events that are offered by GLightbox.

const lightbox = GLightbox();

lightbox.on('slide_load', () => {
  // set up your cycle function loop
})

Since we're only running the function after the lightbox is open and loaded, your snippet will see the items in the slide.

Things to look out for:

1. .test-list-1 li is a pretty generic selector for this instance. You will probably want to scope it to the lightbox wrapper element, that way it won't also loop through the list items hidden on the page.
2. You gotta clean up your interval after the lightbox is closed.

let intervalHandle = null;

lightbox.on('slide_load', () => {
  if (intervalHandle !== null) {
    clearInterval(intervalHandle);
    intervalHandle = null;
  }
    
  intervalHandle = setInterval(/* ... */);
});

lightbox.on('close', () => clearInterval(intervalHandle));

This prevents memory leaks from happening.