Skip Navigation

Home › Support › English Support › [Resolved] On the translated pages, a click on a lightbox doesn't work here

[Resolved] On the translated pages, a click on a lightbox doesn't work here

This thread is resolved. Here is a description of the problem and solution.

Problem:
If you're experiencing issues with lightbox functionality not working on translated pages, while it works on the original page, this might be due to a recent problem that has arisen.

Solution:
We recommend trying the following steps:
1. Ensure that the Simple Lightbox plugin's JavaScript code handles URLs correctly.
2. Modify the code in the file 

/wp-content/plugins/simple-lightbox/content-handlers/image/js/prod/handler.image.js/

by replacing the existing code with a new version that decodes HTML entities and encodes the URL properly.
3. If you're not comfortable making these changes yourself, please share this workaround with the Simple Lightbox plugin author and suggest they join our Go Global program, where our Compatibility developers will assist in making their product compatible with WPML.

For more details on the Go Global program, please visit: Go Global program.

If this solution doesn't seem relevant to your issue, please don't hesitate to open a new support ticket with us for further assistance: WPML support forum.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: ,

This topic contains 2 replies, has 2 voices.

Last updated by Long Nguyen 1 year, 5 months ago.

Assisted by: Long Nguyen.

Author Posts
December 1, 2023 at 7:04 am #14969085

bart

i have a problem with on the translated pages, a click on a lightbox doesn't work here, but it works on the original page.
December 1, 2023 at 8:12 am #14969803

Long Nguyen
WPML Supporter since 02/2022

Languages: English (English )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Hi,

I'm asking our 2nd tier support about this issue and I will update you here when I have something to share.

Thanks.
December 18, 2023 at 3:35 am #15080159

Long Nguyen
WPML Supporter since 02/2022

Languages: English (English )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Hi,

I got some info from our 2nd tier support, please check this below:

The URL should be handled better from the Simple Lightbox side. We've tested to un-minify the Javascript code and adjusted the code in the file /wp-content/plugins/simple-lightbox/content-handlers/image/js/prod/handler.image.js/

from

window.SLB && SLB.has_child("View.extend_content_handler") && !function ($) {
    SLB.View.extend_content_handler("image", {
        render: function (item, dfr) {
            var img = new Image;
            return $(img).on("load", function (e) {
                var out;
                item.set_data(img), item.set_attribute("dimensions", {
                    width: img.width,
                    height: img.height
                }), out = $("<img />", {src: item.get_uri()}), dfr.resolve(out)
            }), img.src = item.get_uri(), dfr.promise()
        }
    })
}(jQuery);

to 

window.SLB && SLB.has_child("View.extend_content_handler") && !function($) {
    SLB.View.extend_content_handler("image", {
        render: function(item, dfr) {
            var img = new Image;

            // Decode HTML entities and then encode the URL
            var uri = item.get_uri().replace(/&#x([a-fA-F0-9]+);/g, function(match, hex) {
                return String.fromCharCode(parseInt(hex, 16));
            }).replace(/&#(\d+);/g, function(match, dec) {
                return String.fromCharCode(parseInt(dec, 10));
            });

            // Properly encode the URI
            uri = encodeURI(uri);

            return $(img).on("load", function(e) {
                var out;
                item.set_data(img);
                item.set_attribute("dimensions", {width: img.width, height: img.height});
                out = $("<img />", {src: uri});
                dfr.resolve(out);
            }),
            img.src = uri,
            dfr.promise()
        }
    })
}(jQuery);

then it worked properly. This plugin is not available in our list of compatible plugins, which you can check here https://wpml.org/plugin/
So, please share this workaround with the plugin author and ask them to join our Go Global program where our Compatibility developers will help them make their product compatible with WPML.
https://wpml.org/documentation/support/go-global-program/

Thanks.
December 18, 2023 at 10:22 am #15082349

bart

many thanks for your effort!
very much appriciated