How to make it work.

Drop these scripts in your header:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
   <script src="js/jquery.quote_rotator.js" type="text/javascript" charset="utf-8"></script>

Call the function to any list element:

        $(document).ready(function() {
            $('ul#quotes').quote_rotator();
        });

You can specify which quote you’d like to show first by adding a class of active to the list item. If you don’t explicitly add an active class, it will default to the first item in the list.

Configuration options.

        $('ul#quotes').quote_rotator({
         rotation_speed: 7000,                    // defaults to 5000
         pause_on_hover: false,                   // defaults to true
         randomize_first_quote: true              // defaults to false
         buttons: { next: '>>', previous: '<<' }  // defaults to false
        });

Rotation will pause on mouse hover by default. This is nice if you're rotating through links or other elements that you might not want fading away from the user.

Also notice that next/previous buttons are not included by default. If you want buttons, you need override the buttons option. As in the example above, assign a javascript object with next and previous keys. The values will be used as text for your buttons.

Download the project from github

How to make it work.

1. Drop these scripts in your header:

		<script src="js/jquery-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.hover_caption.js" type="text/javascript" charset="utf-8"></script>
	

2. Call the plugin function on your images:

		$(document).ready(function() {
			$('img').hover_caption();
		});
    

3. Add this tiny bit of CSS somewhere:

		.hover_caption {
			background-image: url(hover_caption_bg.png);
			/* NOTE: if you're img elements have paddings
			or margins you'll need to match them here
			to get things lined up properly. */
		}
    

And here’s some configuration options:

		$('img').hover_caption({
			caption_font_size: '18px',
			caption_color: 'white',
			caption_bold: true,
			caption_default: "Click for screenshots."
		});
	

And the captions are pretty smart.

If your image has a title attribute, the plugin will use that as the caption. Otherwise it will default to Click for screenshots. You can change the default if you like, of course.

A few gotchas.

• Be sure the path to hover_caption_bg.png is correct.
• Don’t forget to add hover_caption_bg.png to your project.
• Be sure the path to hover_caption.js is correct.
• Make sure you’ve referenced jQuery first in your header.

Download the project from github