Creating a Slideshow for a Web Page

What you will learn:

Prerequisites:

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. It’s a
ticking timer that we can put on a web page and can be used to trigger events. 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 that’s fine, too.

You can view a working example here. 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.

Download the completed source files here

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 could right-click and save the images below or you could grab them from the source files using the link at the top of the page.

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

Although you could use Dreamweaver or similar software, to create an HTML document, you don’t need any special software, you can simply use any text editor such as Textpad or Wordpad. Open your text editor and type:

 

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 common
Javascript library used by web developers and has become pretty much a standard feature of any modern
site. You can download JQUERY from jquery.com or get it from the project files (here). You must rename it to
jquery.js and it must be in the same folder as our html file.
- Controller.js will hold the coding for our slideshow; we will write this shortly

Line 4 contains settings for how the page will look on a mobile device—to 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 structure 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 above and change it so:

<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 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>

<div class="block" id="p2">
<img src="img2.png" class="pix1">
<span class="blocktitle">Slide 2</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 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>

<div class="block" id="p3">
<img src="img3.png" class="pix1">
<span class="blocktitle">Slide 3</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 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>

<div class="block" id="p4">
<img src="img4.png" class="pix1">
<span class="blocktitle">Slide 4</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 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>

</div>
</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.

CSS

As with our html document, you can use a simple text editor to create our CSS document:

body{
background-color:#ecf0f1;
}

#topbar{height:150px;width:860px;margin:auto;margin-bottom:10px; }
#topbar img{float:left;}

.pix1{float:right;position:relative;margin:5px;}
.block{background-color:#ffffff; border-radius:3px; padding:9px; width:782px; margin:auto; height:400px; font-family: tahoma,verdana,arial,sans-serif;}

.blocktitle{font-size:40px;margin-top:10px;}
.blocktext{font-size:20px;color:#666666;}

#nav1{position:relative;margin-left:10px;}
#nav2{position:relative;margin-left:10px;}
#nav2:hover{opacity:0.7;}

#outerHolder{width:860px;margin:auto;}
#mainHolder{width:800px;overflow:hidden;height:400px;}
#navButtons{float:right;}

@media screen and (max-width:860px){
#topbar {height:auto;width:100%; }
#topbar img{width:100%; }
#spacer{height:auto;}
#navButtons{visibility:collapse;}
#navButtons img{width:0px;}
#outerHolder{width:100%;}
#mainHolder{width:100%;height:auto;overflow:visible;}
.block{height:auto;width:auto;min-height: 500px;margin-bottom:10px;}
.pix1{width:40%;height:auto;}
.blocktitle{width:100%;}
}

@media screen and (max-width:550px){
.block{min-height: 300px;}
.blocktext{font-size:14px;}
.pix1{width:30%;}
.blocktitle{font-size:18px;}
}

Line-by-line explanation:

Lines 1-3:

body{
background-color:#ecf0f1;
}

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 attribute overflow:hidden; is important to understand. It means that any content that 'overflows' the mainHolder 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 navigation 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.

javascript

As with our html document, you can use a simple text editor to create our javascript code:

$(document).ready(function () {

var slide=1;
var numberOfSlides=$('div#mainHolder div').length;
var previousWidth=$( document ).width;

$('#navButtons').append("<div id= 'nav1'><img src='b1.png'></div>");
$('#navButtons').append("<div id= 'nav2'><img src='b2.png'></div>");

$('#nav1').click(function(){ if(slide!=1){changeSlideBack();}})//nav1click
$('#nav2').click(function(){ if(slide!=numberOfSlides){changeSlideForward();}})//nav2click
$('#nav1').css("opacity","0.1");


function changeSlideForward(){
$('#p1').animate({"marginTop":"-=418px"});
if(slide==1){
$('#nav1').css("opacity","1");
$('#nav1').hover(function(){$('#nav1').css("opacity","0.7");},function(){ $('#nav1').css("opacity","1");});
}
slide++;
if(slide==numberOfSlides){$('#nav2').unbind('mouseenter mouseleave');$('#nav2').css("opacity","0.1");}
}//changeslide


function changeSlideBack(){
$('#p1').animate({"marginTop":"+=418px"});
if(slide==numberOfSlides){
$('#nav2').css("opacity","1");
$('#nav2').hover(function(){ $('#nav2').css("opacity","0.7");},function(){ $('#nav2').css("opacity","1");});
}
slide--;
if(slide==1){$('#nav1').unbind('mouseenter mouseleave');$('#nav1').css("opacity","0.1");}
}//changeslide


$(window).resize(function(){
if($( document ).width()<=860 && previousWidth>860){
$('#p1').css("margin-top","0px");
}

if($( document ).width()>=860 && previousWidth<860){
var temp=(slide-1)*418;
$('#p1').css("margin-top","-"+temp+"px");
}

previousWidth=$( document ).width();
});

});//doc ready

 

Lines 1 & 50:

Everything within these lines will execute as soon as the page is fully loaded (the document is ready).

Lines 3-5:

We’ll 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 resized, 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 setting 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, pushing 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.

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!

===

If you found this tutorial useful, Tweet it or give it a mention on Facebook. If you want more tutorials like this, please visit flashbynight.com/tutes

Happy Coding!

 

 

blog  |  twitter  |  tutes | about