Archived topic
dynamic image lightbox
7 replies · Started by Sam on June 10, 2022
Hi,
so I created a custom post type and a custom field image to go with that CPT.
To control the presentation, I'm using a GP Element-Block, Type : content template.
The issue:
I need the dynamic image in that content template to open in a lightbox on the front-end.
I'm using the responsive lightbox plugin and this is what they say about the problem.
In any situation where images come from different source than native WordPress post you have to apply lightbox manually:
for single images:<a href="full size image url" title="the title of the image" data-rel="lightbox">image thumbnail or text</a>
Is it possible to wrap these images with the required tag for the lightbox plugin?
Note: I'm using GP/GB pro.
Hi there,
Any chance you can link us to the page in question?
You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
Hello Leo,
of course, the linked site is just a playground because I'm working on the real site locally.
I've set it up exactly as my local website though, kindly take a look.
link 1: the images don't open in a lightbox due to the missing <a> and all the required attributes
link 2: the image works fine.
Both post images are block images.
Thank you.
Have you resolved the issue?
The link to your site has been erased automatically as the topic is marked as resolved.
Let me know :)
Not at all, I must've clicked on that button by mistake.
In fact, everything is on hold because I can't figure out how to solve this.
Please find the links in the private area.
Hi there,
You could hook this script into your site footer. It will open the lightbox when any gb-image-block links are clicked.
$(document).ready(function(){
$('.gb-block-image a').nivoLightbox();
});Might also be worth checking withe lightbox author if they have a filter for passing other selectors.
I worked!
just a quick update:
the $ threw $ not a function error I don't know why, switching to jQuery solved the problem though.
Leo, David, thank you so much for your help.
Yeah WP by default doesn't use the $ string in its jQuery.
You can do this:
jQuery(document).ready(function( $ ){
$('.gb-block-image a').nivoLightbox();
});