Home
:
News And Articles
:
Javascript Jquery
:
Jquery Slideshow With The Jquery Cycle Plugin

jQuery Slideshow with the jQuery Cycle Plugin

Written by Joe on Wednesday, May 19, 2010

Some of the most popular jquery scripts are slideshow/photo gallery scripts, and there are tons of them out there. This article is about one of my personal favorites, the jQuery cycle plugin. The jQuery cycle plugin provides many different type of transitional effects as well as support for pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.

Getting Started With The jQuery Cycle Plugin

First, you are going to need a copy of the jQuery library. You can download the jQuery library for free at http://www.jquery.com/. You are also going to need a copy of the jQuery cycle plugin which you can download free at http://www.malsup.com/jquery/cycle/. After you download both, copy the files to your web server and you are ready to get started.

After you have included your scripts in the <head></head> section of your code, you can started using the plugin. As always, a jQuery block starts with:

$(document).ready(function() {

// your jQuery code goes here

});

The jQuery cycle plugin is very simple to implement. You simply include all of your images inside a div with an id or class. Then you call the cycle plugin to cycle through the items in that div, choose what effect you would like to use and you are done!

The jQuery

$(document).ready(function() {

    $('.slideshow').cycle({
	  fx: 'fade' // your transition type, ex: fade, scrollUp, shuffle, etc...
     });

});

The HTML

This example is very basic. It is very easy to create custom slideshows with text, next/previous buttons, etc.. Want a slideshow on your site, quick and accessible without the cost and time needed to make a flash slideshow? We can help. Contact us and let us know about your slideshow project.