SHARE
TWEET

FindReplace

aandnota Feb 29th, 2012 19 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.         <head>
  3.                         <title>Find & Replace</title>
  4.                         <style>
  5.                                 /*hide the slides*/
  6.                                 #slideshow li
  7.                                 {
  8.                                         display:none;
  9.                                 }
  10.                                 body
  11.                                 {
  12.                                         overflow:hidden;
  13.                                 }
  14.                                 #canvas
  15.                                 {
  16.                                         width:1000px;
  17.                                         margin:auto;
  18.                                 }
  19.                         </style>
  20.                
  21.                         <script type="text/javascript">
  22.                                
  23.                                 var currentSlide = 0;
  24.                                 var maxSlides = 1303;
  25.                                 var FPS = 8;
  26.                                 var timeout = Math.floor(500/FPS);     
  27.                                 function loadNextSlide()
  28.                                 {
  29.                                         currentSlide = currentSlide > (maxSlides-1) ? 1 : currentSlide+1;
  30.                                         //console.log("Next Index: " + currentSlide);
  31.                                        
  32.                                         blitImageToCanvas('image_'+currentSlide);
  33.                                
  34.                                        
  35.                                         setTimeout(loadNextSlide,timeout);
  36.                                 }
  37.                                
  38.                                 function blitImageToCanvas(imageID)
  39.                                 {
  40.                                         var image = document.getElementById(imageID);
  41.                                         var canvas = document.getElementById("myCanvas");
  42.                                        
  43.                                         var ctx = canvas.getContext('2d');
  44.                                         ctx.drawImage(image,0,0);                      
  45.                                        
  46.                                 }
  47.                                
  48.                                 function onLoad()
  49.                                 {
  50.                                         loadNextSlide();
  51.                                 }
  52.                         </script>
  53.                        
  54.         </head>
  55.         <body onload="onLoad();">
  56.                 <body style="background-color:black">
  57.                 <!-- canvas is the same size as the images, and all the images are the same size -->
  58.                 <div id="canvas">
  59.                 <canvas id="myCanvas" width="1000" height="600"></canvas>
  60.                 </div>
  61.                 <!--
  62.                  Imporant that the images have ids with numbers, as we're not using jquery. to keep things simple.
  63.                 -->
  64.                 <div id="slideshow">
  65.                         <ul class="slides">
  66.                                 <li><img id='image_1' src="images/1.jpg" width="1000" height="600"/></li>
  67.                                 <li><img id='image_2' src="images/2.jpg" width="1000" height="600"/></li>
  68.                                 <li><img id='image_3' src="images/3.jpg" width="1000" height="600"/></li>
  69.                                 <li><img id='image_4' src="images/4.jpg" width="1000" height="600"/></li>
  70.                                 <li><img id='image_5' src="images/5.jpg" width="1000" height="600"/></li>
  71.                                 <li><img id='image_6' src="images/6.jpg" width="1000" height="600"/></li>
  72.                                 <li><img id='image_7' src="images/7.jpg" width="1000" height="600"/></li>
  73.                                 <li><img id='image_8' src="images/8.jpg" width="1000" height="600"/></li>
  74.                                 <li><img id='image_9' src="images/9.jpg" width="1000" height="600"/></li>
  75. //                              ad infinitum
  76.                         </ul>
  77.                 </div>
  78.         </body>
  79. </html>
RAW Paste Data
Top