I come from a more traditional print design background and came to web design through a combination of market demand and my innate stubborn desire to make myself learn things I don’t know. I’ve gotten myself pretty well versed in HTML and CSS along the way, but draw the line when it comes to scripting or programming languages. Long-story short, I don’t personally write any JavaScript.
I do, however, integrate quite a bit of JavaScript features into my web work. I’m lucky enough to have a business partner that has a programming background and can make pretty much anything under the sun. Because of this, I have accumulated a pretty decent library of custom-made or customized common JavaScript features I can pull from when I work on a site. I’ve decided that I’d begin to share some of these in case anyone else would like to make use of them.
The first JavaScript feature we’ll be working on is a rotating banner as these types of banners are now becoming a very popular feature, especially on commerce and portfolio-type websites. This particular banner happens to be both responsive and super easy to implement.
Adding jQuery to Your Page
Our JavaScript feature is dependent on a large JavaScript library called jQuery. This is common with most prewritten JavaScript, as it significantly limits the amount of JavaScript code we have to deal with directly and more importantly, it reduces the amount of JavaScript we need to host on our own server.
Our first step is to add a link to the jQuery library itself. Lucky for us Google provides access to a whole bunch of libraries for free on developers.google.com, but the specific reference code we are looking for is jQuery 1.x snippet as seen in (fig. 1)
All we need to do is Copy the small chunk of code that appears after the 1.x Snippet: heading and Paste it into our HTML head section.
Here it is for easy reference:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
I like to put mine below my stylesheet. My typical head section looks something like this:
<head>
<title>Adding a Bit of Javascript</title>
<link href="css/style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
Notice that the code begins with a <script> and ends with </script>. All JavaScript links will look like this. You’ll also notice that inside the opening tag is a src= attribute giving an address to where that bit of script (term for JavaScript code) lives. In this case it lives in a googleapis.com site.
Adding Our Banner JavaScript
Now if we want to add our banner JavaScript to this site, we’ll need to create our own JavaScript file. This time, instead of just simply linking to an external website, like we did with the jQuery library, we will actually host this bit of code ourselves. It’s actually quite a bit like dealing with a stylesheet, so the process should seem somewhat familiar to most of you.
- Inside the root folder, create a js folder (short for JavaScript)
- Open up your code editor.
- File > New to open a new file
- File > Save
- Navigate to the “js” folder you just created
- Name your file, script.js
- Hit Save
Just like if we had made a stylesheet, we would have to link it to our HTML page. The same thing applies here. We need to go our HTML page and use the same <script></script> tags we used to bring in the jQuery library to let the site know we have another JavaScript file to load, only difference is that this one lives in our root folder, so our address will need to reflect that. Let’s go ahead and create the link.
Here’s How your head section of your HTML should look:
<head>
<title>Adding a Bit of Javascript</title>
<link href="css/style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
It’s very important that you put the link to the jQuery library first and then any other JavaScript link after that. Order is important. The browser installs resources from the top down, so it needs to install the jQuery library before it installs our script.js for things to work properly.
The JavaScript we’re going to use for our banner initially comes from Jonathan Snook, but has been restructured for our purposes.
Let’s first take a quick look at the prewritten JavaScript that we will use for our slideshow:
$(function() {
$('#slideshow img:gt(0)').hide();
setInterval(function() {
$('#slideshow :first-child')
.fadeOut(1000)
.next('img')
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 4000);
});
Are you feeling a little overwhelmed?
Me too.
That is the thing I was talking about earlier. Cleary JavaScript is a much different kind of animal than HTML or CSS. It’s the reason that many designers rely on programmers and developers to write the JavaScript components for our sites.
There are a few things that I want to point out about the code that we’ll need to know to make this work with our site:
- The first and most important are the
'#slideshow'references throughout the JavaScript. Similair to CSS, these are selectors that are telling us our slideshow will need to have anid="slideshow"in order for the JavaScript to be able work with it. - The next is the
4000value sitting at the end. This number controls the amount of time between transitions. Larger numbers provide for more time on each slide between the transitions and lower number will allow less time on each slide. - Third is the
.fadeOut(1000)and.fadeIn(1000). These numbers control just how long the cross fade between the slides takes. Once again larger numbers provide a lengthier cross fade and lower numbers a shorter cross fade.
Now that we’ve taken an initial look at the JavaScript we’ll be using, let’s add it to our site.
Copy the JavaScript from below in its entirely and Paste it into your script.js file. Make sure to Save your file when you are finished.
$(function() {
$('#slideshow img:gt(0)').hide();
setInterval(function() {
$('#slideshow :first-child')
.fadeOut(1000)
.next('img')
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 4000);
});
Setting up our Images to Be Rotated (HTML)
We saw when we dissected bits of the JavaScript code used to create our slideshow, we saw that we needed to use id="slideshow" to indicate the element that the JavaScript should work with. So for our slideshow, we’ll use a <figure> element with id="slideshow" and inside we’ll have three <img alt="" /> elements, each containing an image of the same exact size to rotate.
For images, I’ll be using some demo images available here. You can use your own, just make sure that they are all exactly the same size and already living inside your sites images folder.
Here’s how your HTML should look:
<figure id="slideshow">
<img src="images/banner_01.png" alt="" />
<img src="images/banner_02.png" alt="" />
<img src="images/banner_03.png" alt="" />
</figure>
and here’s how it looks in the browser. (fig. 2)
We can see that we already have most of what we are looking for. We have a rotating banner that switches between the three images, but the switch isn’t very smooth, the images aren’t responsive, and we don’t really need any margins here. To address these issues, let’s turn to our CSS.
Setting up our Images to Be Rotated (CSS)
In this case, the CSS can get a little bit complicated so I’m going to provide the code you can use in your site and make changes as you see fit.
/* makes images responsive */
img {
max-width: 100%;
}
/* takes care of clearing the floats */
#slideshow:after {
content: "";
display: table;
clear: both;
}
/* hides the images not being shown */
#slideshow img {
float: left;
margin: 0 -100% 0 0;
}
and here’s how it looks in the browser with the CSS from above applied. (fig. 3)
You can see we are close. We now have a functional reponsive slideshow. The only other thing we might want to do is get rid of the white edge around the edges. That is being caused by the default margin on the body, we can remove that by using our universal selector * { and setting our margin and padding to 0.
Here’s my revised CSS:
* {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
#slideshow:after {
content: "";
display: table;
clear: both;
}
#slideshow img {
float: left;
margin: 0 -100% 0 0;
}
and here’s how it looks in the browser. (fig. 4)
As you see, that did take care of our white edge. Our banner now fully extends to the edge of our browser window.
We can add as many images as we want to our slideshow. It is just a matter of adding additional images inside our figure tag. Also, it’s worth reminding you at this point that any images you want incorporated into the slideshow need to be the exact same height and width. Other sizes will rotate, but the slideshow will jump from size to size and look very messy.
That wraps it up. You now know how to create a rotating banner using some simple HTML, a bit of prewritten CSS, and a chunk of prewritten JavaScript.
Web Design for Graphic Designers
A Step-by-Step Guide for creating a modern, responsive website from scratch
Co-authored by Jillian Noble and Ryan Krug
Published by EMSPACE
Thank you! You saved me tons of work and experimentation. And it just simply works! Thank you again! 🙂
You’re welcome!
What is the size of the pictures? i can’t seem to access the picture files
The pictures are 900 X 514. Sorry about the link, looks like upload link has a bug. You can get them here. Give the page a second to load, it may look blank for just a second before the download appears.