Okay, What I'm trying to do is create a slide show using this example below. The problem is the animation does not work. Design wise it looks good but images will not rotate in my browser. Is it because I have to use window.setTimeout() Thanks!
http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/
also someone seems to be having a similar problem but not quite the same code as mine:
Why won't this slideshow code work?
Heres the HTML:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>An HTML5 Slideshow w/ Canvas & jQuery | Tutorialzine Demo</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="slideshow"> <ul class="slides"> <li><img src="img/photos/1.jpg" width="620" height="320" alt="Marsa Alam" /></li> <li><img src="img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach" /></li> <li><img src="img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li> <li><img src="img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" /></li> </ul> <span class="arrow previous"></span> <span class="arrow next"></span> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="script.js"></script> </body> </html> Then here we have the CSS:
#slideshow{ background-color:#F5F5F5; border:1px solid #FFFFFF; height:340px; margin:150px auto 0; position:relative; width:640px; -moz-box-shadow:0 0 22px #111; -webkit-box-shadow:0 0 22px #111; box-shadow:0 0 22px #111; } #slideshow ul{ height:320px; left:10px; list-style:none outside none; overflow:hidden; position:absolute; top:10px; width:620px; } #slideshow li{ position:absolute; display:none; z-index:10; } #slideshow li:first-child{ display:block; z-index:1000; } #slideshow .slideActive{ z-index:1000; } #slideshow canvas{ display:none; position:absolute; z-index:100; } #slideshow .arrow{ height:86px; width:60px; position:absolute; background:url('img/arrows.png') no-repeat; top:50%; margin-top:-43px; cursor:pointer; z-index:5000; } #slideshow .previous{ background-position:left top;left:0;} #slideshow .previous:hover{ background-position:left bottom;} #slideshow .next{ background-position:right top;right:0;} #slideshow .next:hover{ background-position:right bottom;} And now the javascript:
$(window).load(function(){ // We are listening to the window.load event, so we can be sure // that the images in the slideshow are loaded properly. // Testing wether the current browser supports the canvas element: var supportCanvas = 'getContext' in document.createElement('canvas'); // The canvas manipulations of the images are CPU intensive, // this is why we are using setTimeout to make them asynchronous // and improve the responsiveness of the page. var slides = $('#slideshow li'), current = 0, slideshow = {width:0,height:0}; setTimeout(function(){ if(supportCanvas){ $('#slideshow img').each(function(){ if(!slideshow.width){ // Saving the dimensions of the first image: slideshow.width = this.width; slideshow.height = this.height; } // Rendering the modified versions of the images: createCanvasOverlay(this); }); } $('#slideshow .arrow').click(function(){ var li = slides.eq(current), canvas = li.find('canvas'), nextIndex = 0; // Depending on whether this is the next or previous // arrow, calculate the index of the next slide accordingly. if($(this).hasClass('next')){ nextIndex = current >= slides.length-1 ? 0 : current+1; } else { nextIndex = current <= 0 ? slides.length-1 : current-1; } var next = slides.eq(nextIndex); if(supportCanvas){ // This browser supports canvas, fade it into view: canvas.fadeIn(function(){ // Show the next slide below the current one: next.show(); current = nextIndex; // Fade the current slide out of view: li.fadeOut(function(){ li.removeClass('slideActive'); canvas.hide(); next.addClass('slideActive'); }); }); } else { // This browser does not support canvas. // Use the plain version of the slideshow. current=nextIndex; next.addClass('slideActive').show(); li.removeClass('slideActive').hide(); } }); },100); // This function takes an image and renders // a version of it similar to the Overlay blending // mode in Photoshop. function createCanvasOverlay(image){ var canvas = document.createElement('canvas'), canvasContext = canvas.getContext("2d"); // Make it the same size as the image canvas.width = slideshow.width; canvas.height = slideshow.height; // Drawing the default version of the image on the canvas: canvasContext.drawImage(image,0,0); // Taking the image data and storing it in the imageData array: var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height), data = imageData.data; // Loop through all the pixels in the imageData array, and modify // the red, green, and blue color values. for(var i = 0,z=data.length;i<z;i++){ // The values for red, green and blue are consecutive elements // in the imageData array. We modify the three of them at once: data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255)); data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255)); data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255)); // After the RGB channels comes the alpha value, which we leave the same. ++i; } // Putting the modified imageData back on the canvas. canvasContext.putImageData(imageData,0,0,0,0,imageData.width,imageData.height); // Inserting the canvas in the DOM, before the image: image.parentNode.insertBefore(canvas,image); } }); 