GoSlideshow HTML5 Canvas

May 18, 2012

1 min read

HTML

Dev

Design

extension

Canvas

web_development

by Agon Avdimetaj

Contributor

52k Views

ownload GoSlideshow_HTML5_Canvas.zip - 264.5 KB

Introduction

GoSlideshow is a simple awesome image slider, created for each web browser that supports HTML5, even in smartphones.

The Code

Images:

JSCRIPT

var imagePaths = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"];

Declaration:

JSCRIPT

var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
var revealTimer;

window.onload = function () {
                showCanvas = document.getElementById('GoSlideshow');
                showCanvasCtx = showCanvas.getContext('2d');
                
                img.setAttribute('width','600');
                img.setAttribute('height','400');
                switchImage();
                
                setInterval(switchImage,3000);
            }

Functions:

JSCRIPT

            function switchImage() {
                img.setAttribute('src',imagePaths[currentImage++]);
                if (currentImage >= imagePaths.length)
                    currentImage = 0;
                
                showCanvasCtx.globalAlpha = 0.1;
                revealTimer = setInterval(revealImage,100);
            }
            
            function revealImage() {
                showCanvasCtx.save();
                showCanvasCtx.drawImage(img,0,0,600,400);
                showCanvasCtx.globalAlpha += 0.1;
                if (showCanvasCtx.globalAlpha >= 1.0)
                    clearInterval(revealTimer);
                showCanvasCtx.restore();
            }

Points of Interest

Html5 Canvas Experiments

History

Version 1.6

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)