Quantcast
Channel: All Design StuffsjQuery | All Design Stuffs
Viewing all articles
Browse latest Browse all 2

HTML5 Canvas Image Slider using jQuery

0
0

In my previous HTML5 post, I have created a semantic HTML5 Layout which had lot of new semantic elements of HTML5. In this post, I will be creating image slider using HTML5 Canvas element and jQuery.

Before starting with the image slider, let us understand Canvas Element. As per whatwg,

The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.

That is exactly what we are going to do. We will be adding visual images on the fly using canvas and adding some content for each image.

So, lets start with the image slider. First, we will create the html5 structure.
[sourcecode language="css"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Image Slider using jQuery</title>
</head>

<body>
<header>
<h1>HTML5 Canvas Image Slider using jQuery</h1>
</header>
<div id="slider">

<div id="mask">
<canvas id="mycanvas" width="3200" height="600">
<p>Your browser doesn’t support canvas!!!</p>
</canvas>
</div>
<div id="contents"><span class="arrow arrow1"></span><p><a href="http://www.alldesignstuffs.com/2011/creating-css3-animation-using-css3-gradient-and-background-cliptext/" target="_blank">Creating CSS3 Animation using CSS3 Gradient and background-clip:text</a></p></div>
<p id="controls"><span class="arrow arrow2"></span><a id="one" href="#">1</a><a id="two" href="#">2</a><a id="three" href="#">3</a><a id="four" href="#">4</a></p>
</div>
<footer id="copyrights">
<p>© 2011 <a href="http://www.alldesignstuffs.com/" target="_blank">All Design Stuffs</a></p>
</footer>
</body>
</html>

[/sourcecode]

As you can see above, the slider div has three main elements. First one is the mask div which will mask the canvas element to the area which we will define, the second div contains contents to be displayed on each image which we will change through jQuery and the last paragraph element has controls for our slider, it even has two span elements which is for adding a shape effect.

[sourcecode language="css"]
<canvas id="mycanvas" width="3200" height="600">
[/sourcecode]
if you see canvas element properly it has width defined as 3200 this is because we will be adding 4 images in it dynamically and the size of each image is 800. If you don’t know what will be the size of the image you can remove the width attribute and define it through jQuery by calculating the images width.

Inside canvas element we have added below text
[sourcecode language="css"]
<p>Your browser doesn’t support canvas!!!</p>
[/sourcecode]
because those browser’s who doesn’t support canvas will display it as container and we can add fallback or message when it doesn’t support it.

Next up, lets style our page so that we can check the display and alignment of the elements properly. Below is the code for the same.
[sourcecode language="css"]
<style>
body{ background-color:#999; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; margin:0px auto; width:800px; }
#controls{ margin:0px; width:160px; height:30px; background-color:#474747; float:left;border:2px solid #474747; border-radius:5px 0px 0px 5px; position:absolute; bottom:20px; right:-32px;}
#controls a{ display:block; margin:0px 0px 0px 8px;border:5px solid #888; border-radius:30px; width:20px; height:20px; line-height:19px; text-indent:5px; float:left; text-decoration:none; color:#000; background-color:#fff; font-family:Arial, Helvetica, sans-serif;}
#controls a:hover{border:5px solid #333;}
#mask{ width:800px; overflow:hidden; position:relative; border:5px solid #000; border-radius:5px; height:200px;}
#slider{ position:relative;width:800px; margin:0px auto;}
#mycanvas{ position:relative; display:block;}

.arrow {
width: 0; height: 0;
line-height: 0;
border-top: 10px solid #777;
top: 107%;
position: absolute;
}
.arrow1{border-left: 20px solid transparent;left: 0;}
.arrow2 {border-right: 22px solid transparent;right: -2px;}

#contents{ background-color:#474747; float:left;border:2px solid #474747; border-radius:0px 5px 5px 0px; width:200px; position:absolute; top:30px; left:-22px; color:#fff;}
#contents a{color:#fff;}
#contents a:hover{ text-decoration:none;}
#contents p{ padding:10px; margin:0px;}
h1{ text-align:center;}
h1 a{ text-shadow:0px 1px 1px #dedede; color:#000; text-decoration:none; border-bottom:1px dotted #dedede;}
h1 a:hover{ border-bottom:1px solid #dedede;}
footer{ text-align:center; display:block;}
</style>
[/sourcecode]
lastly, lets move ahead to jQuery so write down below code in script tag or inside a JavaScript file and link it in the document. But before doing that don’t forget to add jQuery to the html file.
[sourcecode language="css"]
// JavaScript Document
$(document).ready(function(){
/*
Ready function starts here
*/
/*
variables
*/
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
/*
============================================================
*/
/*
Insert image
*/
var i;
var j=0;
var photos = new Array();
for(i=1; i<5; i++)
{
var image = new Image();
image.src = "canvasImages"+i+".jpg";
photos.push(image);

}
/*
===========================================================
*/
/*
function for loading images
and aligning them in sequence
*/
$(photos[0]).load(function(){
var contextnew =context.drawImage(photos[0], 0, 0);
for(i=0; i<photos.length; i++)
{
contextnew = contextnew + context.drawImage(photos[i+1],(i+1)*800, 0);
}
});
/*
===========================================================
*/
/*
checking which link has been clicked
and display the image of that number
*/
$("#controls a").click(function(evt){
evt.preventDefault();
var linkid = evt.target.id;
switch(linkid)
{
case "one":
$("#mycanvas").stop(true,true).animate({‘left’:’0px’},500);
$("#contents p").stop(true,true).fadeOut(100).fadeIn(500).html("<a href=’http://www.alldesignstuffs.com/2011/creating-css3-animation-using-css3-gradient-and-background-cliptext/’ target=’_blank’>Creating CSS3 Animation using CSS3 Gradient and background-clip:text</a>");
break;
case "two":
$("#mycanvas").stop(true,true).animate({‘left’:'-800px’},500);
$("#contents p").stop(true,true).fadeOut(100).fadeIn(500).html("<a href=’http://www.alldesignstuffs.com/2011/understanding-css3-gradients-and-examples-of-css3-gradient-backgrounds/’ target=’_blank’>Understanding CSS3 Gradients and Examples of CSS3 Gradient Backgrounds</a>");
break;
case "three":
$("#mycanvas").stop(true,true).animate({‘left’:'-1600px’},500);
$("#contents p").stop(true,true).fadeOut(100).fadeIn(500).html("<a href=’http://www.alldesignstuffs.com/2011/creating-html5-page-with-css3/’ target=’_blank’>Creating HTML5 page with CSS3</a>");
break;
case "four":
$("#mycanvas").stop(true,true).animate({‘left’:'-2400px’},500);
$("#contents p").stop(true,true).fadeOut(100).fadeIn(500).html("<a href=’http://www.alldesignstuffs.com/2011/css3-image-rack-part-2/’ target=’_blank’>CSS3 Image Rack Part 2</a>");
break;
default:
$("#mycanvas").stop(true,true).animate({‘left’:’0px’},500);
$("#contents p").stop(true,true).fadeOut(100).fadeIn(500).html("<a href=’http://www.alldesignstuffs.com/2011/creating-css3-animation-using-css3-gradient-and-background-cliptext/’ target=’_blank’>Creating CSS3 Animation using CSS3 Gradient and background-clip:text</a>");
break;
}
});
/*
===========================================================
*/
/*
Ready function ends here
*/
});
[/sourcecode]

Let’s understand above jQuery code.

We are first creating canvas and context variables and assigning values to it. After that we are creating photos array and adding each image dynamically in that array using for loop.

After adding images in photos array, we are loading those images one by one using for loop in canvas element with drawImage function of canvas element and then we align those images next to each other by calculating their position and assigning the position values in drawImage function.

Finally we are checking which link has been clicked and depending on that we are displaying the image of that number using switch case. The sliding animation happens with the jquery’s animate method added in each case and on each slide we are fading in/out the text coming on each slide.

One important thing when using dynamic images is to have images preloaded so that all images renders quickly. Hence below is the script for preloading our images.

[sourcecode language="css"]

$.fn.preload = function() {
this.each(function(){
$(‘<img/>’)[0].src = this;
});
}

[/sourcecode]

Above script will take each image of our photos array and keep it ready for our canvas. So, now lets use this preload function in our script and it will be used below our photos array loop. Hence, final script will be as follows

[sourcecode language="css"]

// JavaScript Document

$.fn.preload = function() {
this.each(function(){
$(‘<img/>’)[0].src = this;
});
}

$(document).ready(function(){
/*
Ready function starts here
*/
/*
variables
*/
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
/*
============================================================
*/
/*
Insert image
*/
var i;
var j=0;
var photos = new Array();
for(i=1; i<5; i++)
{
var image = new Image();
image.src = "canvasImages"+i+".jpg";
photos.push(image);

}

/*
===========================================================
*/
/*
Passing array to our preload function
*/
// Pass the array to our preload function
$(photos).preload();

/*
===========================================================
*/
/*
function for loading images
and aligning them in sequence
*/
$(photos[0]).load(function(){
var contextnew =context.drawImage(photos[0], 0, 0);
for(i=0; i<photos.length; i++)
{
contextnew = contextnew + context.drawImage(photos[i+1],(i+1)*800, 0);
}
});
/*
===========================================================
*/
/*
checking which link has been clicked
and display the image of that number
*/
$("#controls a").click(function(evt){
evt.preventDefault();
var linkid = evt.target.id;
switch(linkid)
{
case "one":
$("#mycanvas").stop(true,true).animate({‘left’:’0px’},500);
$("#contents p").stop(true,true).fadeOut(100).fadeIn(500).html("<a href=’http://www.alldesignstuffs.com/2011/creating-css3-animation-using-css3-gradient-and-background-cliptext/’ target=’_blank’>Creating CSS3 Animation using CSS3 Gradient and background-clip:text</a>");
break;
case "two":
$("#mycanvas").stop(true,true).animate({‘left’:'-800px’},500);
$("#contents p").stop(true,true).fadeOut(100).fadeIn(500).html("<a href=’http://www.alldesignstuffs.com/2011/understanding-css3-gradients-and-examples-of-css3-gradient-backgrounds/’ target=’_blank’>Understanding CSS3 Gradients and Examples of CSS3 Gradient Backgrounds</a>");
break;
case "three":
$("#mycanvas").stop(true,true).animate({‘left’:'-1600px’},500);
$("#contents p").stop(true,true).fadeOut(100).fadeIn(500).html("<a href=’http://www.alldesignstuffs.com/2011/creating-html5-page-with-css3/’ target=’_blank’>Creating HTML5 page with CSS3</a>");
break;
case "four":
$("#mycanvas").stop(true,true).animate({‘left’:'-2400px’},500);
$("#contents p").stop(true,true).fadeOut(100).fadeIn(500).html("<a href=’http://www.alldesignstuffs.com/2011/css3-image-rack-part-2/’ target=’_blank’>CSS3 Image Rack Part 2</a>");
break;
default:
$("#mycanvas").stop(true,true).animate({‘left’:’0px’},500);
$("#contents p").stop(true,true).fadeOut(100).fadeIn(500).html("<a href=’http://www.alldesignstuffs.com/2011/creating-css3-animation-using-css3-gradient-and-background-cliptext/’ target=’_blank’>Creating CSS3 Animation using CSS3 Gradient and background-clip:text</a>");
break;
}
});
/*
===========================================================
*/
/*
Ready function ends here
*/
});

[/sourcecode]

Well that’s it, check the demo link and enjoy!

DemoDownload


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images