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 startwidth="500" - width of the slideshowheight="400" - height of the slideshowYou 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.
Categories
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
ReplyDeleteactually, 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 :)
ReplyDeletethanks!