jQuery Slideshows With the Cycle Plugin

jQuery is an awesome framework that is both flexible and robust. If you haven’t done so already, check out Jeffrey Way’s amazing jQuery for Absolute Beginners.

jQuery also has an outstanding developer community with loads of plug-ins that you can use to expand jQuery’s capabilities while simplifying the process of development. The jQuery Cycle plugin allows developers to quickly and easily create a slideshow out of anything contained within a given div element. However, this is more than just your grandmother’s slideshow fade plugin. The jQuery cycle plugin comes with a vast array of transition effects for you to use.

Getting jQuery and the plugin

Of course, to follow along with this tutorial, you need to download all the proper plugins and jQuery if you don’t already have it. You can download jQuery at jQuery’s website, and the cycle plugin downloads can be found here.

For the purpose of this demonstration, I am using the development version of jQuery. However, as most developers would agree, I suggest using the production version of jQuery for the final release.

The version of the cycle plugin that I am using also is best suited for development use. As described on its site, the cycle plugin comes in two varieties. One, which includes the core components and the fade effect only, and a full version which includes all of the plugins shown on their site.

Step 1: Setting up the HTML

Since we are focusing on a very simple UI, the HTML and CSS layout will be pretty staightforward. You can follow my example by the placing the following HTML in your code.

<!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>
 <title>JQuery Cycle Plugin Sample/title>
 <link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
</head>
<body>

<div id="myslides">
 <img src="http://themeforest.s3.amazonaws.com/47_cycle/images/capitol.jpg" />
 <img src="http://themeforest.s3.amazonaws.com/47_cycle/images/flowers.jpg" />
 <img src="http://themeforest.s3.amazonaws.com/47_cycle/images/countryscene.jpg" />
</div>

</body>
</html>

As you can see, I have set up a really simple layout which includes a simple enclosed div which is called ‘myslides’. It is important that you wrap all of tour images you want in the slideshow within a div element, we’ll see why later in the tutorial.

Step 2: The CSS

Next, of course, is the CSS for the layout of both the images and the div that contains those images for your slideshow.

body {
	background: rgb(50,50,50);
}

#myslides {
	width: 370px;
	height: 220px;
    padding: 0;
    margin:  0 auto;
} 

#myslides img {
    padding: 10px;
    border:  1px solid rgb(100,100,100);
    background-color: rgb(230,230,230);
    width: 350px;
    height: 200px;
    top:  0;
    left: 0
}

So, what are we doing here? The key thing to note here is to make sure that the div element which contains your images (in this case, #myslides) has a set width and height. In my example, I have set the width and height of the myslides element to equal the width and height of the images plus the images padding.

After setting up the HTML and CSS as I have shown, you should have something that looks similar to the screenshot below.

Step 4: Placing the JS

We now need to include the latest version of the jQuery library, as well as the required cycle plugin, to make this effect work. Beneath the css include, place the following code to include the required javascript files.

<script type="text/javascript" src="js/jquery-1.3.js">/script>
<script type="text/javascript" src="js/jquery.cycle.all.js">/script>

Next, we place our own script which makes the effect run.

$(document).ready(function(){
	$('#myslides').cycle();
});

The script above starts out just as most jQuery scripts do. It begins with telling the browser to start the following function once the document is loaded. On the second line, the script calls the myslides div element and passes it to a cycle method in the from the plugin. That’s it! You reload the page, you should see the default fade transition in between your photos.

Customization

As mentioned earlier, the cycle plugin is more than just your basic fade transition slideshow. You can take the plugin further by customizing the way the slideshow behaves. I am going to show how you can change the transition and speed of how long each slide is presented before the next transition.

Customizing the plugin is quite simple. If we want to change the transition from the default fade to one called cover, we start out with the following code inside the document ready function.

$('#myslides').cycle({
	fx: 'cover'
});

Now, say we want to make that ‘cover’ transition to happen a bit more quickly. In jQuery, 1000 equals 1 second. So, if we want the transition to take place in a half of a second, we apply the following code.

$('#myslides").cycle({
	fx: 'cover',
	speed: 500
});

One more thing that we might want to do, is decrease the time it takes for each transition to start. So, we call up the timeout parameter as demonstrated below.

$('#myslides').cycle({
	fx: 'cover',
	speed: 500,
	timeout: 2000
});

We now have a nifty slideshow that might be useful for in a header of a portfolio website giving quick samples of a photographers work. I have just a few of the customizations that can be made to the cycle plugin. Check out the jQuery cycle plugin site to check out more options. You can check out their site here.

The Complete Code

Your HTML file now should look something like 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>
 <title>JQuery Cycle Plugin Sample/title>
 <link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
 <script type="text/javascript" src="js/jquery-1.3.js">/script>
 <script type="text/javascript" src="js/jquery.cycle.all.js">/script>
 <script type="text/javascript">
$(document).ready(function(){
	$('#myslides').cycle({
		fx: 'cover',
		speed: 500,
		timeout: 2000
	});
});
 </script>
</head>
<body>

<div id="myslides">
 <img src="http://themeforest.s3.amazonaws.com/47_cycle/images/capitol.jpg" />
 <img src="http://themeforest.s3.amazonaws.com/47_cycle/images/flowers.jpg" />
 <img src="http://themeforest.s3.amazonaws.com/47_cycle/images/countryscene.jpg" />
</div>

</body>
</html>

Conclusion

We’ve seen how a simple plugin can add simplicity and ease to the setup and customization of a slideshow. Keep in mind that this plugin is not limited to images, it pulls all child elements of the div element you assign i, whether it is images, headings, or paragraphs.


41

Comments
  • Saro says:

    That’s really cool to work with! Thanks!

  • Pliggs says:

    This is a fantastic post and great use of jQuery. Definitely one of the best slideshows I have seen.

    Thanks for the write up and share.

  • Brenelz says:

    Nice tutorial! Loving jQuery!!

  • shin says:

    I keep only one img in html and add others by js. If you unable js, you will see all the img.

  • Janko says:

    Nice tut:)

    btw im using exactly this plugin and approach in one of my templates :)

  • kevinsturf says:

    great tut but you can find many effects here

    http://malsup.com/jquery/cycle/

  • Mark Bowen says:

    You might also like to add in an :

    overflow: hidden;

    in the css for the myslides div so that you don’t get all three showing if Javascript is disabled.

    Best wishes,

    Mark

  • Kevin says:

    Really cool stuff, thanks !

  • Andris says:

    Check out my Portfolio that I did with the cycle-plugin:
    http://www.linzproductions.ch

  • trikkky says:

    ihave used flash for this in the past, but i think its great and seeing the other “fx” that it does makes it so easy and quick to do a slide show.
    Brilliant

  • Rahul Joshi says:

    Nice tutorial! But can we use the same technique to switch between different divs or text content?

  • clark says:

    Cycle has always been one of my favorite jquery plugins. Its just so flexible!

  • stray says:

    been following the sites tutt vids and they are great thanks alot guys. i was wondering when the page is loading you can see the images all one an top of each other then when the page is fully loaded then it activates the jquery and it looks like it should is there a way to fix this?

    http://www.stray-designs.com/pm_photography/index.html

  • M.A.Yoosuf says:

    cool, also try to include stuff like how to make simple gallery without plugin, basically on click of the Thumbnail ho wto load th ebig image,

    becouse those will be very usefull for Portfolio sites

    Thank you
    Yoosuf

  • M.A.Yoosuf says:

    Guys i just finised a small tute on just vist for my blog and have a look, it will help you in making a simple gallery.

    http://yoosuf.awardspace.com/2009/02/simple-gallery-with-jquery/

  • M.A.Yoosuf says:

    @Jeffry way, specially give me your feed back, hope fully if you are okay with taht, i hope to make more like this for ThemeForest

    so its all up to you.

    Thank you
    Yoosuf

  • M.A.Yoosuf says:

    Simple Gallery with jQuery http://yoosuf.awardspace.com/2009/02/simple-gallery-with-jquery/, try and add to your portfolios

  • mokin says:

    Thank you for tut.

  • Eratox says:

    Awesome! I love Cycle, I use it for all slides i do. It’s very flexible and easy to set up/configure.

    The pager functionality is my fave.

  • Jose Chambrot says:

    Works for me in Firefox & Safari…but can’t get it to work correctly in IE7. Can someone help?

    http://uniquetablesmiami.com/dev

    Images load up one under the other, loads up with and error.

    Thanks in advance.

    J.

  • Steve says:

    Add this php script to loop through an image directory to save yourself some time!

    $path = ‘../path/to/images’;
    if ($handle = opendir($path)) {
    while (false !== ($file = readdir($handle))) {
    if ($file != “.” && $file != “..”) {
    echo ” \n”;
    }
    }
    closedir($handle);
    }

  • Karu says:

    hi,
    can we use this in our templates?
    Are we allowed to ?

    Thx

  • Bim says:

    I’ve tried to get this working with text as well.. but doesnt work so well in Google chrome.. the text goes bold and then changes to the next slide.

  • Frank says:

    Thanx for your easy approach, i got it right away.

    Check step 4.

    /script>
    /script>

    wrong tag ends. Thanx anyway!

  • justin says:

    I can insert tags

  • Ali says:

    If you want to use this and not mess up the layout of your design if the user has a browser that doesn’t support javascript then you can append the slideshow images to the myslides div using jquery

    $(“#myslides”).append(” “);
    $(“#myslides”).append(” “);

  • Bim says:

    Has anyone tried this script with text? Mine doesn’t look right in IE 7 and google chrome… any ideas? Please? :)

    I’ve put the text in 3 different div’s inside the “myslides” div.

    Thank you.

  • advise-art says:

    very nice … and it is very easy to set up …

  • Acey says:

    Excellent tutorial. Many thanks!

  • Jordi says:

    Great tutorial and website!
    I have a doubt, can i link the images to another page?
    Thanks!

  • Tom says:

    What if You want to add more slideshows on one page?
    It has to have separate id in the code, and in the markup.

    Multiple Cycle Plugins on one page. Using single code.

    Any one knows how to jump over it?

  • Carson says:

    I have the slideshow set up to run like this:

    $(document).ready(function(){
    $(‘#myslides’).cycle({
    fx: ’scrollDown’,
    speed: 2000,
    timeout: 500,
    });
    });

    What I would like to do is to customize the slide show further using the Easing Plugin from the JQuery Cycle Plugin site. I can’t seem to get these custom transitions to work. I would like to use easing transition “s2″ (http://malsup.com/jquery/cycle/int.html) which looks like this:

    $(‘#s2′).cycle({
    fx: ’scrollDown’,
    easing: ‘bounceout’,
    delay: -2000
    });

    My full code right now looks like this:

    JQuery Cycle Plugin Sample

    $(document).ready(function(){
    $(‘#myslides’).cycle({
    fx: ’scrollDown’,
    speed: 2000,
    timeout: 500,
    });
    });

    What do I need to do to achieve this effect? Please let me know what needs to be changed. Thanks!

  • Carson says:

    sorry, my full code actually looks like this:

    JQuery Cycle Plugin Sample

    $(document).ready(function(){
    $(‘#myslides’).cycle({
    fx: ’scrollDown’,
    speed: 2000,
    timeout: 500,
    });
    });

  • Sparkybarkalot says:

    @Tom: just use classes instead of IDs

  • Grafiko says:

    great article, I was looking for something like this

  • guru520 says:

    How can I set the alt text into the picture itself so that it comes up from the bottom of the picture in a slide animation?

    I have used the tuts here at http://malsup.com/jquery/cycle/int2.html

    to see how to actually add the alt text, but it comes up in the wrong place. I would like it to come up from the bottom in a slide.

    So I am using the OnBefore and OnAfter functions. So I was wondering if I can set css here in the function? Or is it something I set in a css file?

  • morgan says:

    i was wondering if there’s a way to make the slideshow stop after it’s scrolled through the images once? just a beginner at this! thanks.

  • kaunghtoo says:

    it’s really easy and great. thanks a lot.

  • Nick says:

    If I want to add images using jquery instead of putting them in the html where do I put the $(”#myslides”).append(” “); js code?

    Thanks

  • Keith D says:

    Just what I’ve been looking for.
    I want to rotate several images in a website header… I’ve seen it on a few sites and liked the look of the effect.

    This plugin has a great transition effect… I will copy your code download the jQuery and plugin and experiment.

    You have done a great job in setting out this tutorial and explaining how everything fits together – html, CSS, jQuery and the plugin.

  • Keith D says:

    @Kris
    Is there any way that you can get the plugin to rotate images in a folder without them actually all being in the html i.e. on the page?

    If the javascript is disabled and all the images are on the page, it would look awful, but a single empty div wouldn’t look too bad.