HTML5 Canvas slideshow


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. HTML
  2. <div id="slideshow">
  3. <ul class="slides">
  4. <li><img src="/images/gallery/tc3.jpg" alt="Marsa Alam" /></li>
  5. <li><img src="/images/gallery/tc0.jpg" alt="Marsa Alam" /></li>
  6. <li><img src="/images/gallery/tc17.jpg" alt="Marsa Alam" /></li>
  7. <li><img src="/images/gallery/tc2.jpg" alt="Marsa Alam" /></li>
  8. <li><img src="/images/gallery/tc16.jpg" alt="Marsa Alam" /></li>
  9. </ul>
  10. <span class="arrow previous"></span>
  11. <span class="arrow next"></span>
  12. </div>
  13.  
  14. Java Script
  15. <script type="text/javascript">
  16. $(window).load(function(){
  17. // We are listening to the window.load event, so we can be sure
  18. // that the images in the slideshow are loaded properly.
  19. // Testing wether the current browser supports the canvas element:
  20. var supportCanvas = 'getContext' in document.createElement('canvas');
  21. // The canvas manipulations of the images are CPU intensive,
  22. // this is why we are using setTimeout to make them asynchronous
  23. // and improve the responsiveness of the page.
  24. var slides = $('#slideshow li'),
  25. current = 0,
  26. slideshow = {width:0,height:0};
  27. setTimeout(function(){
  28. if(supportCanvas){
  29. $('#slideshow img').each(function(){
  30. if(!slideshow.width){
  31. // Saving the dimensions of the first image:
  32. slideshow.width = this.width;
  33. slideshow.height = this.height;
  34. }
  35. // Rendering the modified versions of the images:
  36. createCanvasOverlay(this);
  37. });
  38. }
  39.  
  40. $('#slideshow .arrow').click(function(){
  41. var li = slides.eq(current),
  42. canvas = li.find('canvas'),
  43. nextIndex = 0;
  44. // Depending on whether this is the next or previous
  45. // arrow, calculate the index of the next slide accordingly.
  46. if($(this).hasClass('next')){
  47. nextIndex = current >= slides.length-1 ? 0 : current+1;
  48. }
  49. else {
  50. nextIndex = current <= 0 ? slides.length-1 : current-1;
  51. }
  52. var next = slides.eq(nextIndex);
  53. if(supportCanvas){
  54. // This browser supports canvas, fade it into view:
  55. canvas.fadeIn(function(){
  56. // Show the next slide below the current one:
  57. next.show();
  58. current = nextIndex;
  59. // Fade the current slide out of view:
  60. li.fadeOut(function(){
  61. li.removeClass('slideActive');
  62. canvas.hide();
  63. next.addClass('slideActive');
  64. });
  65. });
  66. }
  67. else {
  68. // This browser does not support canvas.
  69. // Use the plain version of the slideshow.
  70. current=nextIndex;
  71. next.addClass('slideActive').show();
  72. li.removeClass('slideActive').hide();
  73. }
  74. });
  75. },100);
  76. // This function takes an image and renders
  77. // a version of it similar to the Overlay blending
  78. // mode in Photoshop.
  79.  
  80. function createCanvasOverlay(image){
  81. var canvas = document.createElement('canvas'),
  82. canvasContext = canvas.getContext("2d");
  83. // Make it the same size as the image
  84. canvas.width = slideshow.width;
  85. canvas.height = slideshow.height;
  86. // Drawing the default version of the image on the canvas:
  87. canvasContext.drawImage(image,0,0);
  88. // Taking the image data and storing it in the imageData array:
  89. var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height),
  90. data = imageData.data;
  91. // Loop through all the pixels in the imageData array, and modify
  92. // the red, green, and blue color values.
  93. for(var i = 0,z=data.length;i<z;i++){
  94. // The values for red, green and blue are consecutive elements
  95. // in the imageData array. We modify the three of them at once:
  96. data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
  97. (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
  98. data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
  99. (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
  100. data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
  101. (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
  102. // After the RGB channels comes the alpha value, which we leave the same.
  103. ++i;
  104. }
  105. // Putting the modified imageData back on the canvas.
  106. canvasContext.putImageData(imageData,0,0,0,0,imageData.width,imageData.height);
  107. // Inserting the canvas in the DOM, before the image:
  108. image.parentNode.insertBefore(canvas, image);
  109. }
  110. });
  111.  
  112. CSS
  113. /*canvas slide show*/
  114. #slideshow{
  115. background-color:#F5F5F5;
  116. border:1px solid #FFFFFF;
  117. height:250px;
  118. margin:10px auto 0;
  119. position:relative;
  120. width:640px;
  121.  
  122. -moz-box-shadow:0 0 22px #111;
  123. -webkit-box-shadow:0 0 22px #111;
  124. box-shadow:0 0 22px #111;
  125. }
  126.  
  127. #slideshow ul{
  128. height:220px;
  129. left:10px;
  130. list-style:none outside none;
  131. overflow:hidden;
  132. position:absolute;
  133. top:10px;
  134. width:620px;
  135. }
  136.  
  137. #slideshow li{
  138. position:absolute;
  139. display:none;
  140. z-index:10;
  141. }
  142.  
  143. #slideshow li:first-child{
  144. display:block;
  145. z-index:1000;
  146. }
  147.  
  148. #slideshow .slideActive{
  149. z-index:1000;
  150. }
  151.  
  152. #slideshow canvas{
  153. display:none;
  154. position:absolute;
  155. z-index:100;
  156. }
  157.  
  158. #slideshow .arrow{
  159. height:86px;
  160. width:60px;
  161. position:absolute;
  162. background:url('/images/arrows.png') no-repeat;
  163. top:50%;
  164. margin-top:-43px;
  165. cursor:pointer;
  166. z-index:5000;
  167. }
  168.  
  169. #slideshow .previous{ background-position:left top;left:0;}
  170. #slideshow .previous:hover{ background-position:left bottom;}
  171.  
  172. #slideshow .next{ background-position:right top;right:0;}
  173. #slideshow .next:hover{ background-position:right bottom;}

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.