javascript - Why won't this slideshow work -
okay, i'm trying create slide show using example below. problem animation not work. design wise looks images not rotate in browser. because have use window.settimeout() thanks!
http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/
also seems having similar problem not quite same code mine:
why won't slideshow code work?
heres 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 have 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 javascript:
$(window).load(function(){ // listening window.load event, can sure // images in slideshow loaded properly. // testing wether current browser supports canvas element: var supportcanvas = 'getcontext' in document.createelement('canvas'); // canvas manipulations of images cpu intensive, // why using settimeout make them asynchronous // , improve responsiveness of page. var slides = $('#slideshow li'), current = 0, slideshow = {width:0,height:0}; settimeout(function(){ if(supportcanvas){ $('#slideshow img').each(function(){ if(!slideshow.width){ // saving dimensions of first image: slideshow.width = this.width; slideshow.height = this.height; } // rendering modified versions of images: createcanvasoverlay(this); }); } $('#slideshow .arrow').click(function(){ var li = slides.eq(current), canvas = li.find('canvas'), nextindex = 0; // depending on whether next or previous // arrow, calculate index of 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){ // browser supports canvas, fade view: canvas.fadein(function(){ // show next slide below current one: next.show(); current = nextindex; // fade current slide out of view: li.fadeout(function(){ li.removeclass('slideactive'); canvas.hide(); next.addclass('slideactive'); }); }); } else { // browser not support canvas. // use plain version of slideshow. current=nextindex; next.addclass('slideactive').show(); li.removeclass('slideactive').hide(); } }); },100); // function takes image , renders // version of similar overlay blending // mode in photoshop. function createcanvasoverlay(image){ var canvas = document.createelement('canvas'), canvascontext = canvas.getcontext("2d"); // make same size image canvas.width = slideshow.width; canvas.height = slideshow.height; // drawing default version of image on canvas: canvascontext.drawimage(image,0,0); // taking image data , storing in imagedata array: var imagedata = canvascontext.getimagedata(0,0,canvas.width,canvas.height), data = imagedata.data; // loop through pixels in imagedata array, , modify // red, green, , blue color values. for(var = 0,z=data.length;i<z;i++){ // values red, green , blue consecutive elements // in imagedata array. modify 3 of them @ 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 rgb channels comes alpha value, leave same. ++i; } // putting modified imagedata on canvas. canvascontext.putimagedata(imagedata,0,0,0,0,imagedata.width,imagedata.height); // inserting canvas in dom, before image: image.parentnode.insertbefore(canvas,image); } });
fyi google's cnd down @ moment: http://www.websitedown.info/ajax.googleapis.com, jquery might not loading.
Comments
Post a Comment