I’ve created a lightbox function which loads over the top when a user clicks on a post link in the archive. The overlay needs to display images and short paragraphs of text in a slideshow style (with next and prev buttons), those fields are created with as Advanced Custom Fields flexible repeater.
I’m using JS to .append() a div to the body and I need to then query the post, by ID I guess, within my js to fetch the first value from that ACF repeater, then second, then third and so on, when the next/prev buttons are hit. I’m thinking that I could perhaps quickly grab an array of those values when the lightbox is loaded and then cycle through them, but am not sure where to start.
What I don’t want to do is simply .load() the post, headers and all, into the lightbox, just the images (and short peices of text) one at a time.
Any pointers greatly appreciated.
I’ve got around this issue by storing the information that I need in an array during the initial loop so that when the user clicks on the post I
.append()an overlay to the body and then create a slide for.each()of the nodes in that array. The information displayed in each slide is pretty minimal in this case, just an image or a single line of text so this solution works more efficiently than querying the database on each click or lightbox load.