Home arrow JavaScript arrow Customizing jQuery Slideshows: slideUp() and slideDown() methods
JAVASCRIPT

Customizing jQuery Slideshows: slideUp() and slideDown() methods


In this third part of the series, I create another interesting variation of the original slide show. This variation uses the slideUp() and slideDown() methods to implement a different transition effect between the target images.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
October 13, 2011
TABLE OF CONTENTS:
  1. · Customizing jQuery Slideshows: slideUp() and slideDown() methods
  2. · Using the

print this article
SEARCH DEVARTICLES

Customizing jQuery Slideshows: slideUp() and slideDown() methods
(Page 1 of 2 )

If you’re planning to spice up your website with a jQuery-driven slide show, but don’t want to deal with the complexities of a full-blown plug-in, then keep reading this article series. I show you step by step how to implement, from scratch, a highly-customizable, “plug-in free” slide show that uses only the functionality provided by a few native jQuery methods. And best of all, you’ll be able to create appealing transition effects without having to deal with hard-to-grasp animation algorithms.

Naturally, if you've already read the two previous tutorials of this series, you have a pretty clear idea of how to create such a slide show. In those installments I developed two slightly different versions of it. The first one made use of the “fadeTo()” method to implement a soft fade-in/out effect when visualizing the corresponding images, while that the second one utilized the “hide()/show()” tandem to achieve a similar result. It’s valid to note, however, that in both cases, the slide show’s underlying logic remained practically identical, which opens the doors to being creative with the transitions.

You're probably wondering how to fire up that spark of creativity, right? Well, since changing the animation effects applied to the target images can be done with only minor hassles (and without being a jQuery guru), in this third tutorial I’ll be creating another appealing variation of the slide show implemented previously. This time, we'll use the “slideUp()” and “slideDown()” methods to hide and display the pertinent images.

Has the topic caught your attention? Then start reading!

Review: Implementing a native jQuery slide show with the “hide()” and “show()” methods

As usual, prior to showing how to produce an appealing variation of the slide show built in the previous tutorial of the series, I'm going to show you its current source code. This way you can study it in more detail and understand (or incidentally recall) how it works.

In its current version the slide show takes advantage of the “hide()” and “show()” jQuery methods to implement a neat transition effect when visualizing the corresponding images. Well, its containing web page looks like this: 

<!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 show()/hide() methods</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>

Since the structure of the above (X)HTML document was covered in depth already, I’m not going to waste your valuable time discussing it here. All that you need to know is that the first unordered list identified as “slideshow” acts (not surprisingly) like a container for the slide show’s images, while the second one sets up the skeleton for the corresponding control panel.

And now that you've seen the structure upon which the slide show is set, it’s time to show the CSS file that polishes its visual presentation. Here it is:

(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 previous CSS snippet is fairly easy to follow. Even so, make sure to download the supporting files here (http://www.devhardware.com/forums/attachment.php?attachmentid=10999) to have a better understanding of how each background image has been used to improve the slide show’s overall appearance.

Finally, here’s the JavaScript bit that makes the slide show work properly, thanks to the “clever” manipulation of the z-index property of the target images. Take a close look at it:

(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()
            .hide('slow');
        // bring the current element to the front layer (z-index = 10) and make it visible
        li
            .css('z-index', 10)
            .addClass('current')
            .stop()
            .show('slow');
    });
});

As the above code fragment demonstrates, each image in the slide show is hidden and displayed alternately via the “hide()” and “show()” methods. This process generates a pretty appealing transition effect (remember that when the latter is called with an argument like “slow” or “fast,” it animates the “width” and “height” attributes of an element simultaneously).

Of course, there’s plenty of room to be creative here and experiment with other kinds of transitions. Therefore, I’ll be showing you a slightly modified version of the earlier script. It will use the native “slideUp()” and “slideDown()” jQuery methods to animate each image in the slide show.

To learn more on this enhancement process, click on the link below 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