Image may be NSFW.
Clik here to view.
Being a showcase for the Flash work of Untold Entertainment, the image slider is used as the main focus of the home page and displays his latest projects. Continuing from the first two tutorials, I’ll now show you how to create this slider with jQuery.
We’ll be treating the slider as a separate element from our Twitter bar before, so no need to use old code here.
With the abundance of jQuery image gallery plugins and scripts it’s safe to say that jQuery makes this sort of thing in particular run a lot more smoothly than with plain JavaScript. This section will be the easiest part of the series.
Let’s dive in.
First have a look at the slider demo.
The Markup
We’ll start with the HTML tags.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="slider"> <div id="image"> <a id="prev" href="#"></a> <a id="next" href="#"></a> </div> <div id="content"> <h3> <a href=""></a> </h3> <p> </p> </div> </div> |
#slider: The container element that wraps everything.
#image: This contains the large image and navigation buttons (#prev and #next). The image is actually a background, but more on that later.
#content: Holds elements for the project title (<h3>) and excerpt (<p>). The <a> inside the title creates a link to the page that the project is on.
Setting Up jQuery and the Projects Array
If you’ve followed the previous tutorials, including jQuery is still as straight-forward as it was before. Again, we’ll be drawing it in from the Google Code repository.
I’ve also added an extra empty tag that we can add our own code into.
1 2 3 4 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> </script> |
JavaScript should go above the main HTML content (at the start of the <body> if your document has it).
Inside the empty script tag, set up our “projects” array like so.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | var projects = [{ image: "http://www.untoldentertainment.com/blog/img/projects/bestEd/hedgeYourBets/thumb.jpg", title: "Best Ed – Hedge Your Bets!", excerpt: "", link: "http://www.untoldentertainment.com/blog/2009/09/17/best-ed-hedge-your-bets/" }, { image: "http://www.untoldentertainment.com/blog/img/projects/bestEd/crossingDog/thumb.jpg", title: "Best Ed – Crossing Dog", excerpt: "", link: "http://www.untoldentertainment.com/blog/2009/09/17/best-ed-crossing-dog/" }, { image: "http://www.untoldentertainment.com/blog/img/projects/bloat/bloat.jpg", title: "Bloat.", excerpt: "Our company president created Bloat. in roughly twenty-two hours at TOJam 4, a weekend-long game development expo. Bloat. is a true [...]", link: "http://www.untoldentertainment.com/blog/2009/05/05/bloat/" }, { image: "http://www.untoldentertainment.com/blog/img/projects/AWTY/eyeInTheSky/EyeInTheSky.jpg", title: "Eye in the Sky", excerpt: "We created this spot-the-differences game for Sinking Ship Entertainment’s Are We There Yet? World Adventure kids’ travel teevee [...]", link: "http://www.untoldentertainment.com/blog/2008/11/28/eye-in-the-sky/" }, { image: "http://www.untoldentertainment.com/blog/img/projects/AWTY/trainTrack/trainTrack.jpg", title: "Train Track!", excerpt: "We were approached by Sinking Ship Entertainment to create an eye-spy game for their kids’ travel teevee show Are We There Yet? World [...]", link: "http://www.untoldentertainment.com/blog/2008/11/28/train-track/" }]; var project_id = 0; |
The script uses JSON notation to create an array of objects, each with the same set of attributes: “image”, “title”, “excerpt” and “link”.
We would print these onto the page using PHP, looping through database rows in a WordPress setup. This won’t be covered as it’s irrelevant how the information gets to the page. This set of example project data will work on its own for now.
The project_id variable holds the array key for our current project data object. This means we can change this number (with the navigation buttons) and call a whole new set of data when we want it to load.
Attaching Clicks to the Navigation Buttons
To allow ourselves to reference our HTML elements, we have to wait for them to load before we call our JavaScript to interact with them. For this we can either place the JavaScript after our HTML, or use jQuery’s nice “document ready” check to do this for us, and still keep our JavaScript at the top.
Here I’ll use the jQuery method. Generally it lets us to load all of our JavaScript first, allowing a smoother page load and cuts out some jerky effects.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $(function() { $('#prev').click(function() { project_id--; if(project_id < 0) { project_id = projects.length - 1; } load_project(); return false; }); $('#next').click(function() { project_id++; if(project_id > projects.length - 1) { project_id = 0; } load_project(); return false; }); load_project(); }); |
In each case, clicking one of the buttons adds or removes one from project_id. If it is less than zero or greater than our maximum index in projects (five) then it is reset to the other side of the scale.
For example, pressing the previous button when you are looking at the first project (ID of zero), the slider skips to the fifth project in the list. Clicking next from here takes you back to the first element, and so on.
load_project()
This is what is called when the page is loaded and when a navigation button is clicked. It takes the project_id and populates the slider with all information attached to that array key inside projects.
I’ll go through this one a bit at a time.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | function load_project() { var project_data = projects[project_id]; $('#image').css('backgroundImage', ''); $('#content h3 a') .attr('href', project_data.link) .text(project_data.title); $('#content p').text(project_data.excerpt); if(project_data.excerpt != "") { $('#content p').append(' <a href="' + project_data.link + '">keep reading</a>'); } $('<img src="' + project_data.image + '" />') .load(function(responseText, textStatus, XMLHttpRequest) { $('#image').css('backgroundImage', 'url("' + project_data.image + '")'); }); } |
Line 5: Removes any overridden background image styles on “#image” to display the “loading” spinner.
Lines 7-9: Adds an href to the title allowing it to link to an external page, and fills in the title text. These are both taken from the current item in the list of projects (referenced here as project_data).
Lines 11-16: The first line fills in the <p> tag with the excerpt text. If the excerpt is not an empty string, an extra “keep reading” link is also added to the end of the text linking to the project page. This is the same link used for the title.
Lines 18 and 19: jQuery creates a DOM element of an image, with its source linking to the current project’s image URL. We can then use this to track how long it takes to load, as done here with the built-in .load() method.
When the element has loaded (read: the image has been fully downloaded into your browser), it issues a callback to JavaScript. Anything we put inside of this callback will only be run once the requested image is available to be displayed. The main reason here being to switch out the “loading” spinner.
Line 21: Here we edit the background of the “#image” container again, this time changing it to the image for the current project and overriding the spinner.
Adding Style
If you’re familiar with basic CSS, these will be pretty straight-forward.
However, pay particular attention to the :hover pseudo on the navigation buttons. Since we want the buttons to animate when we hover over them and not on its own or on a timer, it’s useful to do this with CSS here instead of JavaScript.
Again, this part goes right at the top before everything else (in the <head> section if your document has one).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <style type="text/css"> *{ margin:0; padding:0; } #slider { width:466px; margin:auto; margin-top:100px; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; } #image { background:#fff url('loader.gif') 0 0 no-repeat; height:340px; } #content { background:#eee; height:100px; } #image a { margin-top:280px; width:50px; height:50px; text-align:center; background:none url('prev.png') 0 0 no-repeat; text-decoration:none; color:#222; } a#prev { background-image:url('prev.gif'); float:left; } a#prev:hover { background-image:url('prev-hover.gif'); } a#next { background-image:url('next.gif'); float:right; } a#next:hover { background-image:url('next-hover.gif'); } </style> |
And that’s it. Here is what your final slider will look like.
Image may be NSFW.
Clik here to view.