How to add powerpoint slides to a webpage using Javascript

@DeanC76Jul 03.2012 — #Hi There,

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 an 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.

[code=html]<center><img src="Slide1.GIF" id="mainImage" name="mainImage" width="100%" height="100%" alt=""></center>[/code]

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

[code=html]<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>[/code]

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

[CODE]<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>[/CODE]

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

I'm honestly a javascript nube so possibly the code is not up to scratch but it worked for me. 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 in action.

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

How to add powerpoint slides to a webpage using Javascript

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to add powerpoint slides to a webpage using Javascript

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴