[OutSystems UI] Lightbox not working correctly to preview a recently uploaded image (Mobile)
Question
Forge component by OutSystems R&D

So we are trying to create a screen where you upload either an image file from the phone or take a picture, and showing the result in a lightbox (as a thumbnail but, if clicked, to show the picture bigger). 

The first time it's working as expected. However, we are making it possible to continue to upload images until satisfied (for instance, if the first photo was out of focus, the user can take another one before submitting it), and it's in this instance that the situation appears. The thumbnail shows the last uploaded image, but when clicked, it changes to show the 1st uploaded image, no matter how many of them were already uploaded. 

Has this happened to anyone before? Or is there another pattern i can use for the desired effect (showing a smaller image on screen but showing it enlarged when clicked, without navigating to a different screen)

Thanks in advance.

mvp_badge
MVP

Hi Luis,

Can you share an espace that replicates the problem? That way we can help you better.

Regards,

Marcelo

mvp_badge
MVP

Hello Luís

We were able to reproduce the problem.

It seems to be a bug in the Lightbox code. We did not spend much time on this and where not able to find a workaround yet.

Cheers

Hi Luis, there is a workaround. Instead of using the pattern, you can use a secondary page to show only the image and then go back to the thumbnail screen.

Hi Luis,

The team will analyse the issue to see how can it be fixed in the pattern.

Meanwhile, have you tried to use an If widget do reset the pattern and load only the last image?

My regards

mvp_badge
MVP

Dinis Carvalho wrote:

Hi Luis,

The team will analyse the issue to see how can it be fixed in the pattern.

Meanwhile, have you tried to use an If widget do reset the pattern and load only the last image?

My regards

Hello Dinis,

We tried many things including IF's, putting inside blocks, etc. Nothing we did resulted.


Hi, I created a pattern using the following script: https://github.com/AlloyTeam/AlloyFinger, and than just used the initialization of the script to add features like: doubleTap to zoom, pinch, move and reposition the image when double tap do reset the pinch.

It works like a charm even inside a slideshow.

I'm hitting the same bug.

It's a year already, and this bug still exists...

Btw, I forgot to mention that I'm hitting the same bug but in Lightbox Web, not Mobile. 

So maybe the problem lies deep in Javascript Library?

I guess the Lightbox use the same filename for image element, so it was cached by browser and when clicked it always show cached first image because of the same file name.

Hello everyone,

This issue was addressed in OutSystems UI 2.2.4, this is the former OutSystems UI Mobile.
Are you able to update and validate if the issue is solved?

As for the Traditional Web version, we'll look into it and try to provide a fix soon.

My regards


Hello Everyone,


I am still experiencing the issue with the Lightbox not able to render the recent image in my Reactive web app.

Scenario -> I am using Camera.Reactive forge component (https://www.outsystems.com/forge/component-overview/6891/camera-reactive) to capture the image and the captured image is shown in the image control within Lightbox. I have option to recapture the image. The Lightbox always renders the first image that I zoomed in, no matter how many times i recapture the Lightbox always shows very first image. For a split second the recent image would be visible when the Lightbox is opening up but then switches back to the first image.

I am currently using Outsystem Platform version is 11.10.3 and  Outsystem UI version 2.6.5

Please suggest how to fix this.

Hello  Nizaamuddeen Shaik.

Can you provide a sample module with that scenario being reproduceable?
Thank you in advance.

Best Regards,
GM



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