SlideWow Special Bundle with Discounts

Special Bundle: Photo Flash Maker + Photo Slideshow Maker + Photo DVD Maker

Buy SlideWow Special Bundle

45% OFF

Only $49.95

Download SlideWow Special Bundle Free Trial

Get Free Trials

Links

Follow us on

Follow Us on FaceBook Follow Us on Twitter

How to Embed an HTML5 Slideshow to Website

Making an HTML5 slideshow with HTML5 Slideshow Maker is easy. If you do not know how, you can visit How to Make an HTML5 Photo Slideshow for Your Website to learn the steps. The next important thing after finished making an HTML5 slideshow is how to embed an HTML5 slideshow to website. This web page is right for showing all the HTML5 Slideshow Maker users the way of embedding an HTML5 slideshow to personal or organizational websites.

Step 1: Get the codes of your HTML5 slideshow.

After you finished publishing your HTML5 slideshow, HTML5 Slideshow Maker will open a window for viewing your HTML5 slideshow. You can get the codes of your HTML5 slideshow through the view window.

View HTML5 slideshow

The second way to find the codes of your HTML5 slideshow is to find and open the html file you named when you are publishing your HTML5 slideshow. Whether you use the Window version or Mac version of HTML5 Slideshow Maker, you will get the following files after you publish your HTML5 slideshow.

A folder which contains the following files:

The output folder's file path is set when you publish your HTML5 slideshow. So if you do not remember where you saved it, you can check it by opening HTML5 Slideshow Maker again and seeing the file path through the publish interface.

By opening the html file you named, you can find the codes under the HTML5 slideshow you made.

Viewing HTML5 slideshow

Step 2: Copy the codes and paste it to website designer.

The above step shows how to get the codes of your HTML5 slideshow. The codes will be used in this step. All website builders know that the first thing to add content to a website is open your website designer. So first open your website designer and open the webpage you want to edit, then find the HTML area where you going to embed the codes. Next thing is copy the codes of your HTML5 slideshow and paste it to the code area of your web page.

Many people would think the whole process of embedding an HTML5 slideshow is over. However, They will find that the HTML5 slideshow will not show up, though they are pretty sure that they did upload the webpage. The reason is the next step is also an essential part for successfully embedding an HTML5 Slideshow.

Step 3: Upload the output folder to the website server.

If you are just embedding the codes but do not upload the output files of your HTML5 Slideshow Maker to the website server, the HTML5 slideshow will not show up. The reason is somewhat the same as just embedding the codes of a picture and do not upload the picture to your website server. As mentioned in step one, all the output files are saved in one output folder, so the best way is to upload the whole folder rather then upload all the output files separately.

Tips:

If you put the output folder in the first-level subdirectory, then you do not need to change the codes of your HTML5 slideshow. However, if the output folder is put in the second or third level subdirectory, you need to add the file path of the js and the xml file to the codes.

For example.

The output folder is named "banner", and it is saved in the folder named "slideshows". The original codes of your slideshow are below:

<div id="anvsoftJavaScriptSlideshow" style="width: 400px; height: 325px; position: relative;">
<script src="anvsoftJavaScriptSlideshow-1.0.0.min.js?xml_path=slides.xml"></script>
<script>anvsoftJavaScriptSlideshow.init("anvsoftJavaScriptSlideshow");</script>
</div>

Then you should edit your codes to like below:

<div id="anvsoftJavaScriptSlideshow" style="width: 400px; height: 325px; position: relative;">
<script src="slideshows/banner/anvsoftJavaScriptSlideshow-1.0.0.min.js?xml_path=slideshows/banner/slides.xml"></script>
<script>anvsoftJavaScriptSlideshow.init("anvsoftJavaScriptSlideshow");</script>
</div>

Now, the whole process of embedding an HTML5 slideshow to website is over. You can follow the above steps and try to embed your HTML5 slideshow to your own website. If there is anything that you are not clear or you failed to successfully embed your HTML5 slideshow without knowing why, you can contact us by sending email to support@photo-flash-maker.com

download HTML5 Slideshow Maker for Windowsdownload HTML5 Slideshow Maker for Mac

Download HTML5 Slideshow Maker for making HTML5 slideshow for websites.

Get SlideWow Special Bundle of Three, with 44% OFF Buy SlideWow Special Bundle  Download SlideWow Bundle  Comparison of SlideWow Programs