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)

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 
This isn't an article, not only that there's no way it deserves to be beating the actual articles in this category.
 
This shouldn't have got through the editorial process.
 
Where are the editors?
GeneralMy vote of 5 Pinmemberfrazzle-me10-Jun-12 8:07 
GeneralMy vote of 5 Pinmembercatcoptor9-Jun-12 2:13 
BugBugs + Fix PinmemberVitaly Tomilov22-May-12 9:43 
GeneralMy vote of 5 Pinmembereddy morrison22-May-12 2:15 

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
Web02 | 2.8.140718.1 | Last Updated 17 May 2012
Article Copyright 2012 by Agon Avdimetaj
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid