Finalize a Project - HTML5 for 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.

Save to: Directory to where the the website files will be saved. The source files (html - slideshow.html, css - slideshow_style.css and javascript - slideshow_script.js) will be saved in the root directory while the html image dependencies will be saved inside a folder named 'html'.
Resolution: Resolution of the output slideshow images. Choose Auto Match Content to select the smallest resolution that will fit all the images.
Output Options:
- Auto play slideshow on page load: Automatically play the slideshow on page load and do not show the play button.
- Automatically loop slideshow: Make the slideshow automatically repeat during playback
- Include fullscreen button: Adds a fullscreen button at the bottom right of the slideshow used to show the slideshow in fullscreen.
- Include navigation bar beneath the slideshow: Adds a navigation bar to seek between slides.
- Include NCH watermark: Adds the NCH watermark at the bottom-center of the slideshow. Removing the watermark is a paid feature and can be done by purchasing PhotoStage.

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.

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>: