User:Tomtomn00/script.js

// Copyright (C) 2011 Thomas Nudd 

// This program is free software; you can redistribute it and/or // modify it under the terms of the GNU General Public License // as published by the Free Software Foundation; either version 2 // of the License, or (at your option) any later version.

// This program is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU General Public License for more details.

// You should have received a copy of the GNU General Public License // along with this program; if not, write to

// Free Software Foundation, Inc. // 51 Franklin Street, Fifth Floor // Boston, MA  02110-1301, USA.

$(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);