Exporting as HTML5 for Website allows you to create a slideshow using clips from your PhotoStage project and integrate it to your website.

The website source code (HTML, CSS, Javascript) and its image dependencies will be created in the selected destination. Currently, only images with its applied effects (except animations) and crossfade transition are supported.

Export Options

The following options are available in the export dialog:

Integration to Website

It is very easy to add the slideshow whether to a new website or to an existing one. Exporting to HTML5 for Website provides a sample html file (index.html) that can be used to start creation of your website with the slideshow. It contains an <iframe> tag with slideshow.html as the source. For easy layouting, the <iframe> follows the size of its parent container (i.e. <div>). For your website slideshow to properly display, copy all contents of your "Save To" directory to your hosting site (e.g. a web server).

To include the slideshow to your existing website, copy and paste the following code to your html file. It uses the similar <iframe> tag inside a parent container that defines the size of the slideshow. For this, you will need to copy the "Save To" directory contents to your host except index.html. The <iframe> will be used to include the slideshow to your website. You can adjust the width and height of the <div> as needed.

<div style="width:640px; height:690px; margin:auto">
   <!-- Width and height of the iframe is a percentage of the parent -->
   <!-- Setting margin to "auto" centers the iframe horizontally inside the div -->
   <!-- Setting border-style to "none" removes the default iframe border -->
   <iframe src="slideshow.html" style="width:100%; height:100%; margin:auto; border-style:none">

The slideshow is default center aligned to its upper level container (e.g. another <div> or <body>). To modify this, do the following in the <div> containing the <iframe>:

Change margin:auto to float:left for left align and to float:right for right align.