Embedding Powerpoint Slideshow to Your Webpage Using Javascript

       3/02/2012        Javascript

Embedding Powerpoint Slideshow to Your Webpage Using Javascript
Here is a simple way of embedding your powerpoint slideshow on your webpages. This may not be the best solution but is guaranteed to be done in a few minutes.

Steps on Embedding a PPT or PPS file

1) Prepare first your powerpoint file by exporting it as images. JPEG would be the most appropriate file type since it has less conflicts with browsers especially Internet Explorer.

NOTE: Take note that saved images should be numbered based on its slide number, e.g. 0.jpg, 1.jpg, 2.jpg, etc.

2) OPTIONAL: Group your images in one folder to make it organized.

3) Place this script in between your <head> tags or simply place it in an external script and link it with your HTML. Customize it depending on your slideshow

imgLocation = "presentation_pics/"; // replace this with image location
maxImgNumber= 18;     // replace this with max number of slides
startNumber = 0;
fileType = ".jpg";    // replace this with image file type


function moveright(){
 var src = document.getElementById('slide').src;
 var str = src.split('/');
 var num = str[str.length - 1].split('.');
 
 var ctr = num[0] * 1;
 
 if(ctr==maxImgNumber)
  ctr = 0;
 else
  ctr += 1;
 
 document.getElementById('slide').src = imgLocation + ctr + fileType;
 document.getElementById('slide').ctr = ctr;
}

function moveleft(){
 var src = document.getElementById('slide').src;
 var str = src.split('/');
 var num = str[str.length - 1].split('.');

 var ctr = num[0] * 1;

 if(ctr==0)
  ctr = maxImgNumber;
 else
  ctr -= 1;
 
 document.getElementById('slide').src = imgLocation + ctr + fileType;
 document.getElementById('slide').ctr = ctr;
}

function replaceSrc(){
 document.getElementById('slide').src = imgLocation + startNumber + fileType;
}
function endSrc(){
 document.getElementById('slide').src = imgLocation + maxImgNumber + fileType;
}

4) Now it's time to place the slideshow in your HTML, insert this on your code.

NOTE: You may replace certain part of this code for customization and aesthetic purposes.

Parts to edit:
src=presentation_pics/0.jpg - edit this with default image to load at the start
width="500" - width of the slideshow
height="400" - height of the slideshow

You may also need to upload the following files for the buttons:
presentation_pics/skip_backward.png
presentation_pics/back.png
presentation_pics/forward.png
presentation_pics/skip_forward.png

<img id="slide" src="presentation_pics/0.jpg" alt="" width="500" height="400">
<div style="background-color:steelblue;width:500px;padding-top:2px;padding-bottom:2px;">
 <center>
  <a onclick="replaceSrc();" href="javsacript:;"><img src="presentation_pics/skip_backward.png" border=0 title="First Page" /></a>
  <a onclick="moveleft();" href="javascript:;"><img src="presentation_pics/back.png" border=0 title="Back" /></a>
  <a onclick="moveright();" href="javascript:;"><img src="presentation_pics/forward.png" border=0 title="Next"/></a>
  <a onclick="endSrc();" href="javascript:;"><img src="presentation_pics/skip_forward.png" border=0 title="Last Page" /></a>
 </center>
</div>

That should now work. You can update the code later on using JQuery for smooth transition.

Visit this website for the demo or this one if the first link returns error.


2 comments :

  1. Hmm thanks for this, I am not aware that powerpoint pics/files can be embedded to a blog and function as a slideshow. But first, I need to study this one, I'm not good at scripts LOL

    ReplyDelete
  2. actually, as far as I know there is no way to incorporate a PPT file yet on the web (let the world correct me if I'm wrong with this statement).  So to place it on your site/blog, you may need to covert it to SWF file (which is not recommended since most mobile devices doesn't support it) or convert it to images and let script like JS or Jquery handle the actions :)

    thanks!

    ReplyDelete

Thanks for dropping by and I would really appreciate if you can drop some comments..

Social Connection


۞