Question / Help Image Slideshow

[ShenmueHD]

Could Someone make me a HTML file please with .Css so i can use images in a slideshow until this feature is implemented as im after a slideshow on screen of transparent images, Id love you so much if you could for me <3

What id like it 2 do
8 Seconds Image On-Screen Time
Fade In Fade Out
Never Ending Loop.

 

[sam686]

The native image slideshow should be coming soon.

You can try using the old OBS that have the image slideshow, and then use the new OBS multiplatform game capture to capture the old OBS with the image slideshow added. Just make sure to go to old OBS advanced setting, "Disable encoding while previewing" and then restart preview.

You might try using chroma key.You may put an image of maybe a solid color behind transparent slideshow.

 

[ShenmueHD]

The native image slideshow should be coming soon.

You can try using the old OBS that have the image slideshow, and then use the new OBS multiplatform game capture to capture the old OBS with the image slideshow added. Just make sure to go to old OBS advanced setting, "Disable encoding while previewing" and then restart preview.

You might try using chroma key.You may put an image of maybe a solid color behind transparent slideshow.

I dont like using the old OBS, iv got same setting on it as OBSMP and the image just doesn't look as nice im after a slideshow HTML, as that will do the same job as the native slidesho, but untill then im after a HTML slideshow.

 

[tajobe]

You could modify this to your needs: http://codepen.io/leemark/pen/vzCdo

 

[ChocoQ]

Could anyone explain how to set up the codepin with OBS Studio?

 

[Adrian Schofield]

The main problem I see here is that configuring the files to be used is either a problem for the user or impossible. Javascript (html and css) does not allow access to the local file system without user input and the browser source of course does not allow user input.

If you were prepared to edit a file like this and add individual image filenames then I could quite easily copy something from the internet to help you out:

<div id="slideshow">
<img src="http://unshapedadrian.co.uk/screenshots/2016-02-18_00001.jpg">
<img src="http://unshapedadrian.co.uk/screenshots/2016-03-01_00001.jpg">
<img src="http://unshapedadrian.co.uk/screenshots/2016-03-02_00001.jpg">
<img src="http://unshapedadrian.co.uk/screenshots/2016-03-07_00001.jpg">
<img src="d:\data\screenshots\2016-02-18_00001.jpg">
<img src="d:\data\screenshots\2016-03-01_00001.jpg">
<img src="d:\data\screenshots\2016-03-02_00001.jpg">
<img src="d:\data\screenshots\2016-03-07_00001.jpg">
</div>

However from what I can tell the Browser Source can't pick up the local files and so you would have to set up your slide show images hosted on the internet.

@Osiris any idea why Browser Source can't access the local image paths, I'm expecting it's by-design but it would be good to confirm. BTW this works in a normal browser with both remote and local images.

 

[Osiris]

You can't reference local images like that, either use relative paths or use http://absolute/d:/data/screenshots/2016-02-18_00001.jpg for example.

 

[Adrian Schofield]

Thanks Osiris that fixed it, so I now have a small html page which you can use as a slideshow, each image needs to be added to the html file and the slide show will cross fade transition between each image every 20 seconds based on the following pen:

http://codepen.io/Archonius/pen/efEAD

http://unshapedadrian.co.uk/downloads/obsSlide.zip

This has nothing to do with OBS, if you use it and need help or want something changed please contact me directly.

 

[Ruhai Hu]

Might also look at reveal.js I ran across it when looking to do slideshows for obs studio. Has quite a few options built right into its code. Simplest setup is just the files for it on your system where obs can access as a browser source.

PS also working on doing some tutorial on it for people wanting to use it, along with some added CSS for putting certain things in and font changes etc.