Click here to Skip to main content
Click here to Skip to main content

GoSlideshow HTML5 Canvas

, 17 May 2012
Rate this:
Please Sign up or sign in to vote.
HTML5 CANVAS

Introduction

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

The Code

Images:

var imagePaths = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"];    
Declaration:
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:

            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 Mozilla Public License 1.1 (MPL 1.1)

Share

About the Author

Agon Avdimetaj
CEO Graphsix Studio
Albania Albania
CEO / Web & App Developer @ Graphsix Studio.
Studying Computer Engineering @ Faculty of Electrical and Computer Engineering, UP.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 3 PinmemberEd Nutting26-Aug-12 14:31 
GeneralMy vote of 1 PinmemberKentEVela10-Jul-12 8:52 
GeneralMy vote of 1 PinmvpJani Giannoudis13-Jun-12 23:22 
GeneralMy vote of 1 PinmemberPranay Rana13-Jun-12 0:24 
Question[My vote of 1] This is not an article [modified] PinmvpSacha Barber11-Jun-12 6:16 
GeneralMy vote of 1 Pinmemberryanthemadone11-Jun-12 5:35 
GeneralMy vote of 5 Pinmemberfrazzle-me10-Jun-12 8:07 
GeneralMy vote of 5 Pinmembercatcoptor9-Jun-12 2:13 
nice and smooth coding
BugBugs + Fix PinmemberVitaly Tomilov22-May-12 9:43 
GeneralMy vote of 5 Pinmembereddy morrison22-May-12 2:15 
GeneralMy vote of 5 PinmemberTRIInc21-May-12 10:53 
GeneralRe: My vote of 5 PinmemberVitaly Tomilov22-May-12 8:34 
GeneralMy vote of 5 PinmemberAkram El Assas21-May-12 1:36 
GeneralMy vote of 4 PinmemberVitaly Tomilov20-May-12 12:13 
GeneralRe: My vote of 4 PinmemberMember 767909622-May-12 5:09 
GeneralquiteRe: My vote of 4 [modified] PinmemberVitaly Tomilov22-May-12 8:30 
GeneralRe: My vote of 4 PinmemberVitaly Tomilov22-May-12 9:44 
GeneralRe: My vote of 4 PinmemberMember 767909623-May-12 0:43 
GeneralRe: My vote of 4 PinmemberVitaly Tomilov23-May-12 11:21 
QuestionMy vote For This Pinmemberonurag1917-May-12 21:11 
GeneralMy vote of 5 Pinmemberonurag1917-May-12 21:11 
GeneralMy vote of 5 Pinmemberruddyl17-May-12 16:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140827.1 | Last Updated 17 May 2012
Article Copyright 2012 by Agon Avdimetaj
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid