Home arrow JavaScript arrow Building a jQuery Slideshow
JAVASCRIPT

Building a jQuery Slideshow


In this two-part web development series, you will learn how to build a customizable slideshow with jQuery utilizing the fadeTo() method.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
June 13, 2011
TABLE OF CONTENTS:
  1. · Building a jQuery Slideshow
  2. · Controlling Slideshow Behavior with jQuery

print this article
SEARCH DEVARTICLES

Building a jQuery Slideshow
(Page 1 of 2 )

Let’s face it: if we were asked to make a list highlighting the top, most appealing features of jQuery, one of the items that we would include right off the bat would be its extendable API. Even though the library is relatively new (the first stable release was in 2006), its core functionality can be easily extended by an impressive number of plug-ins, which certainly satisfy the appetite of even the pickiest web designer.

There are many cases where the implementation of a certain feature or behavior can be achieved using the library’s built-in functionality and not relying on one of its many plugins. Surprisingly, this path can be much easier than you think, as you don’t need to deal with the learning curve and the hidden complexities of third-party packages, not to mention the additional file(s) that your web pages won’t have to download.

One common situation where it’s possible to get pretty satisfactory results with jQuery without having to turn to the plug-in field occurs during the implementation of a simple slide show. With the vast amount of excellent slide show plug-ins available out there, you must be thinking that I’m trying to reinvent the wheel, right?

Well, not really. If you only wish to create a navigable structure that permits users to easily visualize a bunch of images (or any other type of content) with fancy transition effects like fade-ins/outs, slides, etc., jQuery is all that you’ll need to get the mission accomplished. In this article series I’ll be demonstrating how to build a “plug-in free” jQuery-based slide show, which you’ll be able to tweak at will, either by customizing its markup or adding to it your own transitional animations.

Getting started: defining the slide show’s structural markup

Any decent slide show should be rooted in clean and solid markup, in that way it can be properly implemented by using Progressive Enhancement. Based on this simple –yet crucial requirement, the first step that I’m going to take will consist of defining the slide show’ structure.

The following (X)HTML document does exactly that. Check it out:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple slideshow with jQuery</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="main">
        <h2>jQuery-based Slideshow</h2>
        <ul id="slideshow">
            <li><img src="images/img1.jpg" /></li>
            <li><img src="images/img2.jpg" /></li>
            <li><img src="images/img3.jpg" /></li>
            <li><img src="images/img4.jpg" /></li>
            <li><img src="images/img5.jpg" /></li>
            <li><img src="images/img6.jpg" /></li>
        </ul>
        <ul id="controls">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
        </ul>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

The structure of the previous web page is very easy to follow, as it defines the typical “header”, “main” and “footer” sections that you’ve probably seen hundreds of times before. However, you should pay close attention to the “main” area, as it contains the slide show’s markup. As you can see, the images to be visualized have been wrapped inside an unordered list, while something similar has been done with the corresponding controls.

At this point, it’s pretty clear to see how the slide show will function: there will be a basic control panel composed of a few links, which will let users view a specific image when clicking on each of them.

Of course the real beauty of this schema is that the target images will remain visible - and therefore accessible - without adding a pinch of JavaScript to the containing document.

Finally, it’s time to polish the slide show’s visual appearance with the help of some CSS. The file responsible for doing this looks like this:

(css/styles.css)

body {
    background-color: #03426a;
    font: normal 0.9em Arial, Helvetica, sans-serif;
    color: #fff;
}
h2 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #9fffff; 
}
p {
    margin: 0 0 15px 0;
    line-height: 1.3em;
}
/* main wrapper */
#wrapper {
    width: 800px;
    margin: 0 auto;
}
/* header, main and footer elements */
#header, #footer {
    padding: 10px;
}
#main {
    padding: 10px;
    position: relative;
}
/* slideshow container */
ul#slideshow {
    width: 599px;
    height: 627px;
    margin: 0 auto;
    background: transparent url("../images/frame.png") center center no-repeat;
    position: relative;
}
/* slideshow controls container */
ul#controls {
    position: absolute;
    top: 650px;
    left: 309px;
    overflow: hidden;
}
ul#controls li {
    float: left;
    width: 30px; 
}
/* slideshow controls */
ul#controls li a {
    display: block;
    width: 30px;
    height: 35px;
    background: #eee url("../images/button_sprite.png") 0 0 no-repeat;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 35px;
    text-shadow: 1px 1px 1px #fff;
    color: #000;
}
ul#controls li a:hover {
    background-position: -30px 0;
}

The above CSS fragment is fairly simple to grasp, since it styles the document’s H2 elements and paragraphs and also assigns a relative position to the slide show’s container (as it was said before, an unordered list). If you’re wondering why I decided to do this, the answer is simple: by placing this element relatively, it will make it easy to use jQuery to position the target images absolutely and assign them the same z-index = 0 value (in other words, they’ll reside in the same background layer).

Finally, when a link in the control panel is clicked, the associated image will be brought to a higher layer (i.e. z-index = 10 or the value that best suits your needs), in this way implementing a functional slide show, whose transition effects can be customized with minor struggle.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials