Home arrow JavaScript arrow Customizing jQuery Slideshows: hide() and show() methods
JAVASCRIPT

Customizing jQuery Slideshows: hide() and show() methods


In this second part of a multi-part series, you'll see how easy it is to create a slide show with jQuery. We'll use several different techniques to animate the target images.

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

print this article
SEARCH DEVARTICLES

Customizing jQuery Slideshows: hide() and show() methods
(Page 1 of 2 )

With the variety of full-featured slide show jQuery plug-ins available nowadays, building this popular interfacing element using only the functionality of the library seems almost pointless, or at least Utopian. It isn't. If you want to set up a simple mechanism on your web site that lets visitors sequentially view a set of images via a control panel composed of a few links, you can tackle the entire development process without dealing with the oddities of a third-party package at all.

Skeptical? In the first part of this series, I went through the construction of an extendable slide show, whose driving logic was implemented from top to bottom using only some native jQuery methods. What's more, in its current incarnation, this sample slide show is capable of switching each image via a smooth fade-in/out transition effect, achieved with the library's "fadeTo()" method.

Thanks to its flexible structure, however, it's ridiculously simple to create different and engaging variations of the initial slide show by altering only the transitional animations. If you're interested in learning how to accomplish this, in this second part of the series I'll be introducing some minor changes to the original slide show. This time, it will display the pertinent images using the complementary "hide()/show()" jQuery methods, instead of the aforementioned "fadeTo()."

Now, it's time to continue exploring how to build different types of "plug-in free" slide shows with jQuery. Let's go!

Review: implementing a simple slide show using the "fadeTo()" method

As I mentioned in the introduction, the implementation of a customizable slide show with jQuery is a no-brainer process that can be mastered in a snap. However, if you still haven't read the article that precedes this one, below I included the source files corresponding to the initial version of the slide show (also, be sure to download the supporting material here http://www.devhardware.com/forums/attachment.php?attachmentid=10999.

Having said that, here's the (X)HTML document containing the slide show's markup. Look at it, please:

<!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 fadeTo() 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>

The structure of above web page is extremely easy to follow. As depicted above, the slide show's markup is composed of two sections, broken down in two unordered lists. The first one includes the group of images to be visualized, while the second one contains the controls that sequentially display each picture. That's pretty simple to grasp, isn't it?

Now, check the following CSS file, which not surprisingly is tasked with defining the slide show's visual presentation:

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

Although the earlier CSS styles are indeed self-explanatory, I (again) recommend that you to check the slide show's supporting files to better understand how the supplied background images have been used to decorate each section of the previous web page, including the slide's main container and the corresponding control panel.

And now that you know how this CSS file does its thing, take a look at the one below. It actually puts the slide show in action, thanks to the use of some native jQuery methods:

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

While at first sight, the above script seems to be complex and hard to understand, it's not that difficult, believe me. The script simply stacks all of the target images in the same background layer (by using the z-index property), and then makes the first one visible. Once this has been done, each image is brought to a higher layer and faded in/out when clicking on the associated link in the control panel.

Moreover, if you analyze the script more closely, you'll realize that the target images are displayed by using the "fadeTo()" method, which produces a neat fade-in/out transition. As I noted at the beginning, however, it's simple to replace this method with another one and create an entirely different transition.

In keeping with this idea, in the next section I'll be amending the previous script. This time, it will switch each image in the slide show by means of the "hide()" and "show()" methods.

To learn the fine details of this revamping 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