Is there a way in flipcontent to flip an image so it is "backwards" as it was?

Hi, 

I want to ask is there a way that when a user flips a content or an image and move on second one without flipping in back, it turns back into its original position. ie; it turns back to the front image and when the user looks at it again the 'front' image show up instead of the 'back' one?

cheers,


Hi Hafsa,


Can you please give more context or send some print screens? Are you doing Mobile or Web development? What is the widget you're using? 


Cheers,

Renato


hafsa zaineb wrote:

Hi, 

I want to ask is there a way that when a user flips a content or an image and move on second one without flipping in back, it turns back into its original position. ie; it turns back to the front image and when the user looks at it again the 'front' image show up instead of the 'back' one?

cheers,




Hi Renato,

I'm using nested widgets, it's like stacked cards,  inside stacked cards carousel widget and inside carousel, Flip content widget. Now what I want is when a user flips the content and sees what is at the back and leaves for the next card or image without flipping it back to its "front" , the image when the user comes back to this image is already in its previous state. Lets say there is a front with name' A' and back with' B',  user flipped card or image `A` and `B` shows, he leaves B and goes to next card, after a while when he gets back to this card, `A` should be shown instead of' B'.


I hope I'm making myself clear: (

Renato Torres wrote:

Hi Hafsa,


Can you please give more context or send some print screens? Are you doing Mobile or Web development? What is the widget you're using? 


Cheers,

Renato


hafsa zaineb wrote:

Hi, 

I want to ask is there a way that when a user flips a content or an image and move on second one without flipping in back, it turns back into its original position. ie; it turns back to the front image and when the user looks at it again the 'front' image show up instead of the 'back' one?

cheers,






Hi,

I'm fairly new to Outsystems but I have an idea but you would need to use some CSS and Javascript instead of relying on the Outsystems widgets.

Set the content of the front and back of the card (as you described it, side A, B, C etc) using CSS. The 'background image' function may work. Then use Javascript to change the style for side A to become Side C when the flip content animation is finished. You wouldn't see the change because Side B would be displayed at the time.

Then repeat the same to change the Side B to Side D.

CSS would look like:

.sideA {
background-image: url1; }

.sideB {
background-image: url1; }

.sideC {
background-image: url1; }

.sideD {
background-image: url1; }

You can set a screen action to trigger at the end of the flip and the Javascript would change the class of the relevant side. 

It's only an idea for a direction to take but I hope it's helpful!

Hi Renato,

I'm using nested widgets, it's like stacked cards,  inside stacked cards carousel widget and inside carousel, Flip content widget. Now what I want is when a user flips the content and sees what is at the back and leaves for the next card or image without flipping it back to its "front" , the image when the user comes back to this image is already in its previous state. Lets say there is a front with name' A' and back with' B',  user flipped card or image `A` and `B` shows, he leaves B and goes to next card, after a while when he gets back to this card, `A` should be shown instead of' B'.


I hope I'm making myself clear: (

Renato Torres wrote:

Hi Hafsa,


Can you please give more context or send some print screens? Are you doing Mobile or Web development? What is the widget you're using? 


Cheers,

Renato


hafsa zaineb wrote:

Hi, 

I want to ask is there a way that when a user flips a content or an image and move on second one without flipping in back, it turns back into its original position. ie; it turns back to the front image and when the user looks at it again the 'front' image show up instead of the 'back' one?

cheers,