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: - 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.
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"> </iframe> </div> 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. |