Showing image title in lightbox

Hi,

Thank you for using Enfold.

Looks like you’re using a third party plugin to display the product or the gallery images. The plugin has to render the link’s title attribute, so the lightbox can use it. That attribute is missing. Please try this in the functions.php file.

add_action('wp_footer', 'ava_add_lightbox_title', 9999);
function ava_add_lightbox_title() {
    ?>
    <script>
        (function($) {
            function a() {
                $('.upcp-tabbed-image-container a').each(function() {
                    var title = $(this).find('img').attr('alt');
                    $(this).attr('title', title);
                });
            }

            a();
        })(jQuery);
    </script>
    <?php
}

Best regards,
Ismael

Hi,

The above script gets the ALT attribute of the image inside the links and then apply it to the link itself thus enabling the lightbox to render the title. Unfortunately, some of the images don’t have an ALT attribute, so I had to get the data from the “data- ulbtitle” attribute. Again, this is not consistently available among the gallery thumbnails. How do the plugin set that attribute? You may need to edit the attributes of the images in the Media > Library panel.

Best regards,
Ismael

Hi,

Thanks for the update.

https://www.kistefosmobler.no/kistefos-produkter/product/heldekkende-maling/

The first thumbnail’s (Kveldshimmel_S5010-R90B) data-ulbtitle attribute is set, but the same attribute is empty on the rest of the thumbnails. The following code is the actual markup of the second thumbnail (Timian-S-6005-G80Y). As you can see, the “data-ulbtitle” attribute is empty and the image inside the link tag doesn’t have an ALT attribute. The script above requires the alt or the data-ulbtitle attribute in order for the lightbox script to render the title.

<a class="upcp-thumb-anchor  lightbox-added" href="https://www.kistefosmobler.no/wp-content/uploads/2018/08/Timian-S-6005-G80Y.jpg" data-ulbsource="https://www.kistefosmobler.no/wp-content/uploads/2018/08/Timian-S-6005-G80Y.jpg" data-ulbtitle="" data-ulbdescription="" title="" style="position: relative; overflow: hidden;"><img src="https://www.kistefosmobler.no/wp-content/uploads/2018/08/Timian-S-6005-G80Y.jpg" id="prod-cat-addt-details-thumb-654" class="upcp-tabbed-addt-details-thumb " onclick="ZoomImage(&quot;86&quot;, &quot;654&quot;); return false;"><span class="image-overlay overlay-type-image" style="display: none;"><span class="image-overlay-inside"></span></span></a>

For the masonry element, please edit the config-templatebuilder > avia-shortcodes > av-helper-masonry.php file and then look for this code around line 370:

$linktitle = 'title="'.esc_attr($the_title).'"';

Replace it with:

$linktitle = 'title="'.esc_attr($title).'"';

Best regards,
Ismael

Hi,

@guenni007: They’re using a third party plugin for the gallery. I don’t think it has the caption field but I could be wrong.

Best regards,
Ismael