HTML5 Slideshow Maker

How to Embed Multiple HTML5 Slideshows into Website

In HTML5 tutorial "How to Make an HTML5 Slideshow with HTML5 Slideshow Maker", we detailed showed how to use HTML5 Slideshow Maker to make HTML5 slideshows without writing any HTML5 slideshow codes. In another HTML5 tutorial "How to Embed an HTML5 Photo Slideshow to Website", we showed you three ways to embed an HTML5 slideshow into website. In this HTML5 tutorial, we will show how to embed multiple HTML5 slideshows into website, which including embedding multiple HTML5 slideshows into separate web pages and embedding multiple HTML5 slideshows into one web page.

Two Cases on Embedding Multiple HTML5 Slideshows into Website

  • Case one: embed multiple HTML5 slideshows into separate web pages;
  • Case two: embed multiple HTML5 slideshows into one web page;

Download HTML5 Slideshow Maker Free for WindowsDownload HTML5 Slideshow Maker on Mac App Store

Case One: embed multiple HTML5 slideshows into separate web pages

Step 1. Move all the HTML5 slideshows into your website

Every HTML5 slideshow powered by HTML5 Slideshow Maker is saved in one folder. Assume the output folder of the first HTML5 slideshow you want to embed to website is named "HTML5_SLIDESHOW_01", the second is named "HTML5_SLIDESHOW_02", and the third is named"HTML5_SLIDESHOW_03", etc.

Create a folder in the folder of your website, name it "ALL_HTML5_SLIDESHOWS", then put the output folders of your HTML5 slideshows into folder "ALL_HTML5_SLIDESHOWS"

Put all HTML5 slideshows into website

Step 2. Get the HTML5 slideshow codes of all the HTML5 slideshows

Open the output folder of every HTML5 slideshow, you will see two HTML documents in the output folder of every HTML5 slideshow. Open the ones not named fs_aus, you will see your HTML5 slideshows, and under the HTML5 slideshows, you will see the HTML5 codes.

How to get the HTML5 slideshow codes

Step 3. Edit HTML5 slideshow codes

After getting all the HTML5 slideshow codes, you will find every HTML5 slideshow codes are the same as below.

General HTML5 slideshow codes of the HTML5 slideshow powered by HTML5 Slideshow Maker

To embed HTML5 slideshows into different web pages, you need to edit these HTML5 slideshow codes. For example, if you want to embed the HTML5 slideshow in folder "HTML5_SLIDESHOW_01", then you need to edit the HTML5 slideshow codes to

HTML5 slideshow codes of the first HTML5 Slideshow

Step 4. Embed multiple slideshows into multiple web pages

Open the web pages with html editor, locate the places for embedding your HTML5 slideshows, paste the edited HTML5 slideshow codes, and then upload your website to server.

Case Two: embed multiple HTML5 slideshows on one web page

Following the Step 1 in Case One, then open the web page you want to embed multiple HTML5 slideshows on.

To add the first HTML5 slideshow, we need to paste the following HTML5 slideshow codes to that page.

The html5 codes for adding the second HTML5 slideshow are below.

It's easy to deduce how to add the third slideshows, right? The difference of all the HTML5 slideshows is the file path of the fs_aus file. If the all your HTML5 slideshows are in different sizes, please remember to edit the HTML5 slideshow sizes. To quickly embed your HTML5 slideshows to a web page of your website, we suggest you copy one group of the HTML5 codes above, paste the codes to your web page, then change the file path of the fs_aux.html and the sizes.