[OutSystems UI] LightBox Image - Thumbnail href replaces ImageUrl property
Forge component by OutSystems R&D
Application Type
Reactive

Hi,

In the Lightbox Image we can use a thumbnail and a ImageURL property to show less/high quality images.
The property says when is empty the thumbnail is zoomed.

In our project you are using the property and the thumbnail with different links (External URL's).

When you see the HTML you see both links in the respective href. After you open the lightbox the href from the property ImageURL is replaced by the thumbnail URL.

You can find the JS code here:

        if(thumbnail !== null) {

                var width = thumbnail.naturalWidth;

                var height = thumbnail.naturalHeight;

                var link = lightboxitems[i].querySelector("a");

                var zoom = link.getAttribute("data-zoom");

                var hasImage = link.getAttribute("href") !== "";

                var currentImage;

                

                // write image data

                link.setAttribute("data-size", width*zoom + "x" + height*zoom);

                currentImage = thumbnail.src;

                if(!hasImage && currentImage !== link.href) {

                    link.href = currentImage;

                }

            }

As you can see the image from link url ins't used at all, and is being overwritten by the thumbnail url.

As a work around we cloned the lightbox image pattern and we change the code to  with a small correction and it works as intended:

           if(thumbnail !== null) {

                var width = thumbnail.naturalWidth;

                var height = thumbnail.naturalHeight;

                var link = lightboxitems[i].querySelector("a");

                var zoom = link.getAttribute("data-zoom");

                var hasImage = link.getAttribute("href") !== "";

                var currentImage;

                // write image data

                link.setAttribute("data-size", width*zoom + "x" + height*zoom);

                currentImage = link.href;

                //currentImage = thumbnail.src;

                if(!hasImage) {

                    currentImage = thumbnail.src;

                    //link.href = currentImage;

                }

            }

We are not sure if we are using this pattern the right way, but our intention is to have a very low quality image as thumbnail and when open the image should a high quality image.

Can you help on this subject?

Thank you.

Kind Regards

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.