Part 2: The Static Version Of The jQuery Featured Post Slider
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.
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.
This tutorial is the second one of three in the series.
- Part 1: Creating Your Own Custom Loops In WordPress
- Part 2: The Static Version Of The jQuery Featured Post Slider
- Part 3: Making A Dynamic WordPress jQuery Featured Post Slider
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.
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!
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.
User Comments
( ADD YOURS )WP Tricks February 17
Thanks for share nice tricks
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)
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.
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
Trackbacks