Woo pictures in description

Dear members,
Could use some help.
Rebuild a website with BB, BB theme and UABB all pro versions.
However in the descriptions of all products there are pictures for extra explanation of the product.
These pictures open in a different frame, so not in a popup like normal.
Is there a way, filter, css snippet or something to realize that they open correct in a nice woo popup?
Apriciate all the help i can get, wkr jack

An example url;
https://braziliantobaccosnuffs.com/product/rape-parika-katukina/

You insert those images in the text editor, in backend, right?
If so, you should be able to link them to the original image, that’s a regular WP feature.
Then, in frontend, clicking them should open them in BB theme lightbox if it’s enabled (customizer).

[UPDT 1] Actually, your images already are linked to their original files.
Did you enabled BB lightbox feature in the customizer?

[UPDT 2] It seems BB lighbox is enabled on your site as we can see on this page by clicking images: https://braziliantobaccosnuffs.com/about-rape/
So, something’s not working with the images from the WC section.

[UPDT 3] I tried to add “lightbox” or “magnific” to the image rel field with no luck, it seems an image added to a WC product description (text editor) is not handled by BB lightbox feature.

Then you can use a 3rd party lightbox plugin.
For instance, this free one works for images in WC products description (and the rest of the site of course): https://fr.wordpress.org/plugins/responsive-lightbox/

Hi Avanti
First things first, thanks for the respons and time you put into it.
I think I put in a ticket because its bs to have to install a 3th party plugin for this.
The website is not mine, so to install something I have to ask and explain.
personaly I wouldnt be to keen on it, this has to be handled by the theme.
so again thanks and if the team of BB comes with a solution I will post it here.
wkr jack

Update:
Got word from the BB theme, they blame it on woocommerce.
So I solved it with the plugin suggested in the answers of avanti.
Hereby solved.

Hi Jack,
Yeah, a bit frustrating to have to deal with these little quirks.
It seems WooCommerce has it own lightbox module for the product featured images, so it’s weird it doesn’t handle also images inserted in the description.
And maybe it conflicts with BB lightbox too(?)

Hi again,
This hack could work without installing an additional lighbox plugin:

1 - Set a lightbox class on the image link:
Text editor > Image details > Advanced options > Link CSS class

2 - Add this JS to the site:

/* Open image in Magnific Popup based on the link class */ 

jQuery(document).ready(function($) {
    $('.lightbox').magnificPopup({ 
        type: 'image', 
        closeBtnInside: false,
        
    });
});

Hey avanti,
Thanks, but do I need to add this hack to every image?
Wkr

You’ll need to add the custom lightbox class to each image added to a product with text editor, yes.
Or extend the JS to target every image in that area.

Here’s the extended JS: it detects image links in WooCommerce description field and triggers the lightbox, no need to manually add the class.

/*---------------------------*/
/* Open WooCommerce description field images in Magnific Popup */ 
/*---------------------------*/

jQuery(document).ready(function($) {
    
    // Add class to WC description field image links
    $('.woocommerce-Tabs-panel--description').find('a').has('img').addClass('lightbox');
    
    // Trigger Magnific Popup based on the link class
    $('.lightbox').magnificPopup({ 
        type: 'image', 
        closeBtnInside: false,
    });
    
});

Great, I will present this code to my friend and further action would be on his behalve.
I really thank you for the effort you put into this.
Must say good help here on this forum.
So with kind regards jack

Hi Emmanuel,
copied the code into the staging site and it works perfect.
Its upto the owner to decied if the code goes into the live invirement, for me yes it saves one plugin.
Thank you for this great solution.
wkr Jack from Holland

The code has been pasted into the original site and works perfect, again my thanks wkr

Nice, i’m glad you adopted it :grin: