How to fade in and out images automatically in the Full Background


I'd like to know about how to display and fade in and out .jpeg images in the background on the Full screen. I tried everything but it didnot work.
I was wondering if you could tell me about CSS codes to make this happen.

I have already imported some jpeg images. 


I have the link showing what I want to do below. Like this.

https://www.yuu-diaryblog.com/sozai-sample-toukou/background-slide.html

I actually habe been asking some else,by the way in this site.

Best regards,

Hey Tsubasa,

 Are you looking for something like that?

https://pankajpant824.outsystemscloud.com/Backgroundsloider/samplebackslider.aspx

Hi Tsubasa,

I have added the same oml to forge component that how to make the background slider.

https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=6617

this is the link.

Thanks,

Pankaj Pant

Pankaj pant wrote:

Hi Tsubasa,

I have added the same oml to forge component that how to make the background slider.

https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=6617

this is the link.

Thanks,

Pankaj Pant

I copied the CSS codes from Backgroundsloider that you sent me with the link and then I pasted the codes and rewrote some parts for me on the CSS sheet in my module "FlashSpeaking". But when I opened in Browser , no inserted image was displayed in the background.

I have attached my .oml file so that you can check for the wrong parts in detail.

I'd appreciate it if you could tell me why it does not work and give me the clue.


I hope to manage to make the desired function happen.

Best regards,

I wonder if the pasted CSS codes I rewrote on FlashSpeaking Style sheet is wrong somewhere....


Tsubasa Yoshikawa wrote:

Pankaj pant wrote:

Hi Tsubasa,

I have added the same oml to forge component that how to make the background slider.

https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=6617

this is the link.

Thanks,

Pankaj Pant

I copied the CSS codes from Backgroundsloider that you sent me with the link and then I pasted the codes and rewrote some parts for me on the CSS sheet in my module "FlashSpeaking". But when I opened in Browser , no inserted image was displayed in the background.

I have attached my .oml file so that you can check for the wrong parts in detail.

I'd appreciate it if you could tell me why it does not work and give me the clue.


I hope to manage to make the desired function happen.

Best regards,

Hi Tsubasa,

along with css, you have to make a HTML structure like below.



then only it will work.


Regards,

Pankaj


Pankaj pant wrote:

Tsubasa Yoshikawa wrote:

Pankaj pant wrote:

Hi Tsubasa,

I have added the same oml to forge component that how to make the background slider.

https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=6617

this is the link.

Thanks,

Pankaj Pant

I copied the CSS codes from Backgroundsloider that you sent me with the link and then I pasted the codes and rewrote some parts for me on the CSS sheet in my module "FlashSpeaking". But when I opened in Browser , no inserted image was displayed in the background.

I have attached my .oml file so that you can check for the wrong parts in detail.

I'd appreciate it if you could tell me why it does not work and give me the clue.


I hope to manage to make the desired function happen.

Best regards,

Hi Tsubasa,

along with css, you have to make a HTML structure like below.



then only it will work.


Regards,

Pankaj




It worked,but actually only one image display..... I followed what you said.


Also, I have attached my oap file.  I'd like you to see why this does not work properly...

I know it is asking a lot,but I need to make this happen because of work.

Best regards,


hi,

 can you send me the URL of your page so that I can inspect it and check why it's not working?  also, make that page anonymous for now.


Regards,

Pankaj

Pankaj pant wrote:

hi,

 can you send me the URL of your page so that I can inspect it and check why it's not working?  also, make that page anonymous for now.


Regards,

Pankaj

Can't you publish the module I just sent and open it in your browser?

Does that mean  you were able to make my module"Flash Speaking" work in your browser?


Tsubasa Yoshikawa wrote:

Pankaj pant wrote:

hi,

 can you send me the URL of your page so that I can inspect it and check why it's not working?  also, make that page anonymous for now.


Regards,

Pankaj

Can't you publish the module I just sent and open it in your browser?

Does that mean  you were able to make my module"Flash Speaking" work in your browser?


No, showing so many errors that I can't fix, if you have an issue in sharing here then PM me.


Pankaj pant wrote:

Tsubasa Yoshikawa wrote:

Pankaj pant wrote:

hi,

 can you send me the URL of your page so that I can inspect it and check why it's not working?  also, make that page anonymous for now.


Regards,

Pankaj

Can't you publish the module I just sent and open it in your browser?

Does that mean  you were able to make my module"Flash Speaking" work in your browser?


No, showing so many errors that I can't fix, if you have an issue in sharing here then PM me.


What does the number of containers in sample container mean?

If you set four or five containers in sample container, does anything change in the module?

Is the number important?

number of images

Pankaj pant wrote:

number of images

I have two questions for you.

The first one:   I'm actually using LisbonTheme/Layout Web block in HomePage, as you can see the inserted image I sent.    Doesn't it matter to use Common/Layout or LisbonTheme/Layout?  This is the image you sent me.

The second one :   Do I have to put  the sample Container in Title ?   I wonder what is the difference between putting it in MainContent and putting in Title....

I hate to seem pushy but I'd appreciate it if you could give me any good ideas.


Best regards,

Solution

Hi Tsubasa,

Hope you have been able to progress with your issue. But any case this is my take on the challenge using the website that you mentioned:

https://www.yuu-diaryblog.com/sozai-sample-toukou/background-slide.html

Step 1:

Put the images in a place that your server can reference them, the simplest way is to add them to your image folder in your espace.

Step 2:

Add the css with a few tweaks to your espace, in this exercise I just added it to the page css and it seem to work fine.

Modify the css so that it references the images as shown below.

Another thing that needs to be done is to tweak the theme "ul" class, I was using the Liverpool theme and below is the class that it was added to allow the images to show.

Step 3:

Add the html elements that are necessary for the animation. You can use the Outsystems components to achieve this, bare in mind to you might have to alter your css a bit more, or if you want it to be done quickly but a bit more difficult to maintain in the future, you can simply add the html tags as shown below.

Simply drag an expression, alter its contents, as shown in the image, and don't forget to change the escape content flag of the expression to "No". Otherwise you will just print the html on the screen.

After all of this is done. Just publish your webapplication and if all went well you should be able to see the animation on your page.

I have included the espace that I used to test this out, and if you want to see it working you can reach the pages in the following url.

https://cunha.outsystemscloud.com/BkImageSlider/HomePage.aspx

Hope this helps with your issue. If you have any question, just let me know.


Best regards,

Mario

Solution