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 was 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!
17 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.
Hello, I’ve been looking for a slideshow like this a very long time! Your tutorial has given me a great start in creating one for my personal website redesign. Thank you so much for sharing what you discovered with with everyone :)
Thanks Heath for the kind words. Glad you found the post helpful. BTW, I love your website!
Thanks so much – I really liked the old one too. But I needed practice, so I’ve done a new one – using your nifty slideshow. Thank you again for the tutorial.
God bless you!!!
You really helped me a lot.
Thanks!!!
Glad that you found it helpful, Johann!
Using float may be a bit much, the elements can be positioned absolute which would eliminate any problems that may arise from floating and you can then organize the HTML however you wish.
Then if you wanted to add captions to the images you could position the caption container outside of the slideshow and use something like this inside of cycle:
before: function() {$('#id').stop().animate({height:'0px',paddingTop:'0px',paddingBottom:'0px'}, 100, 'easeInOutExpo');
},
after: function() {
$('#id').html(this.alt).stop().animate({height:'41px',paddingTop:'5px',paddingBottom:'5px'}, 500, 'easeInOutExpo');
}
Change the height and padding to what you need, and style the rest of it with css. You can’t use slideUp / slideDown here though because it will loose the height value if the slides are switched very quickly a few times. The text will come from the alt tag of the image on the current slide (may have to change “this.alt” to get that to happen though; depends how it’s set up)
You recommend an interesting approach. I’ll play around with what you’re suggesting and see if I can pull this off. I like the captions idea and I think I’d prefer the absolute positioning as well. Hmm, you’ve given me something to mull over! Thanks, FiL!
Hi,
I have been work in the first step for 2 days and it seems like my js file is not work or being read. Not sure what to do?
Thanks,
Jennie
Hi Jennie — I’d start over or fallback in some way. Feel free to grab the files I used in the examples, customize them, substitute them for your own, or whatever. If the problem lies in integrating it with WordPress, check out this link, http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/
Great tutorial. Thank you for posting it. I tried to edit what you did to include more slides but it won’t work. It will transition to the new slides but the buttons are no loger clickable. Any idea why that would happen?
A better way to ask my question is what would one have to do to this example to include more slides?
Hi James,
Thanks for the question/comment. I, uh, don’t really know the answer though.
I played with it. I added more slides to the existing example making sure I was using the latest jquery & cycle scripts. Here’s what I got: http://dposorio.com/cycle-plugin/example-more.html,
I think I see the problem:
the new slides were added with no problem
the nav pager reflects the number of slides the way you’d expect
BUT, the nav pager links don’t work
I don’t really know why this is.
A quick & dirty fix might be using “prev” and “next” links instead.
A better solution would be checking the jquery forum – there’s a section specific to the cycle plugin.
Sorry I couldn’t be more help. If and when you find the solution, I would be much obliged if you commented on this post to let me (and others know) of the fix.
Thanks!
– Dennis
It doesn’t work. I don’t have the images sliding. It looks like
is not in the CSS.
One Trackback
[...] wanted to give proper kudos to Dennis Osorio, whose tutorial on customizing the jQuery cycle plugin was of great help to me. I was looking for a slide-show that would allow me to switch out the HTML [...]