View Source: Creating a Photo Rotator with JQuery Cycle

I love the JQuery tagline…write less, do more. It’s a perfect summary of what the language is about. JQuery is a JavaScript library that makes it easier to add interactivity on your projects. The nice thing about JQuery is that it takes care of dealing with browser inconsistencies and gives you great way to access the DOM (Document Object Model). You can do amazing things in just a few lines of code.

The language is easily extendable through the use of plug-ins. On this week’s episode of View Source, I’m showing you how to use just such a plug in…JQuery Cycle to create an easy to code photo slider/rotator for your site. The code is super easy to work with.

First, we’ll need some code with images. For example create a list of images like this:

<div class="rotator">
    <img src="photo1.jpg" alt="photo1" />
    <img src="photo2.jpg" alt="photo1" />
    <img src="photo3.jpg" alt="photo1" />
</div>

This is just a series of image tags, wrapped around a div with a class of rotator. The class is there so that we can target our photos with the plug-in.

You’ll need to call two libraries. The JQuery library as well as the JQuery Cycle plug-in. You can do that with two lines of code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

You should put this code either in the <head> section of your page or before your closing <body> tag. If you’re using WordPress, you can just add the second line into the header.php file of your template, because WordPress includes JQuery as a default.

Now for the JQuery part.

<script>
$('.rotator').cycle({
        fx: 'fade',
        timeout: 2000
});
</script>

In this part we creating use the <script> tag to start coding with JavaScript, then, we use jQuery to target our rotator class. With JQuery, you can target a class much in the same way you do it with CSS, so we’re using a period in front of our class name to get to the rotator class. You then call the cycle function, which takes just a few variables, in this case, the type of effect we want and then how much time to take between fades.

Your finished product should look like this:


Car Photo 1
Car Photo 2
Car Photo 3

Here’s all of the code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>


<script>
$('.rotator').cycle({
        fx: 'fade',
        timeout: 2000
});
</script>

<div class="rotator">
    <img src="http://i.imgur.com/fzC0Y.jpg" alt="Car Photo 1" />
    <img src="http://i.imgur.com/L1BIC.jpg" alt="Car Photo 2" />
    <img src="http://i.imgur.com/SsvZd.jpg" alt="Car Photo 3" />
</div>

So there you have it…a photo rotator in less than 15 lines of code including the code for the images. Not bad for a few minutes of work. There’s a lot more to this and if you want to find out how to add more options or work on more complicated layouts, check out this week’s View Source in the Online Training Library. For lynda.com subscribers, find out how using CDNs (Content Delivery Networks) in your code can help make your pages faster.

Also, for a longer and more responsive version of a Carousell, don’t miss Chris Converse’s Create an Interactive Homepage Marquee with JQuery and Dreamweaver.

Leave a Reply

Your email address will not be published. Required fields are marked *