As I mentioned before, I am a big fan of the redesign of whitehouse.gov that happened when Obama was inaugurated. One of the other things I impressed me was its use of a slider on the home page to trumpet featured posts.
Because I am in the middle of a building a new website for the organization I work for, Northwest Federation of Community Organizations, I thought I would attempt a similar slider.
Here is the demo, and below are notes on how I got there.
According to this site, my beloved slider is created using jQuery and the Cycle plugin.
I visited Cycle plugin site and downloaded the zip archive. I used the following:
- example.html
- style.css
- jquery-1.2.6.min.js
- jquery.cycle.all.min.js
- 4 photographs that I had on hand, making sure that they were of the same height and width
First I customized the HTML and the CSS to fit my needs.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>JQuery Cycle Plugin - Example Slideshow</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/cycle1.css" media="screen">
<!-- include jQuery library -->
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<div>
<img src="images/feature1.jpg" width="615" height="410" />
<img src="images/feature2.jpg" width="615" height="410" />
<img src="images/feature3.jpg" width="615" height="410" />
<img src="images/feature4.jpg" width="615" height="410" />
</div>
</body>
</html>
and
.slideshow {
height: 442px; /* took image dimensions & added 32px to both height and width to reflect padding in .slideshow img + 1px border */
width: 647px;
margin: auto;
}
.slideshow img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
}
It immediately begins to work! See example #1.
Setting Cycle options
To specify the Cycle options that I wanted, I looked to the following page, http://malsup.com/jquery/cycle/begin.html. Based on this information, I made the following changes to the Cycle’s options.
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 2000, // defines the number of milliseconds it will take to transition from one slide to the next.
timeout: 2000, // specifies how many milliseconds will elapse between the start of each transition
});
});
</script>
Pausing the slideshow
I wanted the slideshow to pause if the user’s mouse hovers it – maybe the user is trying to click on something. It would be good to give the user the opportunity to do so without the slideshow continuing to transition. Setting the pause was simple. I just added the following line to Cycle’s options.
pause: 1
Now the script looks like this
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 2000, // defines the number of milliseconds it will take to transition from one slide to the next.
timeout: 2000, // specifies how many milliseconds will elapse between the start of each transition
pause: 1, // so that pauses when user hovers over a slide
});
});
</script>
See example #2. Below are the HTML & CSS at this point.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>JQuery Cycle Plugin - Example Slideshow</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/cycle2.css" media="screen">
<!-- include jQuery library -->
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 2000, // defines the number of milliseconds it will take to transition from one slide to the next.
timeout: 2000, // specifies how many milliseconds will elapse between the start of each transition
pause: 1, // so that pauses when user hovers over a slide
});
});
</script>
</head>
<body>
<div>
<img src="images/feature1.jpg" width="615" height="410" />
<img src="images/feature2.jpg" width="615" height="410" />
<img src="images/feature3.jpg" width="615" height="410" />
<img src="images/feature4.jpg" width="615" height="410" />
</div>
</body>
</html>
and
.slideshow {
height: 442px; /* took image dimensions & added 32px to both height and width to reflect padding in .slideshow img + 1px border */
width: 647px;
margin: auto;
}
.slideshow img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
}
Setting a navigational pager
As seen on http://malsup.com/jquery/cycle/int2.html, this is surprisingly easy.
Looking at the script around Cycle, I found this line:
$('.slideshow').cycle({
and edited it to look like this:
$('.slideshow')
.before('<div id="nav">')
.cycle({
In the list of Cycle options, I added this:
pager: '#nav' //instructs the plugin to create navigation elements, one for each slide, and add them to the container identified by the value of the pager option.
The script section now looks like this:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow')
.before('<div id="nav">')
.cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 2000, // defines the number of milliseconds it will take to transition from one slide to the next.
timeout: 2000, // specifies how many milliseconds will elapse between the start of each transition
pause: 1, // so that pauses when user hovers over a slide
pager: '#nav' //instructs the plugin to create navigation elements, one for each slide, and add them to the container identified by the value of the pager option.
});
});
</script>
These lines were added to my CSS
#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px; }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }
To allow slide navigation to rest on top of the slideshow box, the CSS also received this:
#nav {
width: 647px; /* to match width of .slideshow */
margin: auto;
}
My CSS now looks like this:
.slideshow {
height: 442px; /* took image dimensions & added 32px to both height and width to reflect padding in .slideshow img + 1px border */
width: 647px;
margin: auto;
}
.slideshow img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
}
#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px; }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }
#nav {
width: 647px; /* to match width of .slideshow */
margin: auto;
}
Adding some text to slideshow
Because every child element of the container becomes a slide, will experiment with adding some text. Changing html to…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>JQuery Cycle Plugin - Example Slideshow</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<!-- include jQuery library -->
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow')
.before('<div id="nav">')
.cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 2000, // defines the number of milliseconds it will take to transition from one slide to the next.
timeout: 2000, // specifies how many milliseconds will elapse between the start of each transition
pause: 1, // so that pauses when user hovers over a slide
delay: 2000, // set a delay before 1st slide starts transitioning
pager: '#nav' //instructs the plugin to create navigation elements, one for each slide, and add them to the container identified by the value of the pager option.
});
});
// THINGS TO KEEP IN MIND
// - CSS Rules! When building your slideshows, remember that animation effects work best when both the container and slide have a fixed box.
// - Remember that every child element of the container becomes a slide!
// Because transition effects apply to the slide element, transitions that manipulate the size of the slide will not behave as expected. For example, all of the "turn" transitions change the height or width of the slide to achieve the effect. But when you change the height/width of an anchor, the image within the anchor does not get resized and so the effect does not behave as expected. (Fade does NOT manipulate size)
</script>
</head>
<body>
<div>
<div id="feature1">
<img src="images/feature1.jpg" width="615" height="410" />
<p>Feature 1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod congue lacus, eu dapibus sem aliquet a. Vivamus odio sem, dignissim sit amet dictum ut, vehicula ac elit. Etiam rhoncus velit ut turpis pulvinar ornare hendrerit eget risus. Phasellus at ligula quis nulla sagittis mollis. Sed quis lacus non neque tincidunt pharetra. Nulla suscipit, metus id consectetur gravida, erat nibh vulputate tortor, a aliquet ligula nibh non risus. Sed sit amet sem neque. Donec eget ipsum nibh. Aenean imperdiet rhoncus mauris, in accumsan odio pellentesque quis.</p>
</div><!-- end of #feature1 -->
<div id="feature2">
<img src="images/feature2.jpg" width="615" height="410" />
<p>Feature 2</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod congue lacus, eu dapibus sem aliquet a. Vivamus odio sem, dignissim sit amet dictum ut, vehicula ac elit. Etiam rhoncus velit ut turpis pulvinar ornare hendrerit eget risus. Phasellus at ligula quis nulla sagittis mollis. Sed quis lacus non neque tincidunt pharetra. Nulla suscipit, metus id consectetur gravida, erat nibh vulputate tortor, a aliquet ligula nibh non risus. Sed sit amet sem neque. Donec eget ipsum nibh. Aenean imperdiet rhoncus mauris, in accumsan odio pellentesque quis.</p>
</div><!-- end of #feature2 -->
<div id="feature3">
<img src="images/feature3.jpg" width="615" height="410" />
<p>Feature 3</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod congue lacus, eu dapibus sem aliquet a. Vivamus odio sem, dignissim sit amet dictum ut, vehicula ac elit. Etiam rhoncus velit ut turpis pulvinar ornare hendrerit eget risus. Phasellus at ligula quis nulla sagittis mollis. Sed quis lacus non neque tincidunt pharetra. Nulla suscipit, metus id consectetur gravida, erat nibh vulputate tortor, a aliquet ligula nibh non risus. Sed sit amet sem neque. Donec eget ipsum nibh. Aenean imperdiet rhoncus mauris, in accumsan odio pellentesque quis.</p>
</div><!-- end of #feature3 -->
<div id="feature4">
<img src="images/feature4.jpg" width="615" height="410" />
<p>Feature 4</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod congue lacus, eu dapibus sem aliquet a. Vivamus odio sem, dignissim sit amet dictum ut, vehicula ac elit. Etiam rhoncus velit ut turpis pulvinar ornare hendrerit eget risus. Phasellus at ligula quis nulla sagittis mollis. Sed quis lacus non neque tincidunt pharetra. Nulla suscipit, metus id consectetur gravida, erat nibh vulputate tortor, a aliquet ligula nibh non risus. Sed sit amet sem neque. Donec eget ipsum nibh. Aenean imperdiet rhoncus mauris, in accumsan odio pellentesque quis.</p>
</div><!-- end of #feature4 -->
</div><!-- end of .slideshow -->
</body>
</html>
Works like a champ! See example 4.
Layout
This was the most challenging part (for me at least). Most of the magic occurred in the stylesheet.
Some notable points
- I decided that I wanted the navigational pager to occur after the slideshow, not before it.
- There is only so much text that can appear in the slideshow. I set the container to overflow:hidden;
- Positioning the navigational pager was challenging, my strategy involved creating a container set to position: relative; and then used absolute positioning on the navigational pager.
The final HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>JQuery Cycle Plugin - Example Slideshow</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<!-- include jQuery library -->
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow')
.after('<div id="nav">')
.cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1500, // defines the number of milliseconds it will take to transition from one slide to the next.
timeout: 2500, // specifies how many milliseconds will elapse between the start of each transition
pause: 1, // so that pauses when user hovers over a slide
delay: 2000, // set a delay before 1st slide starts transitioning
pager: '#nav' //instructs the plugin to create navigation elements, one for each slide, and add them to the container identified by the value of the pager option.
});
});
// THINGS TO KEEP IN MIND
// - CSS Rules! When building your slideshows, remember that animation effects work best when both the container and slide have a fixed box.
// - Remember that every child element of the container becomes a slide!
// Because transition effects apply to the slide element, transitions that manipulate the size of the slide will not behave as expected. For example, all of the "turn" transitions change the height or width of the slide to achieve the effect. But when you change the height/width of an anchor, the image within the anchor does not get resized and so the effect does not behave as expected. (Fade does NOT manipulate size)
</script>
</head>
<body>
<div id="slideshow-container">
<div>
<div id="feature1">
<img src="images/feature1.jpg" width="615" height="410" />
<p>Feature 1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod congue lacus, eu dapibus sem aliquet a. Vivamus odio sem, dignissim sit amet dictum ut, vehicula ac elit. Etiam rhoncus velit ut turpis pulvinar ornare hendrerit eget risus. Phasellus at ligula quis nulla sagittis mollis. Sed quis lacus non neque tincidunt pharetra. Nulla suscipit, metus id consectetur gravida, erat nibh vulputate tortor, a aliquet ligula nibh non risus. Sed sit amet sem neque. Donec eget ipsum nibh. Aenean imperdiet rhoncus mauris, in accumsan odio pellentesque quis.</p>
</div><!-- end of #feature1 -->
<div id="feature2">
<img src="images/feature2.jpg" width="615" height="410" />
<p>Feature 2</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod congue lacus, eu dapibus sem aliquet a. Vivamus odio sem, dignissim sit amet dictum ut, vehicula ac elit. Etiam rhoncus velit ut turpis pulvinar ornare hendrerit eget risus. Phasellus at ligula quis nulla sagittis mollis. Sed quis lacus non neque tincidunt pharetra. Nulla suscipit, metus id consectetur gravida, erat nibh vulputate tortor, a aliquet ligula nibh non risus. Sed sit amet sem neque. Donec eget ipsum nibh. Aenean imperdiet rhoncus mauris, in accumsan odio pellentesque quis.</p>
</div><!-- end of #feature2 -->
<div id="feature3">
<img src="images/feature3.jpg" width="615" height="410" />
<p>Feature 3</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod congue lacus, eu dapibus sem aliquet a. Vivamus odio sem, dignissim sit amet dictum ut, vehicula ac elit. Etiam rhoncus velit ut turpis pulvinar ornare hendrerit eget risus. Phasellus at ligula quis nulla sagittis mollis. Sed quis lacus non neque tincidunt pharetra. Nulla suscipit, metus id consectetur gravida, erat nibh vulputate tortor, a aliquet ligula nibh non risus. Sed sit amet sem neque. Donec eget ipsum nibh. Aenean imperdiet rhoncus mauris, in accumsan odio pellentesque quis.</p>
</div><!-- end of #feature3 -->
<div id="feature4">
<img src="images/feature4.jpg" width="615" height="410" />
<p>Feature 4</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod congue lacus, eu dapibus sem aliquet a. Vivamus odio sem, dignissim sit amet dictum ut, vehicula ac elit. Etiam rhoncus velit ut turpis pulvinar ornare hendrerit eget risus. Phasellus at ligula quis nulla sagittis mollis. Sed quis lacus non neque tincidunt pharetra. Nulla suscipit, metus id consectetur gravida, erat nibh vulputate tortor, a aliquet ligula nibh non risus. Sed sit amet sem neque. Donec eget ipsum nibh. Aenean imperdiet rhoncus mauris, in accumsan odio pellentesque quis.</p>
</div><!-- end of #feature4 -->
</div><!-- end of .slideshow -->
</div><!-- end of #slideshow-container -->
</body>
</html>
The final CSS
/* THINGS TO KEEP IN MIND
-- CSS Rules! When building your slideshows, remember that animation effects work best when both the container and slide have a fixed box.
*/
#slideshow-container {
position: relative;
margin: auto;
padding: 0;
width: 1000px; /* equal .slideshow */
height: 430px; /* 430px (equal to .slideshow) */
border: 1px solid #ccc;
background-color: #eee;
}
.slideshow {
height: 430px; /* took image dimensions & added 20px to both height and width to reflect padding in .slideshow img*/
width: 1000px;
margin: auto;
overflow: hidden;
}
.slideshow * {
margin: 0;
padding: 0;
}
.slideshow img {
float: right;
height: 410px;
width: 615px;
padding: 10px 0px;
}
.slideshow p {
float: left;
width: 355px; /* 1000px (.slideshow) - 615px (.slideshow img) - 30px (.slideshow p padding) */
margin: 16px 0px 0px 0px;
padding: 0px 20px 0px 10px;
}
#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0; padding: 5px 10px; }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }
#nav {
width: 355px; /* to match width of .slideshow p */
margin: auto;
position: absolute;
left: 10px;
bottom: 20px; /* would normally be zero, but adding in 5px from #nav a + additional 5px for "padding" */
z-index: 5;
}
Was this exactly what you needed? Did this how-to suck? Did I leave something out? Do you have a better solution? Comment and share below!
4 Comments
Hi. I’m putting together a WordPress site for a church. They need a slider like this. I’m using the Thesis theme. Would you be able to tell me how to implement your code in a php file. (I don’t know php…sorry…I bet you hear that a lot).
And just out of curiosity, would you know if I could insert a music file on the same page as the slider? Of course, I don’t know how it would be timed to go with the photos, but maybe having autoload on both would cause synchronization.
I thank you in advance for any guidance.
Dee
Hi Dee,
The example I have in this post is a “proof of concept” for myself, to make sure that I was able to get a slider to work – BEFORE I tried it with WordPress.
I only recently integrated the above example with WordPress itself.
About not knowing PHP – I’ll admit that I only know enough to get into trouble. My approach is more like I hack PHP rather than I “know” PHP.
As soon as you want something semi-complicated like a slider, I think you’d be better off investing some time in creating your own themes, rather than customizing existing ones.
I found this tutorial from ThemeShaper to be invaluable for learning how to create your own themes. http://themeshaper.com/wordpress-theme-development-tools-tutorial/
To get jQuery and the Cycle plugin to work in WordPress, I found this post to be very helpful – http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/
Ultimately, my approach was to create a “featured” category in WordPress for use with the slider. I ended up doing a Loop in WordPress to query only posts in the “featured” category. Instructions found here: http://codex.wordpress.org/The_Loop#Multiple_Loops_Example_1
The images in the slider in the “featured” categories are WordPress thumbnails. To get this going, I followed these instructions… http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/
I know I’m only pseudo answering your question, but your question is a big one. I figured that I would, instead, point you toward some resources that might help you out.
Finally, I recently stumbled across this theme. You have to pay for it, but you might be willing to do so. I haven’t used it myself, so I can’t vouch for it, but you might have a good experience with it. It looks like it incorporates a slider as part of the theme. http://ericulous.com/2009/10/12/wp-theme-white-house-pro/
Hello Dposorio,
This tutorial has been very useful for me, thank you very much for sharing. I have solved several slides with image and text, inserting them all inside a div:
Best wishes!
Glad you found it helpful & to be of service , TradiArt.