diff options
Diffstat (limited to 'Back/Blocks/countdown/js/lrtk.js')
| -rw-r--r-- | Back/Blocks/countdown/js/lrtk.js | 130 |
1 files changed, 0 insertions, 130 deletions
diff --git a/Back/Blocks/countdown/js/lrtk.js b/Back/Blocks/countdown/js/lrtk.js deleted file mode 100644 index 04fa8c8..0000000 --- a/Back/Blocks/countdown/js/lrtk.js +++ /dev/null | |||
| @@ -1,130 +0,0 @@ | |||
| 1 | $(window).load(function(){ | ||
| 2 | |||
| 3 | // We are listening to the window.load event, so we can be sure | ||
| 4 | // that the images in the slideshow are loaded properly. | ||
| 5 | |||
| 6 | |||
| 7 | // Testing wether the current browser supports the canvas element: | ||
| 8 | var supportCanvas = 'getContext' in document.createElement('canvas'); | ||
| 9 | |||
| 10 | // The canvas manipulations of the images are CPU intensive, | ||
| 11 | // this is why we are using setTimeout to make them asynchronous | ||
| 12 | // and improve the responsiveness of the page. | ||
| 13 | |||
| 14 | var slides = $('#slideshow li'), | ||
| 15 | current = 0, | ||
| 16 | slideshow = {width:0,height:0}; | ||
| 17 | |||
| 18 | setTimeout(function(){ | ||
| 19 | |||
| 20 | window.console && window.console.time && console.time('Generated In'); | ||
| 21 | |||
| 22 | if(supportCanvas){ | ||
| 23 | $('#slideshow img').each(function(){ | ||
| 24 | |||
| 25 | if(!slideshow.width){ | ||
| 26 | // Taking the dimensions of the first image: | ||
| 27 | slideshow.width = this.width; | ||
| 28 | slideshow.height = this.height; | ||
| 29 | } | ||
| 30 | |||
| 31 | // Rendering the modified versions of the images: | ||
| 32 | createCanvasOverlay(this); | ||
| 33 | }); | ||
| 34 | } | ||
| 35 | |||
| 36 | window.console && window.console.timeEnd && console.timeEnd('Generated In'); | ||
| 37 | |||
| 38 | $('#slideshow .arrow').click(function(){ | ||
| 39 | var li = slides.eq(current), | ||
| 40 | canvas = li.find('canvas'), | ||
| 41 | nextIndex = 0; | ||
| 42 | |||
| 43 | // Depending on whether this is the next or previous | ||
| 44 | // arrow, calculate the index of the next slide accordingly. | ||
| 45 | |||
| 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 | |||
| 53 | var next = slides.eq(nextIndex); | ||
| 54 | |||
| 55 | if(supportCanvas){ | ||
| 56 | |||
| 57 | // This browser supports canvas, fade it into view: | ||
| 58 | |||
| 59 | canvas.fadeIn(function(){ | ||
| 60 | |||
| 61 | // Show the next slide below the current one: | ||
| 62 | next.show(); | ||
| 63 | current = nextIndex; | ||
| 64 | |||
| 65 | // Fade the current slide out of view: | ||
| 66 | li.fadeOut(function(){ | ||
| 67 | li.removeClass('slideActive'); | ||
| 68 | canvas.hide(); | ||
| 69 | next.addClass('slideActive'); | ||
| 70 | }); | ||
| 71 | }); | ||
| 72 | } | ||
| 73 | else { | ||
| 74 | |||
| 75 | // This browser does not support canvas. | ||
| 76 | // Use the plain version of the slideshow. | ||
| 77 | |||
| 78 | current=nextIndex; | ||
| 79 | next.addClass('slideActive').show(); | ||
| 80 | li.removeClass('slideActive').hide(); | ||
| 81 | } | ||
| 82 | }); | ||
| 83 | |||
| 84 | },100); | ||
| 85 | |||
| 86 | // This function takes an image and renders | ||
| 87 | // a version of it similar to the Overlay blending | ||
| 88 | // mode in Photoshop. | ||
| 89 | |||
| 90 | function createCanvasOverlay(image){ | ||
| 91 | |||
| 92 | var canvas = document.createElement('canvas'), | ||
| 93 | canvasContext = canvas.getContext("2d"); | ||
| 94 | |||
| 95 | // Make it the same size as the image | ||
| 96 | canvas.width = slideshow.width; | ||
| 97 | canvas.height = slideshow.height; | ||
| 98 | |||
| 99 | // Drawing the default version of the image on the canvas: | ||
| 100 | canvasContext.drawImage(image,0,0); | ||
| 101 | |||
| 102 | |||
| 103 | // Taking the image data and storing it in the imageData array: | ||
| 104 | var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height), | ||
| 105 | data = imageData.data; | ||
| 106 | |||
| 107 | // Loop through all the pixels in the imageData array, and modify | ||
| 108 | // the red, green, and blue color values. | ||
| 109 | |||
| 110 | for(var i = 0,z=data.length;i<z;i++){ | ||
| 111 | |||
| 112 | // The values for red, green and blue are consecutive elements | ||
| 113 | // in the imageData array. We modify the three of them at once: | ||
| 114 | |||
| 115 | data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255)); | ||
| 116 | data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255)); | ||
| 117 | data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255)); | ||
| 118 | |||
| 119 | // After the RGB elements is the alpha value, but we leave it the same. | ||
| 120 | ++i; | ||
| 121 | } | ||
| 122 | |||
| 123 | // Putting the modified imageData back to the canvas. | ||
| 124 | canvasContext.putImageData(imageData,0,0); | ||
| 125 | |||
| 126 | // Inserting the canvas in the DOM, before the image: | ||
| 127 | image.parentNode.insertBefore(canvas,image); | ||
| 128 | } | ||
| 129 | |||
| 130 | }); | ||