• Today we are going to watch some grass grow.

  • Whoa did you see that? Look at it grow!

  • Now we shall zoom in to really see it grow.

  • This concludes our grass growing presentation for the day.

What?

This is a jQuery library plugin.

This plugin takes any list and makes the list elements fade in and out in an endless loop. Pauses on mouse over and restarts on mouse out. Markup inside the list element does not matter it will roll and fade just about anything (not tested).

If you are looking specifically for something to roll a list of images with text on top of them then you are in luck. The plugin comes with some built in styles to do just that.

How?

Add rollSM.jQuery.js to the head of your page after the jQuery library.

  1. <head>
  2. <script type=”text/javascript” src=”jquery.min.js”></script>
  3. <script type=”text/javascript” src=”rollSM.jQuery.js”></script>
  4. </head>

Setup your list however you see fit. If you want to use the built in styles for the rolling image with test on top of the image setup the list as follows.

  1. <ul class=”someSelector”>
  2. <img srd=”imageName.jpg” alt=”" />
  3. <div>
  4. <p>Text to go on top of image here</p>
  5. </div>
  6. </ul>

Lastly, select you list and attach the roll function to it. Pass a variable of true if you are using the built in styles for an image with text on top of the image and false if you are going to use your own styles.

  1. $(document).ready(function(){
  2. $(“someSelector”).rollSM(true);
  3. });

If you choose to use the built in styles open rollSM.jQuery.js and edit the customizable variables to meet your needs. Also, you can change the time interval between rolls in this file.

Future Features List:

  • Text on bottom, left and right
  • Text that fades or animates in
  • Arrows for navigation

Download

Get the ZIP