Create a jQuery photo rotator in 15 lines of code

Published by | Friday, February 10th, 2012

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 ways to access the DOM (Document Object Model). You can do amazing things in just a few lines of code.

The jQuery language is also easily extendable through the use of plugins. On this week’s episode of View Source, I will show you how to use jQuery Cycle, a jQuery plugin, to create an easy to code photo rotator for your site. The code is really 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"> <img src="photo2.jpg"> <img src="photo3.jpg"> </div>

This is just a series of image tags, wrapped around a div with rotator designated as the class. Designating the class allows us to target our photos with the plugin.

You’ll need to call two libraries. The jQuery library as well as the jQuery Cycle plugin. 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 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 target a class with CSS, so we’re using a period in front of our class name to get to the rotator class. You then call on the cycle function, which takes just a few variables. In this case we’re calling on the type of effect we want and then setting how much time we prefer 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.

If you want to find out how to add more options or how to work on more complicated layouts, check out this week’s free View Source tutorial, Creating a Photo Rotator with jQuery Cycle, in the Online Training Library®. If you are a lynda.com subscriber, also check out my second View Source tutorial, Using a CDN to speed up your sites, to find out how using CDNs (Content Delivery Networks) in your code can help make your pages faster.

 

Interested in more?
• The full View Source series
• All developer courses on lynda.com
• All web + interactive courses on lynda.com
• All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:
• Create an Interactive Video Gallery with jQuery
 Create an Online Photo Gallery with jQuery and Dreamweaver
Create an Interactive Map with jQuery and Dreamweaver
jQuery Essential Training
Set a Marquee to Autoplay with jQuery and Dreamweaver

Share this:Share on Facebook4Tweet about this on Twitter5Share on Google+0Pin on Pinterest1Share on LinkedIn0

lynda.com - start learning today


7 Responses to “Create a jQuery photo rotator in 15 lines of code”

  1. Nice tip … Quick effective jQuery!

    Any plans to develop a CREATE JQUERY PLUGINS course? I have been really struggling with this for a while. To my senses, it is not intuitive, and the only tutorials I’ve found online are, while helpful, partially-complete at best. I’d love to see Lynda do a great tutorial for this frustrating concept! :)

  2. Ray Villalobos says:

    @codeslayer2010: Since ViewSource itself is a series focused on short tips (under 10-minutes), that would be outside of the scope of the ViewSource series, but it’s a good idea for a full course. I’d love to do something like that.

  3. Damien says:

    Thanks for the tutorial – how can I make each picture link to a specific URL when clicked?

  4. Alex Christensen says:

    Thank you very much for this tutorial, I’m defiantly going to use this for my final. Thank you so much.

  5. Cat says:

    Hi,
    My jQuery rotator—like yours in the example no longer works? Care to post a fix on how to create a simple photo rotator with the latest versions from jQuery? I don’t even see a “.rotator” at their website now.

  6. Aimee Allred says:

    It looks like they moved the js script. Change the link in your header file to this one, and it will work again: http://malsup.github.io/min/jquery.cycle2.min.js

Leave a Reply