jQuery Image Rotator Quick Start

Dependencies

  • This plugin was developed on top of jQuery 1.4.4.
  • jQuery.imageRotator expects to be called on an element which contains
    • an <img> tag of class "imageRotator"
    • optionally, a surrounding <a> tag of class "imageRotator"

Documentation Assumptions

Samples in this document assume that the container element has an id of 'imageRotatorContainer'. This is not a required convention.

Using the plugin

Given the expected HTML as described above, you can simply call the plugin on the container:
$('#imageRotatorContainer').imageRotator(options);

There are two options.
  • rotationTimerMs - the time in milliseconds between rotations
  • images - a JSON array of objects with the following properties
    • src - the src attribute for the image
    • alt - the alt text for the image
    • href - only used if the surrounding <a> tag is present, this is the href to be applied

So, the following rotates between two images at a speed of 2000 ms. (2 sec.)
$('#imageRotatorContainer').imageRotator({
'images':[src":"http://www.freefoto.com/images/01/07/01_07_1---Pair-of-Dogs_web.jpg","alt":"A pair of dogs","href":"http://www.freefoto.com/images/01/07/01_07_1---Pair-of-Dogs_web.jpg,src":"http://www.costumedogs.com/wp-content/uploads/2007/07/tux.jpg","alt":"LOL Top Hat!","href":"http://www.costumedogs.com/wp-content/uploads/2007/07/tux.jpg],
'rotationTimerMs':2000
});

Handling varying image sizes

First, set the size of the container. In the case below, we are using a table, but it could just as easily be a div.
Next, set the max- sizes of the img to match.
Finally, use expressions to constrain the actual size of the img. Note that in this example, the img will not stretch to fill the container. It will only shrink to fit.

We are setting styles inline for the sake of the documentation. You could, and probably should, do much of this in your CSS.
<table style='width:200px;height:200px;padding:0;'>
<tr>
<td id='imageRotator' style='padding:0;margin:0;border:1px solid black;'>
<a href='#' class='imageRotator'>
<!-- By setting the max width/height and using expressions for width/height we constrain the image's size regardless of the rotated items-->
<img style='max-width:200px;max-height:200px;width:expression(this.width > 200px ? 200px : true);height:expression(this.height > 200px ? 200px : true)'
class='imageRotator' src='http://www.freefoto.com/images/01/07/01071---Pair-of-Dogs_web.jpg' alt='A pair of dogs' />
</a>
</td>
</tr>
</table>

Integration with prettyPhoto

By adding rel='prettyPhoto' to your <a> tag and calling $('a.imageRotatorContainer').prettyPhoto();

To fully document prettyPhoto is beyond the scope of this project. For more information, please refer to their website.



Last edited Jan 19, 2011 at 3:53 AM by druttka, version 3

Comments

No comments yet.