Matt Paulson

Entrepreneur, Author, Private Equity Investor
  • Facebook
  • Linkedin
  • Twitter
  • Rss
  • Blog
    • Book Recommendations
    • Church Life & Ministry
    • Community Projects
    • Entrepreneurship
    • Quaterly Updates
    • Startup Community
    • Startup Q&A Show
    • Web Development
  • About
    • Resume
  • My Companies
    • Angel Investments
  • My Books
    • Online Business from Scratch
    • Automatic Income
    • The Ten-Year Turnaround
    • Email Marketing Demystified
    • 40 Rules for Internet Business Success
    • Business Growth Day by Day
    • Simple Savings
  • Media Appearances
  • Contact
Home» Web Development » Building a Simple Image Rotator with JQuery

Building a Simple Image Rotator with JQuery

Posted on May 14, 2009 by matt in Web Development 8 Comments
Tweet

I was recently working on a new website for an adult fellowship group at my church and one of the tasks I had was to create an image rotator that had various bible verses on it that would transition every few seconds. Since the site was Joomla-based, I initially searched for a free plugin that would do the trick. I did find one that would do the trick (Flash Rotator Module by JoomlaShack), but it was $19.95. I decided I would keep looking and find a free solution.

Eventually I stumbled upon JQuery Cycle. It’s a free JQuery tool that lets you do an image rotator with a lot of unique transitions. I opted for a basic “fade”, since that’s what the previous version of the site was using. There’s also shuffle, zoom, rotation, and scrolling effects. You can see the results of these efforts on http://www.sfcontext.com/

Here are the steps to recreate a basic image-slideshow using JQuery Cycle:

(1) Reference the JQuery Library and the JQuery Cycle Libraries in your <HEAD>.

<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script src=”jquery.cycle.all.js” type=”text/javascript”></script>

(You’ll need the JQuery library as well as the JQuery Cycle library on your web-server, make sure to update your references)

(2) Make a DIV with your images in it where you want the rotator to appear on your page:

<div class=”pics”>
<img src=”/media/banners/1.jpg” width=”597″ height=”175″ />
<img src=”/media/banners/2.jpg” width=”597″ height=”175″ />
<img src=”/media/banners/3.jpg” width=”597″ height=”175″ />
<img src=”/media/banners/4.jpg” width=”597″ height=”175″ />
</div>

Feel free to use as many images as you want in this. You can also change the height and the width, but it’s probably a good idea that they all have the same height and width. You can also use “ALT” and “TITLE” tags since they’re plane-jane HTML image objects.

(3) Use a $document.ready() function to load the JQuery Cycle rotator effects

<script type=”text/javascript”>
$(document).ready(function() {
$(‘.pics’).cycle({
fx:    ‘fade’,
speed:  5000
});
});
</script>

make sure that the class of the DIV lines up with the class being referenced in the $document.ready() function. You can also replace the “fade” fx with a number of other transitions and change the speed as you desire. The “5000” represents 5000 miliseconds or 5 seconds.

Overall, I’m very impressed with JQuery Cycle as an image-rotator solution. The library it self is only 28KB when it’s compressed, and if you don’t include all of the transitions, you can shave a few kilobytes off that number.

Tweet

Comments

8 comments on “Building a Simple Image Rotator with JQuery”

  1. Mary says:
    June 8, 2009 at 7:46 pm

    Help!

    I cannot get this to work. Where to I put the function in the head or in the body of the page?

    Would appreciate any input.

    Reply
  2. Matt Hauth says:
    July 17, 2009 at 9:34 pm

    Me either! Darn

    Reply
  3. Chris says:
    September 13, 2009 at 8:13 am

    Does this work with Joomla?

    Reply
  4. Paul says:
    September 21, 2009 at 2:38 pm

    Actually the Flash Rotator Module IS free… you just have to register. There are 2 versions on their site.

    There are also plenty of other slideshow modules for Joomla… RokSlideShow, ISS, etc all have the same capabilities unless you want to do some of the more advanced stuff.

    Reply
  5. Gert says:
    November 3, 2009 at 5:07 pm

    In the header

    Reply
  6. Sonia says:
    January 18, 2010 at 3:48 am

    Thanks for the script. It worked for me after I changed the single and double quotation marks from smart quotes (curvy) to regular (straight). You might want to see if you can display them as straight quotation marks on this site.

    Reply
  7. Raghib suleman says:
    July 14, 2010 at 11:52 pm

    Hi, Here are the basic image rotators slide-show http://www.raghibsuleman.com/jquery-image-rotator…

    Reply
  8. Macdara Butler says:
    August 21, 2010 at 3:53 pm

    Thanks for this, its nice and simple. Just forgot to add the cycle library first time but after that it works really easily.

    Reply

Leave a Reply Cancel reply

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

Get Email Updates

Enter your email address below to receive a steady stream of tricks, tips and ideas to help you build a better and more profitable business.

Email Marketing Demystified

The second edition of Email Marketing Demystified is now available. This book teaches you how to build a massive email list, write marketing copy that converts and generate more sales in your business.

Click Here to Get Your Copy of Email Marketing Demystified

Recent Posts

  • Sioux Falls to Celebrate Entrepreneurship Day on March 3, 2021

    February 18, 2021
  • MarketBeat is Hiring for Three Positions (Support, Data Analyst and Web Developer)

    February 17, 2021
  • The Biggest Mistake You Can Make with Your Email Sign-Up Forms

    February 16, 2021
  • Five Lessons Learned from the MarketBeat Burger Project

    February 2, 2021
  • Seven Lessons I Learned Helping Animal Shelters Raise $18.5 Million Over Seven Years

    January 19, 2021

    Follow me on Facebook & YouTube

    Contact

    • [email protected]
    • Contact Us
    • matthew-paulson
      • Facebook
      • Twitter
      • Linkedin
      • Instagram
      • Rss

    © Matthew Paulson 2003-2021. All Rights Reserved.

    Privacy Policy