HTML5 SlideShow Tutorial

a tutorial from flashbynight.
com
What you will learn:
How to build a 'slideshow' that works on a webpage and on mobile
Basic techniques and methodologies used in HTML5
Basic techniques used for making a mobile-friendly web page

Prerequisites:
Basic knowledge of HTML5 or Javascript is helpful but not necessary
Required time:

1-2 hours
Notes

This will be a great project for anyone starting out in HTML5 who wants a simple and fun project to build. Its a
slideshow that we can use to present information on a web browser. We will make sure it can function on a
smartphone browser, too.

If you just want to grab the source code without following the tutorial, then thats fine, too.

Each 'slide' has text and a picture. You can click the buttons to go between slides. There are four slides in our
sample, but you could have as many as you want. Resize the browser to smartphone size. You'll notice that
on a small screen, the slides display in sequence more like a regular web page.
For this project, we'll need to build an html page, a css document and a javascript document. We'll also need
the jquery library and some images which you can get from the source files.
You can view a working example here: http://www.flashbynight.com/tutes/slideshow/example
Download the completed source files here: http://www.flashbynight.com/tutes/slideshow/source.zip
graphics
We will need seven images for this tutorial. The banner image, the navigation buttons and a sample image for
each of the four slides. The names must be banner.png, b1.png, b2.png, img1.png, img2.png, img3.png and
img4.png.
You can grab the images from the source files using the link above.
The images should be in the same folder as the other files. When you replace them with your own images,
keep in mind that if you use images that are too large, it will affect the formatting. The images in our slides are
350 x 300 px.

html
To create our html document, you could use a program such as Dreamweaver. But you could also simply use
any text editor such as WordPad or TextPad. Create a document named index.html and add the following
code:
Lines 2-7: The HEAD of the document references the external files that we will use:

- A CSS document, which we will create to control the look and feel of the page

- The JQUERY library, which adds functionality to the Javascript language. JQUERY is by far the most com-
mon Javascript library used by web developers and has become pretty much a standard feature of any mod-
ern site. You can download JQUERY from jquery.com or get it from the project files (see page 2). You must
rename it to jquery.js and it must be in the same folder as our html file.
1
<!DOCTYPE html>
2
<head>
3
<link href="main.css" rel="stylesheet" type="text/css"/>
4
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
5
<script src="jquery.js"></script>
6
<script src="controller.js"></script>
7
</head>
8
<body>
9
<div id="topbar"><img src="banner.png"></div>
10
<div id="spacer"> </div>
11
<div id="outerHolder">
12
<div id="navButtons"></div>
13
<div id="mainHolder">
14
</div>
15
</body>
16
</html>
Line 4 contains settings for how the page will look on a mobile deviceto scale with the device width and the
user cannot zoom in and out.

Lines 8-15: The BODY of the document contains a series of divisional elements (<div>'s) to allow us to struc-
ture the page. The first one holds the banner image, the second one is used to space out the page. The
'outerHolder' will hold the navigation buttons and the content. 'navButtons' will hold only the navigation arrows
and 'mainHolder' will hold only the content.

For a visual respresentation:

You can see that the slide content will be held inside the mainHolder <div>. Let's add it now. Go back to line
13 on the previous page and add the slide content:
<div id="mainHolder">

<div class="block" id="p1">
<img src="img1.png" class="pix1">
<span class="blocktitle">Slide 1</span>

<span class="blocktext"><br>
Yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba
yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba
yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba yabba</span></div>

Notice how each section is carefully labelledwith an ID: p1,p2, p3, p4. The images have a classname and the
title has a class name too. Remember, we like to give one-off items an ID and we like to refer to reusable
items by class. A <div> can have several classes, but only one ID.
Now, if you have Dreamweaver or similar, you can edit the slide content through that or the low-rent version is
just to use a text editor
Save this document as index.html. And open it in a browser, such as Chrome. It looks messy, which is why
we will apply CSS in the next section.





</div>
</div>
css
The CSS document will define how the web page looks. Again, you can use a text editor if you wish. The file-
name will be main.css:
1 body {
2 background-color:#ecf0f1;
3 }
4
5 #topbar { height:150px;width:860px;margin:auto;margin-bottom:10px; }
6 #topbar img { f loat:left; }
7
8 .pix1 { f loat:right;position:relative;margin:5px; }
9
10 .block{ b ackground-color:#ffffff;border-radius:3px;padding:9px;width:782px;margin:auto;height:400px;font-family:
tahoma,verdana,arial,sans-serif; }
11 .blocktitle { font-size:40px;margin-top:10px;}
12 .blocktext { font-size:20px;color:#666666; }
13
14 #nav1{ p osition:relative;margin-left:10px; }
15 #nav2{ p osition:relative;margin-left:10px; }
16 #nav2:hover { opacity:0.7;}
17
18 #outerHolder{ w idth:860px;margin:auto; }
19 #mainHolder{ w idth:800px;overflow:hidden;height:400px;}
20 #navButtons { f loat:right;}
21
22 @media screen and ( max-width:860px) {
23 #topbar { height:auto;width:100%; }
24 #topbar img { width:100%; }
25 #spacer { height:auto;}
26 #navButtons { visibility:collapse;}
27 #navButtons img { width:0px;}
28 #outerHolder{ w idth:100%;}
29 #mainHolder{ w idth:100%;height:auto;overflow:visible;}
30 .block{ h eight:auto;width:auto;min-height: 500px;margin-bottom:10px;}
31 .pix1 { width:40%;height:auto; }
32 .blocktitle { width:100%;}
33 }
34
Line-by-line explanation:

Lines 1-3: We set a simple greyish-blue background color for the entire page.

Lines 5-6: The topbar div will hold our banner image. It should be 860px to align with the slides (800px) and
the navigation buttons (60px). The image itself will be 800px and floated left so it sits above the slides.

Line 8: All pictures in the slides will be given the class .pix1. The pictures will be floated to the right of the
text.

Lines 10-12: Slides will be assigned the class .block. They are given a white background, slightly rounded
corners (border-radius:3px), a height of 400px and the font is set. The inner width is 782px, but with padding
of 9px on each side, the total width is 800px. The purpose of the padding property is to add a slight margin
between the text and the border. The slide titles will be assigned the class .blocktitle and the text blocktext.

Lines 14-16: These lines format the navigation buttons. We want a left margin so they are not right up against
the slides and we want to start with a hover on the second button. The back button will be disabled at the
start, because we will be on the first slide. We will adjust the navigations buttons throught the coding after the
first slide.

Lines 18-20: As shown in the previous diagram, the 'outerHolder' will hold the navigation buttons and the
content. 'navButtons' will hold only the navigation arrows and 'mainHolder' will hold only the content. The at-
tribute overflow:hidden; is important to understand. It means that any content that 'overflows' the main-
Holder div will be hidden from view. This will provide the illusion of a slideshow - in fact we will simply be
'hiding' any information which is not in the current slide.

Lines 22-33: These lines apply to screen sizes of up to 860px in width (smaller tablets, for example). We
need to reformat at this point because the slides and the navigation buttons would be wider than the screen.
At this point, we will change to a non-slideshow format and show all slides in sequence. We mainly want to
change all the widths to 100% so they will fit snugly on the screen. On lines 26 and 27, we make the naviga-
tion buttons invisible and ensure they don't take up any screen space. Line 29 ensures no slides are hidden.
Line 31 changes the size of the images - they will now be 40% of their container size.

Lines 35-40: For very small screens (mobile phones), we need to make a few further adjustments. We set
smaller font sizes and we reduce the image sizes a bit further. You can play around with these values until
you get the effect you want.

Save this file as main.css. You can test now, by opening index.html in a browser. It looks closer to what we
want, but the navigation buttons are missing. That's because we haven't added them yet - we will do that
through the code. Drag your browser window to change the width. Can you see what happens as it gets
smaller? All the slides are shown.

35 @media screen and ( max-width:550px) {
36 .block{ m in-height: 300px;}
36 .blocktext { font-size:14px; }
38 .pix1 { width:30%;}
39 .blocktitle { font-size:18px; }
40 }
javascript
As with our html document, you can use a simple text editor to create our javascript code:
1 $ ( document) . r eady ( f unction ( ) {
2
3 var slide=1;
4 var numberOfSlides=$( ' div#mainHolder div') . l ength;
5 var previousWidth=$( document ) . width;
6
7 $ ( ' #navButtons' ) .append ( "<div id= 'nav1'><img src='b1.png'></div>") ;
8 $ ( ' #navButtons' ) .append ( "<div id= 'nav2'><img src='b2.png'></div>") ;
9
10 $ ( ' #nav1') . c lick( f unction( ) { i f( s l ide!=1) { c hangeSlideBack ( ) ; } } )
11 $ ( ' #nav2') . c lick( f unction( ) { i f( s l ide!=numberOfSlides) { c hangeSlideForward ( ) ; } } )
12 $ ( ' #nav1') . c ss( " opacity","0.1") ;
13
14
15 function changeSlideForward ( ) {
16 $ ( ' #p1' ) . animate ( { " marginTop":"-=418px" } ) ;
17 if ( slide==1 ) {
18 $ ( ' #nav1') . c ss( " opacity","1" ) ;
19 $ ( ' #nav1') . hover ( f unction( ) { $ ( ' #nav1' ) .css( " opacity","0.7") ; } , f unction( )
{ $( ' #nav1' ) .css( " opacity","1" ) ; } ) ;
20 }
21 slide++;
22 if ( slide==numberOfSlides) { $ ( ' #nav2' ) .unbind ( ' mouseenter mouse-
leave' ) ;$ ( '#nav2') . c ss( " opacity","0.1") ; }
23 } / / changeslideforward
24
25
26 function changeSlideBack ( ) {
27 $ ( ' #p1' ) . animate ( { " marginTop":"+=418px" } ) ;
28 if ( slide==numberOfSlides) {
29 $ ( ' #nav2') . c ss( " opacity","1" ) ;
30 $ ( ' #nav2') . hover ( f unction( ) { $( ' #nav2' ) .css( " opacity","0.7") ; } , f unction( )
{ $( ' #nav2' ) .css( " opacity","1" ) ; } ) ;
31 }
32 slide--;

Lines 1 & 50: Everything within these lines will execute as soon as the page is fully loaded (the document is
ready).

Lines 3-5: Well need to define some variables to work with. The variable slide will help us track which slide
is being displayed. Next we can track how many slides we will be showing by counting the number of <div>s
within the #mainHolder <div>. Lastly, we will need to know the previous width, when the page has been re-
sized, so that we know when to change the formatting.

Lines 7-8: We can place the navigation buttons within their <div>s using this code. $('#navButtons') is the
JQuery shortform to refer to the <div> with the id #navButtons. Then we use append() to add html content.
Easy!

Lines 10-12: We attach functions to the navigation buttons that will run when the buttons are clicked. The first
one goes to the previous slide (if we are not on slide 1) and the second one goes to the next slide (if we are
not on the last slide). On the first slide we wish to indicate that the BACK navigation arrow is disabled by set-
ting it's transparency to .1.

Lines 15-23: This is the function that moves the slideshow forward one slide. We do this by simply moving
the first slide upwards by 418px (the height is 400px+ 9px bottom padding + 9px top padding). We do this by
using the animate() command, courtesy of the JQuery library. The other slides will fall into place.

If we are on the first slide, that means we will be displaying the second slide, so we need to enable the back
navigation arrow (lines 17 - 20). We then increase our slide variable by one. If we are moving to the final
slide, we will need to disable the hover function on the forward navigation arrow (line 22).

Lines 26 - 34: Now we basically do the same thing in reverse. We move the first slide down by 418px, push-
ing the other lsides with it. We reenable the forward arrow if we are coming off the final slide. We disable the
back arrow if we are moving to the first slide.

33 if ( slide==1 ) { $ ( ' #nav1' ) .unbind ( ' mouseenter mouseleave' ) ;$ ( '#nav1') . c s ( " opacity","0.1") ; }
34 } / / changeslide
35
36
37 $ ( window) . r esize ( f unction( ) {
38 if ( $ ( document ) . width ( ) < =860 && previousWidth>860) {
39 $ ( ' #p1' ) . css( " margin-top","0px" ) ;
40 }
41
42 if ( $ ( document ) . width ( ) > =860 && previousWidth<860) {
43 var temp=( s l ide-1 ) *418;
44 $ ( ' #p1' ) . css( " margin-top","-"+temp+"px" ) ;
45 }
46
47 previousWidth=$( document ) . width ( ) ;
48 } ) ;
49
50 } ) ; //doc ready
Lines 37 - 48: These lines will execute whenever the browser window is resized. In particular, when mobile
devices are turned, the screen reorients and we want to make sure that doesn't spoil our nice formatting. In
particular, we need to know when the screen has changed from width of 860px or over to width of under
860px or vice versa (lines 38/42). If the screen is smaller, we want to make sure that the first slide is at the top
of the page (line 39). If the screen is going to 860px or larger, we want to move the correct slide into place
(lines 43/44). Finally, on line 47, we need to record the new screen width in case the screen is resized again.

Save the code under the name controller.js

Then test out the final product by opening index.html in a browser. Done!

A final word: You can find more tutorials of this kind here: flashbynight.com/tutes. And please check out the
games and stuff at flashbynight.com. If you like anything you see, please like it on Facebook or post it on
Twitter or any other social media.
Happy Coding!

HTML5 SlideShow Tutorial

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML5 SlideShow Tutorial

Hochgeladen von

Copyright:

Verfügbare Formate

a tutorial from flashbynight.

Das könnte Ihnen auch gefallen