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;
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"
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.
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.
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
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.