CODEWITHSUNDEEP
javascriptjquerywordpresslightboxwebflow
Jana Lux
Jana Lux

Reputation: 167

Javascript code to dynamically navigate between Lightbox images

I would appreciate some help with a problem I can't solve myself. I build all my sites in Webflow but then often convert them to a wordpress theme, using ACF Pro, to make it dynamic and flexible.

In Webflow I want to build my own Lightbox Gallery and then use the html and css elements to connect them with an ACF Repeater field so that you can add as many images to the gallery/lightbox as needed.

I know how to build the thumbnails and add Webflow interactions to them so that a module will open, and I know how to convert the code so that it works with the ACF repeater field. What I am struggling with is the navigation between modules once the Lightbox/module is open. Of course, when I add interactions in Webflow to the 'next' and 'previous' buttons, they work fine (closing current module, opening next or previous module) but with that approach I basically add an interaction to each Next and Previous Button on each module individually, always targeting a specific next or previous module. So that approach is obviously not dynamic and doesn't work anymore once I add an ACF repeater field, since the next/previous button was targeting a specific element/div. So that way I would be stuck with a certain amount of images in my gallery/lightbox since I can't get the navigation to work dynamically.

This is my html for one Lightbox Item (I am using divs with background images for the thumbnail and module images and a div with text for the previous and next 'buttons'). And the 'lb-item-div' is basically the main element I would use for the ACF repeater field.

<div class="lb-item-div">
        <a data-w-id="a6f46f3f-78f0-5b97-00fb-07882bd092bf" href="#" class="thumbnail_lb w-inline-block"></a>
        <div style="display:none;opacity:0" class="module">
          <div class="prev_wrapper">
            <div>Prev</div>
          </div>
          <div data-w-id="8806232c-0412-ccf0-a7a3-bda445f5d360" class="lb_big"></div>
          <div class="next_wrapper">
            <div>Next</div>
          </div>
        </div>
      </div>

Is there any custom code I can add to the next and previous divs, so that it will close the current module and open the next/previous module dynamically?

Upvotes: 0

Views: 335

Answers (1)

Phil Veloso
Phil Veloso

Reputation: 1126

You can create a unique div id based on the loop index to target each repeater element and your lightbox javascript code to switch the view.

https://twig.symfony.com/doc/3.x/tags/for.html#the-loop-variable

Upvotes: 0

Related Questions