Lightbox does not work on images loaded via Ajax

It is not enough just to add new linked images. The image links also need to have all the attributes which are usually added by the filter on the server side. The site for which the Ajax support was added uses Ajax to load parts of a post which is normally hidden when loading it initially – but the content is exactly as it would be if the post was loaded fully.

If you add single linked images using Ajax you need to add the attributes to the image links which usually get added server side by a filter of the lightbox plugin. data-lbwps-width is the widht in pixels, data-lbwps-height is the height in pixels and data-lbwps-handler initialized with value 0, so the plugin knows that the frontend handler was not added yet.

For example – this is how the added image code needs to look like – of course with the correct values of the image and not 1920*1080:

<a href="image-url-big" data-lbwps-width="1920" data-lbwps-height="1080" data-lbwps-handler="0">
  <img src="image-url-preview" />
</a>

The width/height is mandatory since the frontend script can not determine the size of the image which is refered in the link but PhotoSwipe needs to know the size before the lightbox will be opened. The plugin uses the PHP function getImageSize() to get the size of the image – also see https://www.php.net/manual/function.getimagesize.php.

Edit: the HTML code does not need to be exactly as shown above – it’s only important that that image inside a link and that the data-attributes are part of the link tag.

• This reply was modified 3 years, 3 months ago by Arno Welzel.
• This reply was modified 3 years, 3 months ago by Arno Welzel.

Thank you very much ??.
I did a quick test and the lightbox works.
Now I need to implement attributes properly. Either via Javascript setAttribute or extend the existing Gutenberg Gallery block. I don’t know yet…
That will be my next challenge ??

Just keep in mind, the the attributes need to exist before the images are added to the document. Adding the images first and then the attributes afterwards won’t work, because the DOM will not change by adding attributes and the lightbox can only react on DOM changes.

I did a terrible hack, but it works.

add_filter('the_content','new_content');
function new_content($content) {
    $content = str_replace('<figure><a','<figure><a data-lbwps-width="1000" data-lbwps-height="800" data-lbwps-handler="0" ', $content);
    return $content;
}

Thanks again!

Just keep in mind, that this hack only works, if your images are exactly 1000 pixels wide and 800 pixels high. Otherwise the images in the lightbox may look a bit strange.

And another point: this is, what the plugin already does. It scans the content for image links and adds the attributes if needed (after determining the image meta data etc.). The interesting question is, why this needed in your case and why the images in your website don’t get the attributes anyway. Maybe we have a bug here.

• This reply was modified 3 years, 3 months ago by Arno Welzel.
• This reply was modified 3 years, 3 months ago by Arno Welzel.

Thank you for your answer.
I noticed one more thing. Lightbox does not work on Custom Post Types. In this case, it is called a “produkt”.

function produkt_post_types()
{
    register_post_type('produkt', array(
    	'show_in_rest' => true,
        'public' => true,
        'supports' => array('title', 'editor', 'thumbnail'),
        'rewrite' => array('slug' => 'produkty'),
        'has_archive' => true,
        'public' => true,
        'labels' => array(
            'name' => 'Produkty',
            'add_new_item' => 'Add New Produkt',
            'edit_item' => 'Edit Produkt',
            'all_items' => 'V?echny Produkty',
            'singular_name' => 'Produkt'
        ),
        'menu_icon' => 'dashicons-pressthis',
    ));
}
add_action('init', 'produkt_post_types');

• This reply was modified 3 years, 3 months ago by Ivan.

Custom post types should not be problem at all.

Technically it makes no difference if the plugin runs on “page” or “post” or any other post type. In fact there is even a setting if the plugin should not be active for certain post types to avoid using it there if you don’t want it – because by default it will be used for any post type.

If it does not work for you, you may have another issue – maybe not handling the output buffer correctly or changing the order of content filters? Already added a setting to only use it posts and pages and forgot that?

I can’t reveal the website on which I use custom post types myself here, but if you contact me via e-mail (see my website https://arnowelzel.de), I can show you working live website using Lightbox with PhotoSwipe and PODS to create custom post types for a movie program which is presented on the website including a filter for days, categories etc..

Thank you very much for your help.
I tried the PODS plugin for CPT and created a simple Gutenberg gallery, but even in this case it didn’t work. So it means that you are probably right and the problem will be hidden somewhere else. I just don’t know where …
In my opinion, my theme is not complicated at all. In functions.php I have only a few basic things:

<?php

function thalia_files()
{
    wp_enqueue_style('main_styles', get_theme_file_uri('/build/style-index.css'), NULL, time(), 'all');  // , NULL, time(), 'all' - jen pro Development
    wp_enqueue_style('custom-google-style', 'https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500;600;700;800;900&display=swap');
    wp_enqueue_script('main_js', get_theme_file_uri('/build/index.js'), NULL, microtime(), true);
    wp_localize_script('main_js', 'thaliaData', array(
        'site_url' => esc_url(site_url()),
        'nonce' => wp_create_nonce('wp_rest')
    ));
}

add_action('wp_enqueue_scripts', 'thalia_files');

function thalia_features()
{
    add_theme_support('title-tag'); 
    add_theme_support('post-thumbnails');
    add_image_size('hero-post', 1920, 550); 
    add_post_type_support('page', 'excerpt');
    add_image_size('nahledy', 400, 300, true);
}

add_action('after_setup_theme', 'thalia_features');

And in Photoswipe settings is my CPT in “Available post types on this site:”

Now I remember having a similar problem on another website where I had CPT and Photoswipe Lightbox. It all worked well, but about a year ago it stopped working, I still don’t know why …
I would like to solve this problem because this is my favorite Lightbox for WordPress.

I will try to contact you via email.

• This reply was modified 3 years, 3 months ago by Ivan.