Home arrow JavaScript arrow Customizing jQuery Slideshows: Dynamic Control Panels
JAVASCRIPT

Customizing jQuery Slideshows: Dynamic Control Panels


In this final article of a series on customizing a slide show using native jQuery methods, I'll show you how to make the control panel show up only when JavaScript is enabled. 

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 8
October 27, 2011
TABLE OF CONTENTS:
  1. · Customizing jQuery Slideshows: Dynamic Control Panels
  2. · Rendering the control panel with jQuery

print this article
SEARCH DEVARTICLES

Customizing jQuery Slideshows: Dynamic Control Panels
(Page 1 of 2 )

Contrary to what you might believe, building a fully configurable slide show by using only a few native methods included jQuery, is a really simple and straightforward process. In previous articles of this series, I gave you some easy-to-follow examples; they showed how to apply different transition effects to a slide show with the "fadeTo()," "hide()/show()," "slideUp()/slideDown()" and "animate()" methods.

Even though I've shown you how easy it is to create different variations of the initial slide show simply by replacing one specific animation method with another, there’s one final improvement that needs to be added. Think carefully: what section of the slide show has been hard-coded within the markup and then brought to life with jQuery? Yes, you guessed right! Effectively, the control panel works fine when scripting is enabled on the browser; otherwise, it turns into an entirely useless interfacing structure.

The good news is that this accessibility issue can be fixed quickly. In this final chapter of the series I’ll be amending the slide show’s current script. This time, it will render the control panel only via JavaScript, and no extra markup will be required.

Are you eager to see how this final enhancement will be implemented? Then keep reading!

Review: using the “animate()” method

As I noted in the introduction, it’s dead simple to tweak the animation effect applied to the slide show’s images. Just in case you still haven’t read the preceding tutorial, where I explained how to do this with jQuery’s “animate()” method, I've reintroduced the source files corresponding to this example. This way you can quickly grasp how it works.
   
First, here is the web page that includes the slide show’s structural markup:

<!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 using the animate() method</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
</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>

As seen above, the skeleton of the slide show is comprised of only two sections. The first one holds the set of images to be randomly visualized, while the second one renders the control panel mentioned in the introduction. Both areas are plain unordered lists, which are styled with the following CSS file:

(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;
}

Even though I've pointed this out several times before, to better comprehend how the previous CSS styles do their thing, make sure to grab the slide show’s supporting material here http://www.devhardware.com/forums/attachment.php?attachmentid=10999. In doing so, you’ll be able to see more clearly how the earlier background images have been used to improve the container of the target images and the control panel.

Finally, here’s the script that provides the slide show with the required functionality, at the expense of using a hard-coded control panel. Check it out:

(js/slideshow.js)

$(document).ready(function () {
    // position absolutely all the <li> elements within the slide show
    $('#slideshow li').css({
        'position': 'absolute',
        'top': '92px',
        'left': '99px',
        'z-index': 0,
        'display': 'none'
    });
   
    // add the 'current' class to the first element of the slide show and make it visible
    $('#slideshow li:first-child')
        .addClass('current')
        .show();

    // display an element of the slide show according to the link clicked
    $('#controls a').click(function () {
        var li = $('#slideshow li:eq(' + $('#controls a').index(this) + ')');
        // do nothing when clicking on the current <li> element
        if (li.hasClass('current')){return};
        // push the previous element back to lowest layer (z-index = 0) and hide it from view
        $('.current')
            .css('z-index', 0)
            .removeClass('current')
            .stop()
            .animate({width: 'toggle'}, 500);

        // bring the current element to the front layer (z-index = 10) and make it visible
        li
            .css('z-index', 10)
            .addClass('current')
            .stop()
            .animate({width: 'toggle'}, 500);
    });
});

As I explained at the beginning, the script in its current version uses the “animate()” method to hide and display the target images when clicking on the corresponding links in the control panel. Needless to say that it’s possible to get a bit more creative and utilize the pertaining method to animate other properties of the images, including the opacity, or even using a slightly more complex transition algorithm. The possibilities are plethoric, actually.

But before you put your jQuery skills into action and start playing around with different animation effects, it’s necessary to modify the previous script and make it render dynamically the control panel instead of doing this within the markup (remember that this has a serious accessibility issue, right?).

That’s precisely what I’ll be doing in the following segment. Thus, jump ahead and keep reading.


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