JQuery Plugin: imBannerRotater
Monday, October 26th, 2009I created simple JQuery plugin that rotates images on a page. Actually, there are two modes. In the default mode, the plugin will display a randomly selected image. In the other mode, the plugin will rotate images on a page (fading in/out). In this mode, you can select the speed of the rotation. The image data can be retrieved ajaxally (json or a comma separated list). If the data is Json, a url can be added for each image.
Plugin Options
Setting the imBannerRotater is simple:
mode: ‘random’ or ‘rotate’. Tells the plugin whether to display images randomly or to rotate the images on the page (fade in/out). The default mode is ‘random’.
image_url: This option really should be named data_url. This the location of the file list that will be retrieved ajaxally.
return_type: ‘list’ or ‘json’. This option tells the plugin whether the data retrieved via the image_url is a comma separated list or a json object. The defualt is ‘list’.
images: This option can be used instead of the image_url option (return_type = list). Just enter a comma separated list of image names.
base_path: Your file list can contain the full path of each image. If your list contains the file name only, you can use the base_path option to prefix all of the image in the list.
data_map: This option must be used if your return_type = json. This tells the plugin where to find the image name in the json object. You can also specify a url for each image and the url_target (if the mode is set to random). The default for the url_target is ‘_blank’. The format for the data_map:
{image_name: 'the image name field', url_name: 'the url for the image', url_target: '_blank'} //if no url {image_name: 'the image name field'} |
speed: This option is used with the mode = rotate. This is the speed in which each image fades in/out. The default is 1500. It will accept any value that is accepted by JQuery’s fadein effect.
Setting Up Plugin
To setup the plugin, first you need to load jquery and the imBannerRotater script:
<script src="js/jquery/jquery-1.3.2.min.js" type="text/javascript"><!--mce:0--></script> <script src="js/jquery/jquery.imBannerRotater-0.5.js" type="text/javascript"><!--mce:1--></script> |
Now we instantiate the plugin:
$(document).ready(function(){ $("#cast").imBannerRotater({ image_url: 'random.php', base_path: 'images/' }); }); |
In the example above, the ‘cast’ id selector is the container for the images. The base_path option tells the plugin to look for the images in the images directory. No mode is set, so the default is random. The return_type is not set. The default is list, so the plugin will be looking for a comma separated file list. The random.php will look similar to:
$(document).ready(function(){
$("#cast").imBannerRotater({
mode: 'rotate',
return_type: 'json',
image_url: 'rotate.php',
base_path: 'images/',
data_map: {image_name: 'name'}
});
});
The rotate.php file contains a json object:
echo '[{name: "joneil.jpg"},{name: "scarter.jpg"},{name: "djackson.jpg"}, {name: "tealc.jpg"},{name: "cmitchell.jpg"},{name: "vala.jpg"}]'; |
The ‘name’ attribute is linked to the data_map.image_name option of the plugin.
To view a demo of the imBannerRotater plugin, go to: http://grasshopperpebbles.com/demos/.
The plugin can be downloaded from Google Code or JQuery Plugins.
November 14th, 2009 at 1:36 am
[...] ajaxally (json or a comma separated list). If the data is Json, a url can be added for each image. Web Site Demo Download Share and [...]
January 14th, 2010 at 4:29 pm
With the jQuery 1.4 update, your banner rotator doesn’t work anymore. Can you fix the “parsererror” problem that’s currently occurring before I can start using the newest version of jQuery?
January 14th, 2010 at 4:54 pm
I’ll look into it. Since I will be updating the plugin, is there any functionality that you would like to be added?
January 14th, 2010 at 5:11 pm
I just tested the plugin using JQuery 1.4. The plugin does not have to be updated. Place quotes around the name, not just the value.
Demo example:
{name: “joneil.jpg”, url: “http://www.imdb.com/character/ch0005968/”}
JQuery 1.4
{”name”: “joneil.jpg”, “url”: “http://www.imdb.com/character/ch0005968/”}
January 14th, 2010 at 5:57 pm
[...] just sent me a message asking me to update my imBannerRotater plugin because they were receiving a parseerrormessage with JQuery [...]
January 14th, 2010 at 8:48 pm
Oh, thanks for that. Wow what a simple fix, but it gave me a headache trying to figure out which script was causing a problem on my site. When I figured it was because jQuery was updated, then I had to comment out script one by one and yours was the only one that made that parseerror. Anyways, thanks for fixing this problem quickly.
January 14th, 2010 at 11:56 pm
Is there anything that you would like to have added to the plugin?
February 2nd, 2010 at 6:24 am
Can’t seem to get this working correctly. Got it all in, it comes up on screen but gets missing image symbol as the image filenames never get added to the url for the image… any ideas?
I think it has something to do with the rotate.php, the page seems to cancel loading when it gets to that.
jquery 1.4 and i’ve added the extra ” ” needed.
February 2nd, 2010 at 9:54 am
I’m not sure. Use Firebug to see what gets loaded. If it looks okay in Firebug, send me a snippet of the Json object and I will take a look at it.
February 10th, 2010 at 12:02 am
Thanks for your plugin!
This works fine for me in normal browsers, I’m still using jquery 1.3 …
Android works fine.
iphone doesn’t work for me, but your demo works. The Safari console points to line 71, but I see that’s just where there error message is generated.
Maybe I’ll upgrade to 1.4.