Embed a PowerPoint presentation into HTML

Google Docs can serve up PowerPoint (and PDF) documents in it's document viewer. You don't have to sign up for Google Docs, just upload it to your website, and call it from your page:

<iframe src="//docs.google.com/gview?url=https://www.yourwebsite.com/powerpoint.ppt&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

I got so sick of trying all of the different options to web host a power point that were flaky or required flash so I rolled my own.

My solution uses a very simple javascript function to simply scroll / replace a image tag with GIFs that I saved from the Power Point presentation itself.

1. In the power point presentation click Save As and select GIF. Pick the quality you want to display the presentation at. Power Point will save one GIF image for each slide and name them Slide1.GIF, Slide2.GIF, etc.....

2. Create a HTML page and add a image tag to display the Power point GIF images.

   <img src="Slide1.GIF" id="mainImage" name="mainImage" width="100%" height="100%" alt="">
   

3. Add some first, previous, next and last clickable objects with the onClick action as below:

   <a href="#" onclick="swapImage(0);"><img src="/images/first.png" border=0 alt="First"></a>
   <a href="#" onclick="swapImage(currentIndex-1);"><img src="/images/left.png" border=0 alt="Back"></a>
   <a href="#" onclick="swapImage(currentIndex+1);"><img src="/images/right.png" border=0 alt="Next"></a>
   <a href="#" onclick="swapImage(maxIndex);"><img src="/images/last.png" border=0 alt="Last"></a>
   

4. Finally, add the below javascript function that when called grabs the next Slide.GIF image and displays it to the img tag.

   <script type="text/javascript">
       //Initilize start value to 1 'For Slide1.GIF'
       var currentIndex = 1;
   
       //NOTE: Set this value to the number of slides you have in the presentation.
       var maxIndex=12;
   
       function swapImage(imageIndex){
           //Check if we are at the last image already, return if we are.
           if(imageIndex>maxIndex){
               currentIndex=maxIndex;
               return;
           }
   
           //Check if we are at the first image already, return if we are.
           if(imageIndex<1){
               currentIndex=1;
               return;
           }
   
           currentIndex=imageIndex;
           //Otherwise update mainImage
           document.getElementById("mainImage").src='Slide' +  currentIndex  + '.GIF';
           return;
       }
   </script>
   

Make sure the GIFs are reachable from the HTMl page. They are by default expected to be in the same directory but you should be able to see the logic and how to set to a image directory if required

I have training material up for my company that uses this technique at http://www.vanguarddata.com.au so before you spend any time trying it out you are welcome to look at in action.

I hope this helps someone else out there who is having as much headaches with this as I did.....