17

Part 2: The Static Version Of The jQuery Featured Post Slider

This is where the fun begins. This is part 2 of creating a dynamic jQuery featured post slider that works with or without JavaScript. I guess you could say it's like 2 tutorials in 1, within a 3 tutorial series! Wow, that's a lot of tutorials. ...
Part 2: The Static Version Of The jQuery Featured Post Slider

Digg Delicious Stumble RSS

Let's get started

The first part of the tutorial talked about creating custom loops in WordPress . In this part I'll show you how to set up the slider for combining both parts 1 and 2 together to dynamically display the posts in the Featured category of your site.

All you really need to know right now is that this will show you how to create a jQuery featured post slider that works without JavaScript. With this you can progressively enhance your site, while increasing it's accessibility.
WordPress Hosting
When adding this type of advanced feature, you want people not using JavaScript to still have access the content, while providing the cooler stuff to everyone else.

You could use this as it is if you wanted to edit the content that would show in it manually, but that's not what you will want to do after the next part in this series I'm sure.

Demo
Download

This tutorial is the second one of three in the series.

The first thing you will need to do is download the jQuery Cycle plugin. Once you do, save it to the js directory in your project root. Do this with the other JavaScript file you'll hear more about later. This tutorial is a variation on a tutorial originally created by Jenna Smith. So I can not take full credit for creating it, I just modified it and made it work dynamically.

Here is what I'll be showing you how to make, which can be seen in action on the here on the demo page.

jq-slider

The HTML code

Here is the HTML you need to use in your page. First the <head> should have this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New2WP - jQuery Featured Post Slider</title>

<link rel="stylesheet" href="slider-style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>

And here is the <body> content of the page.


<body>

<div id="wrapper">
	<h1>Demo - jQuery Featured Posts Slider</h1>
	<div id="slider">

	<!--Slider Navigation
	---------------------->
		<ul class="slides-nav">
			<li class="on"><a href="#slide-one">Slide one</a></li>
			<li><a href="#slide-two">Slide two</a></li>
			<li><a href="#slide-three">Slide three</a></li>
			<li><a href="#slide-four">Slide four</a></li>
			<li><a href="#slide-five">Slide five?</a></li>
		</ul>

		<!--Sliding Contents
		------------------->
		<div class="slides">
			<ul>
				<li id="slide-one">
					<img src="http://new2wp.com/wp-content/uploads/2010/02/fun.png" />
					<h2>Slide one</h2>
					<p>And in the final tutorial, you would learn how to show excerpts of your posts here, instead of this static text. Yeah, take that you stupid static text! You'll also see how you can use wordpress custom fields to get and show a thumbnail image here, the image you see is also stupid and static.</p>
				</li>
				<li id="slide-two">
					<img src="http://new2wp.com/wp-content/uploads/2010/02/fun.png" />
					<h2>Slide two</h2>
					<p>This works like a tab menu when Javascript is disabled. So you can always see what's here!</p>
					<p><strong>That's what's up.</strong></p>
				</li>
				<li id="slide-three">
					<img src="http://new2wp.com/wp-content/uploads/2010/01/wordpress-loops.png" />
					<h2>Slide three</h2>
					<p>Post excerpts of your posts can be used, instead of this static text. Yeah, take that you stupid static text! You'll also see how you can use wordpress custom fields to get and show a thumbnail image here, the image you see is also stupid and static.</p>
					<p><strong>Well then, moving right along. Shall we?</strong></p>
				</li>
				<li id="slide-four">
					<img src="http://new2wp.com/wp-content/uploads/2010/02/fun.png" />
					<h2>Slide four</h2>
					<p>Did you know? The industry's standard dummy text ever since the 1500s has been Lorem Ipsum, ever since an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
				</li>
				<li id="slide-five">
					<img src="http://new2wp.com/wp-content/uploads/2010/01/wordpress-loops.png" />
					<h2>Slide five</h2>
					<p>If you are reading this, then you must be interested in what each slide says for some reason when that is not the point of this. But while you are reading this, you might be wondering why I made 5 slides for a demo page. It is what I created for the New2WP homepage slider, so therefore this tutorial will be more similar in looks to the thing I am showing you how to make, capiche?</p>
				</li>
			</ul>
		</div>
	</div>

</div><!--/wrapper-->

</body>
</html>

This has all the necessary code for building the 2 lists that display the slider navigation class #slides-nav and the .slides themselves.

Adding CSS some styles and stuff

The CSS is important here because without it certain things wouldn't work at all. jQuery and CSS go very well together, and you are able to do so many things by combining them. Though it can be difficult to work with if you don't use Firebug when you have divs that are hidden or when you need to see the padding or margins of an element.


/* slider
/* ---------------------------------------------------- */
#slider {
	background: #5a6173;
	border:0px solid #999;
	margin:0px;
	padding:10px;
	position:relative;
}
#slider ul {
	height: 1%; /* IE fix */
	list-style-type: none;
	padding: 0;
	position:relative;
}
#slider ul:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

/* slider > SLIDES
/* ---------------------------------------------------- */
.slides {
	border:1px solid #fff;
	background:#bdc3ce;
	color:#182431;
	padding:10px;
	position:abosolute;
	margin:10px;
}

.slides ul { width:9999px; }

.slides li {
	background:#bdc3ce;
	height:205px;
	margin:0px;
	overflow:hidden;
	padding:0px;
	position:relative;
	width: 470px; /* Width of slides box */
}
.slides h2, h2 a {
	font-size: 20px;
	margin:0px;
	padding:0px;
}
.slides img {
	float:left;
	margin-right:10px;
	overflow:hidden;
	padding:0px;
}
.slides p { 
	margin:0px;
	overflow:hidden;
	padding:0px;
}

/* slider > NAVIGATION
/* ---------------------------------------------------- */
.slides-nav {
	clear:both;
	float:right;
	position:absolute;
	right:10px; /* make this a negative number to make nav hang off */
	top:10px;
	width: 330px;
	z-index:100;
}
.slides-nav li { margin-left:4px; }

.slides-nav li a {
	background: #182431 url(images/inactive.png) left top repeat-x;
	color:#fff;
	display: block;
	font-size:14px;
	font-weight:bold;
	margin:0 0 0px 0;
	padding: 13px 5px;
	text-decoration:none;
}

For styling the highlighted tab, you can add this to your stylesheet.


/* slider > ACTIVE TAB
/* ---------------------------------------------------- */
.js #slider .slides-nav li.on a {
	background: url(images/active.png) left center no-repeat;
	color:#182431;
	margin:0 0 0 -15px;
	padding:12px 5px 12px 20px;
}
.js #slider .slides-nav li.on a {
	position: relative;
	top: 0px;
}

You can of course edit the styles to suit your needs, this is just the CSS I created for the slider on the demo so you can see what it looks like.

Finally we write the jQuery code

Since the we included the jQuery library, and other JavaScript files in the page HTML already, all we need to do is create the slider script.


$slider = {
    context: false,
    tabs: false,
    timeout: 1000,      // time before next slide appears (in ms)
    slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
    tabSpeed: 300,      // time it takes to slide in each slide (in ms) when rotating through tabs
    fx: 'scrollLeft',   // slide control: fade, scrollLeft, right etc.

    init: function() {
        // set the context to help speed up selectors/improve performance
        this.context = $('#slider');

        // set tabs to current hard coded navigation items
        this.tabs = $('ul.slides-nav li', this.context);

        // remove hard coded navigation items from DOM
        // because they aren't hooked up to jQuery cycle
        this.tabs.remove();

        // prepare slider and jQuery cycle tabs
        this.prepareSlideshow();
    },
    prepareSlideshow: function() {
        // initialise the jquery cycle plugin -
        // for information on the options set below go to:
        // http://malsup.com/jquery/cycle/options.html
        $('div.slides > ul', $slider.context).cycle({
            fx: $slider.fx,
            timeout: $slider.timeout,
            speed: $slider.slideSpeed,
            fastOnEvent: $slider.tabSpeed,
            pager: $('ul.slides-nav', $slider.context),
            pagerAnchorBuilder: $slider.prepareTabs,
            before: $slider.activateTab,
            pauseOnPagerHover: true,
            pause: true
        });
    },
    prepareTabs: function(i, slide) {
        // return markup from hardcoded tabs for use as jQuery cycle tabs
        // (attaches necessary jQuery cycle events to tabs)
        return $slider.tabs.eq(i);
    },

The part above sets up the slider, and prepares the slides. You can control the slider using more parameters than this, just visit the options page of the Cycle plugin

Next is the part that sets up and controls the tabs so they will cycle through showing each as highlighted.


    activateTab: function(currentSlide, nextSlide) {
        // get the active tab
        var activeTab = $('a[href="#' + nextSlide.id + '"]', $slider.context);

        // if there is an active tab
		if(activeTab.length) {
            // remove active styling from all other tabs
            $slider.tabs.removeClass('on');
            // add active styling to active button
            activeTab.parent().addClass('on');
        }
    }
};

This last part is to make sure the first tab is highlighted when the page first loads.


$(function() {
    // add a 'js' class to the body
    $('body').addClass('js');
    // initialise the slider when the DOM is ready
    $slider.init();
});

What makes it work without JavaScript...

Included in the code for the HTML page, you will notice that each slide has an ID set. To get this to work like a tab menu box all you have to do is reference the same ID in the corresponding href of each navigation link, like so:


// This is the nav button for slide one
<a href="#slide-one">Slide one</a></li>

// this is the ID of slide one
<li id="slide-one">

Just match the slide ID's to the nav href's. It's as simple as that. I think that concludes this tutorial. You will want to make sure to check out Part 3: making a dynamic featured post slider by combining Part 1: creating your own custom loops in WordPress, and Part 2: creating a static jQuery featured post slider. It will help you take your site to the 'next-level' and you'll learn some stuff too.

If you have any questions about the code let me know in the comments. It's already taken way longer to finish this post than I wanted it to. Plus there was a delay since I've been working on providing a better syntax code view for the site, and it is turning into a larger project than I intended it to. Time to make the donuts!

Shortlink:

Get automatic updates! Subscribe to Our RSS Feed or Get Email Updates sent straight to your inbox!

About the Author

Jared is from Boston working as a web and graphic designer. Also owns the design blog Tweeaks.com, and has designed many other websites powered by Wordpress including the New2WP theme.

Visit Jared's Website
Level: Demos, Featured, Rookie Posted by: Jared

User Comments

( ADD YOURS )

  1. WP Tricks February 17


    Thanks for share nice tricks

  2. FoO Iskandar February 20


    this error position with google chrome

    Info Kontes SEO: Peluang Usaha Ahasu Gnaulep | Begin The Plan & Kontes SEO: Peluang Usaha (Ahasu Gnaulep)

  3. Jared February 20


    Yeah I fixed it. Just removed the margin:0 auto; for the .slides class in the styles. If you look at the demo now, it should be showing correctly in chrome now. If it is not please let me know.

  4. Eivind August 19


    thanx for a great tutorial!
    Is it possible to have a slider inside the last slide?

    Inside the last slide I would like to ad a diffrent slider with a slide nav.

    thanx

  5. Eivind November 23


    Hi again!
    I really like this slider.
    I´m using it with 50 slides with a swf file in each. My problem is that all the 50 swf files loads at once and slows down the site. Is it possible to load the content onclick to solve my issue?

  6. Jared November 23


    The best way to do that would be to use jQuery so you could do Ajax requests on click events. You could get the ID of the posts that the slider loads, but instead of loading them all at once, you would send the the IDs of each to a script which would load the files based on the ID clicked.

    It's somewhat complicated, but it's doable.

  7. electronic mick December 14


    Do you know whats going on with explorer 9 beta? lot of wordpress templates are breaking in the new browser :(

  8. Jared December 15


    I don't know. I haven't been able to use IE9 yet because it requires Windows 7 and I only have/use XP. I would love to be able to try it though, I've heard great and seen some great things about it.

  9. david bill January 18


    Thanks for share nice tricks
    pass4sure 70-680|pass4sure 70-640

  10. Dean April 14


    I figured out how not have all nav items with class.on at the begining.

    First, in the html remove class="on" from elelemnt.

    Second add a function in slider.js that adds class to first li element:

    $(".slides-nav li:first").addClass("on");

  11. Patrícia May 26


    hey dear thanks for helping..

    i have question! when you say: "Finally we write the jQuery code", where exactly should I put this on my wordpress theme/? in functions.php? or on the js folder?

    thanks,
    Patrícia.

  12. Jared May 27


    You can put it right in the functions.php file, if you wrap it in a function. Or you can put it in a js file and include it in the footer of your site. I suggest doing that.

  13. Jen@Honeymoon Destinations June 3


    "Or you can put it in a js file and include it in the footer of your site. I suggest doing that."

    Sorry if this is a stupid question, but I just want to clarify since I'm not much of a coder. When you say put it in a js file and include it, do you mean put it in a text file ending with .js, then using the php include function to call it in the wordpress footer file? Or is there a special type of .js file?

    Thanks a lot!

  14. Jared June 3


    like this

    <script src="path_to_your_js_file.js" type="text/javascript"></script>

  15. tips on getting her back June 25


    I am so glad I came across this post. This was very helpful. I am in doubt in where to put the jquery code in function.php or jsfolder. a reply would be appreciated. I'm gonna bookmark this one. :)

Trackbacks


  1. Gadget Newz
  2. 11 jQuery Tutorials To Kick Off New2jQuery | New2jQuery

Add Your Comment

 ( Get A Gravatar )
  1. Avatar

    Your Name
    May 19