HTML5 Slideshow Maker

How to Embed an HTML5 Photo Slideshow to Website

From the HTML5 tutorial on How to Create a Slideshow with HTML5 Slideshow Maker, you can know how to create a slideshow with HTML5 Slideshow Maker. After trying to create a slideshow with the help of that HTML5 tutorial, what you care next must be how to put the photo slideshow to website. In order to let all the HTML5 Slideshow Maker users successfully embed a photo slideshow to website, here shares this detailed HTML5 tutorial. If you still have problems on embedding photo slideshows to websites after learning this HTML5 slideshow tuturial, please contact us.

Three Methods to Embed an HTML5 Photo Slideshow to Website!

The following methods differ from different servers users choose to host their photo slideshow. Please choose the most suitable method to learn how to embed an HTML5 photo slideshow to the website. When embedding an HTML5 photo slideshow to your website, please make sure that the place you plan to put your HTML5 photo slideshow is bigger or equal to the size of the HTML5 photo sildeshow you embed.
  • Method one: use your website server to host the HTML5 photo slideshow;
  • Methods two: use an external server to host the HTML5 photo slideshow;
  • Methods three: use our free photo slideshow server Go2Album to host the HTML5 photo slideshow.

Tips: if your HTML5 slideshow does not show up, please add the HTML5 declaration <!DOCTYPE> before the HTML tag to solve it.

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

Method One: use website server to host the photo slideshow

After publishing your HTML5 photo slideshow with HTML5 Slideshow Maker, You will get the output folder of your HTML5 photo slideshow. The HTML5 codes of your HTML5 photo slideshow are in the HTML file which is not named fs_aux. To embed your photo slideshow to website, all you need to do is to copy and paste the HTML5 slideshow codes onto your web page, and then upload the output folder of your HTML5 photo slideshow and the web page to your website server.

Step 1. Get the HTML5 codes of your HTML5 photo slideshow.

Open the output folder of your HTML5 photo slideshow. There should be two HTML documents in the output folder. One of them is named fs_aus, and the another is named by yourself when you publish your HTML5 photo slideshow. Open the HTML document which is not named fs_aus, you will see your HTML5 photo slideshow. Under the HTML5 photo slideshow, you will see the HTML5 slideshow codes of your HTML5 photo slideshow. In the following screenshot, the HTML5 slideshow codes were marked with a red box.

HTML5 Codes of the HTML5 Photo Slideshow

Step 2. Copy the entire output folder of your HTML5 photo slideshow and paste it into the folder of your website.

There are folders, xml document, JScript Script files, and HTML documents in the output folder of your HTML5 photo slideshow. This step is to copy the entire ouput folder of your HTML5 slideshow to the folder of your website.

Step 3. Edit the HTML5 slideshow codes.

From the step 1, you can get the HTML5 slideshow codes of your HTML5 photo slideshow. Now you need to open the web page which you want to put your HTML5 photo slideshow on with a web page editor, then paste the HTML5 codes to that web page.

Usually, you don't need to change the code of xml and js files, except you have put the output folder in a different folder with the web page. For example, you should change the js file link address to 'subfolder name/anvsoftJavaScriptSlideshow-1.0.0.min.js' and the xml file link address to 'subfolder name/slides.xml' if you have moved the output folder into an existing folder called 'subfolder'. This type of link address is called relative link, while another type is absolute link, such as http://yoursite.com/subfolder name/slides.xml. If the HTML5 photo slideshow is embed to a page in a folder, you should use something like 'http://yoursite.com/subfolder name/slides.xml'. You'd better use absolute link if you are not familiar with the differences.

Edit the HTML5 codes of your photo slideshow

Step 4. Upload the web page and the output folder of your HTML5 photo slideshow to your web server.

You should upload the entire output folder of your HTML5 photo slideshow together with your HTML web page to your web server.

Method Two: use an external server to host the photo slideshow

Some people may mind using the website server to host big files like the photo slideshow project, so they choose to use an external server to host it. For those who do not use the server which host their website to host their HTML5 photo slideshows, please use this method to embed your HTML5 photo slideshows.

Step 1: Upload the output folder of your photo slideshow to the external server.

Please upload the whole output folder of your HTML5 photo slideshow to your external server.

Step 2. Edit the HTML5 slideshow codes of your HTML5 photo slideshow

If the output folder of your HTML5 slideshow belongs to the first level directory, the HTML5 codes of your HTML5 photo slideshow will be like the example below.

Edit the HTML5 codes of your photo slideshow

Please note that the HTML5 codes of your photo slideshow are different to the HTML5 codes above, the different parts are marked with a red rectangle.

Not everyone likes to put the output folder of the HTML5 photo slideshow in the first level directory. Those who put it in a second or third level directory need to add the file path to the codes relates to the source file. The HTML5 codes should be like the following example:

Edit the HTML5 codes of your photo slideshow

Step 3. Paste the HTML5 slideshow codes to your web page and upload the web page.

Copy the HTML5 slideshow codes you edited and paste it to the web page with your HTML editor, then you can view your HTML5 photo slideshow by uploading the web page.

Method Three: use Go2Album to host your HTML5 photo slideshow

Step 1. Sign up for Go2Album

Go to www.go2album.com and sign up for the free photo slideshow host service.

Step 2. Sign into Go2Album

Open HTML5 Slideshow Maker, click the menu "Preference", and click the "Sign in Go2Album", then enter your user name and password, click "OK" to save the setting.

Sign in to Go2Album

Step 3. Upload the HTML5 photo slideshow to Go2Album

When you come to the last step of creating a HTML5 photo slideshow with HTML5 Slideshow Maker, you need to select "Create Slideshow and Upload to Go2Album". After clicking the "Publish Now!" button, HTML5 Slideshow Maker upload your HTML5 photo slideshow to Go2Album and later it will give you the link to your photo slideshow. View example

Step 4. Edit the HTML5 codes of the HTML5 photo slideshow

Open the link you get from Step 3, you will see your HTML5 photo slideshow. Click the "Embed" tag on the left, you need to use the HTML5 codes from Html URL to embed your HTML5 photo slideshow.

Assume the HTML5 slideshow codes of your HTML5 photo slideshow on Go2Album are below.

Edit the HTML5 codes of your photo slideshow

Then you should edit the HTML5 slideshow codes of your HTML5 photo slideshow like below.

Edit the HTML5 codes of your photo slideshow

Please note that you need to edit the "src", "width" and "height" according to your HTML5 slideshow.

Step 5. Paste the HTML5 slideshow codes to web page and upload the web page.

Now you can copy the HTML5 slideshow codes you edited in step 4 and paste it to the web page, then you can see your HTML5 slideshow on-line after you upload this web page to your website server.