Slide Show 4 album embedded in a web-page

Click the picture to start the slide show here in this window, click here to start the slide show in new window.
Next push (on a PC) the F11 key to see it full screen!

This is the index page of this album which is skipped in an album with an automatically started slide show:

You can display a slide show embedded in your web-page with an iframe. To do that, check  the check-mark 'Start slide show automatically'  on the Slide Show 4 settings General tab. For the example above, I used the following html code in the web page:

<iframe src="https://www.andrewolff.nl/testjalbum/frame/index.html" style="border:none; overflow:hidden;" height="350" width="700" ></iframe>

The slide show starts with the first slide page (index# 0), but you can start at any other slide page in the album by adding '?x' where x is the index of the first image to show. However in that case the slide show does not start automatically; start the slide show with a long tap in the picture or by pressing the space bar or by clicking the play button (if visible) . For example if you like to start with the third slide,  use text index.html2

With the next code:

<iframe src="https//www.andrewolff.nl/testjalbum/frame/index.html?M0" style="border:none; overflow:hidden;" height="350" width="700" ></iframe>

the slide show is also not started automatically. Use swipes or the arrow keys to go to the next/previous picture or start the slide show with a long tap in the picture or by clicking the play button or by pressing the space bar. This mode shows always navigation buttons.

You start the slide show normally from the index page by clicking the play button in the upper left corner or by clicking a  thumbnail, but you can start the slide show with a link on your web-page. As an example click on the small thumbnail above. The html code for this link is:

<a href="https://www.andrewolff.nl/testjalbum/frame/index.html?1"><img src="https://www.andrewolff.nl/testjalbum/frame/thumbs/Berijpt_Almelo_071222_05.jpg" width="130" height="97" alt="start slide show" /></a>

You can also start the slide show in a full window without status bar, menu etc. Try this this with the first button above. The html code is:

<form>
<input type="button" value="Click here and next F11 to see the slides fullscreen"
onclick='window.open("https://www.andrewolff.nl/testjalbum/frame/index.html", "fullscreen","toolbar=0,scrollbars=0,menubar=0,location=0,resizable=0,directories=0,status=0,fullscreen=yes,width=" + (screen.width) + ",height=" + (screen.height) + ",left=0,top=0");'>
</form>

To open the index page of  an embedded album, add "?-1" after the URL. For example to open the index page of this test album, make a link to "https://www.andrewolff.nl/testjalbum/frame/index.html?-1".

The viewing time per slide, the applied slide transition effect and time are defined when the album is created, on the Slide Show 4 settings Slide page tab:

You should indicate here too whether the navigation buttons should always, never or only in the pause state be displayed on slides. If these buttons are not displayed, navigation should be done via the key board or with swipes and gestures on the iPad. Click on the help button on the index page of a slide show to see how this should be done.

For an example of a page with 4 embedded slide shows go to the Demo of embedded Slide Show 4 albums page. Use the 'View source' function of your browser to view the code.

If you like to show your embedded album on various devices, you have to make the iframe responsive with extra css-code. For an example of an embedded responsive slide show, see this web-page and see here for an example of an embedded index page. To fetch this code, use jAlbum menu item 'Album / Embed album'.

Click here to download the Slide Show 4 skin, click here to see an extended description and click here to see another example of an embedded slide show.