jquery code not working for content inside the popup box

[r-interactive]

Hi,

I have a list inside the popup box and I want to loop through the list and toggle the classname 'active' every 4 seconds. So, first item is active, after 4 seconds, the first item class 'active' is removed, class 'active' is added to the second list item, etc... The code below is working when the list is outside of the popup box, but when the list is inside the popup box, the custom jquery code isn't working. What is the issue?

HTML:

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

jquery:

(function($){

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

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

     }, 4000);

  }

  cycle();
})(jQuery);

[gingerchew]

The issue is with your jQuery code. It runs as soon as possible. The GLightbox html only appears after a trigger is clicked. You can use some of the events in the docs to do what you’re trying to do at the right time.