Lightbox (PhotoSwipe) does not recognize newly loaded images after "Load More" in Query Loop

How To
1

How can I re-initialize the built-in PhotoSwipe lightbox after dynamically loading (or revealing) more images in a Bricks Query Loop?

My Goal is to build something like this. after clicking a “See All” (Load More) button, the rest of the images in the loop gets loaded but not visible because i added display none.

image
image1195×429 72.1 KB

I only want to show all the images in the Lightbox. unfortunately this does not load the images after clicking

1 Like
2

Im currently on my phone so I can’t look it up myself, but there is a function called something like bricksRunAllScripts inside the frontend.js or whatever it is called. You could call it whenever the Ajax event fires (you can read about these in the documentation). This might work.
Cheers Suat

1 Like
3

Hey, thanks a lot. I tried that, but the function doesn’t seem to exist “undefined”.
I didn’t find anything in the Academy either…

May I ask you to send me the link to the documentation?
or do you have any other ideas?

Thanks :slight_smile:

4

So after testing it a bit, it seems to be not possible, since the lightbox instances that the bricksPhotoswipe() function creates, aren’t stored in a global variable or a publicly accessible data structure.

And even if they were, I’m not sure that it’ll work since the documentation of PhotoSwipe suggests, that a destroyed instance can’t be reinitialized.

Maybe you can create another Thread as a Bug-Report. For me it kind of worked, but only if I did in fact click on a newly loaded image. When clicking on an image that was there before the ajax request, the newly added images weren’t part of the slides.

This was my Elements Setup btw:

{"content":[{"id":"bgyvhp","name":"section","parent":0,"children":["atrkiv"],"settings":[]},{"id":"dwedgc","name":"block","parent":"atrkiv","children":["dibuel"],"settings":{"hasLoop":true,"query":{"posts_per_page":"3","ajax_loader_animation":"default"}}},{"id":"dibuel","name":"image","parent":"dwedgc","children":[],"settings":{"image":{"useDynamicData":"{featured_image}","size":"large"},"link":"lightbox","lightboxId":"test"}},{"id":"prxhxx","name":"button","parent":"atrkiv","children":[],"settings":{"text":"Load more","style":"primary","tag":"button","_interactions":[{"id":"bkxbjp","trigger":"click","action":"loadMore","loadMoreQuery":"dwedgc"}]}},{"id":"atrkiv","name":"container","parent":"bgyvhp","children":["dwedgc","prxhxx"],"settings":{"_display":"grid","_gridTemplateColumns":"repeat(3,1fr)","_gridGap":"30"}}],"source":"bricksCopiedElements","sourceUrl":"https://testsite.local","version":"2.0.1","globalClasses":[],"globalElements":[]}

Best Regards
Suat

1 Like
5

You may try this

// or 'bricks/ajax/popup/loaded' event
document.addEventListener('bricks/ajax/query_result/displayed', (event) => {
	const queryId = event.detail.queryId;
	if ( queryId !== 'YOUR TARGET QUERY ID' ) return;
	
	setTimeout(() => {
		bricksPhotoswipe();
	}, 260)
});

Exactly as @SuatB mentioned. Bricks doesn’t expose PhotoSwipe instances the way Splide does. If you want full control of lightbox, there is BricksFunction class constructor you can use to initialize your own PhotoSwipe and expose the instance globally.

2 Likes
6

Thank you very much! I’ll test it after my vacation. :desert_island:

1 Like
7

How is your vacation doing? :wink: i have stumbled over the same problem and couldnt find a solution