16 september 2015

Slide Show 4 album embedded in your web-page

Start of the slide show via a link on your web-page

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

This is the index page of this album which is skipped in an embedded album:

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

<iframe src="http://www.andrewolff.nl/testjalbum/frame/index.html?0" frameborder="0" scrolling="no" height="350" width="700" ></iframe>

The used link is the URL of the first slide page (index# 0), but you can start at any slide page in the album. If you start with the first slide, you may omit the text index.html?0

With this code, the slide show is automatically started, so after a while you see the next slide automatically. With the next code:

<iframe src="http://www.andrewolff.nl/testjalbum/frame/index.html?M0" frameborder="0" scrolling="no" height="350" width="700" ></iframe>

the slide show is 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.

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="http://www.andrewolff.nl/testjalbum/frame/index.html?1"><img src="http://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:

<input type="button" value="Click here and next F11 to see the slides fullscreen"
onclick='window.open("http://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");'>

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 "http://www.andrewolff.nl/testjalbum/frame/index.html?-1".

All possibilities are shown on the embedded slide show of my home page, click here to see it.

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 albums go to the

Demo of embedded Slide Show 4 albums page.

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.

Geen opmerkingen: