This is a jQuery banner rotator plugin featuring multiple transition effects. The thumbnails and buttons allow for easy navigation of your banners. The banner rotator is also re-sizable and configurable through the plugin's parameters and stylesheet.
Features:
Installing the rotator requires the following steps.
Below describes these steps in more detail.
In step 1, to include the css file wt-rotator.css, simply specify the following line of code within your <head> tag:
<link rel="stylesheet" type="text/css" href="wt-rotator.css"/>
In step 2, you will need to include the jquery's library file jquery-1.7.1.min.js and the rotator's file jquery.wt-rotator.min.js. Both files are located within the js directory. The code below shows the include in a html page:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.wt-rotator.min.js"></script>
note: The js files with min in its file names are the compressed production version of the file. If you intend to modify the banner rotator's source code, you will need to look at the non-min development version of the file and it is recommended that you minify the modified file afterwards.
Additionally, you can include the optional jquery.easing.1.3.min.js file which supports special transition easing.
In step 3, to specify the tags of the rotator itself, refer to the example in the index.html file. In that file, you'll see a block of tag starting and ending with:
<div class="container"> <div class="wt-rotator"> <!-- all the tags in between, see index.html for the complete code --> </div> </div>
You can use this as a template and copy and paste it onto your own page, but will have to modify it accordingly with your own image information. Section 3 will describe this step in detail.
Finally in step 4, you will need to instantiate a javascript function call to get the rotator initialized. The example code looks like this below:
<script type="text/javascript"> $(document).ready( function() { $(".container").wtRotator(); } ); </script>
This will instantiate the rotator using the default parameters (empty parameters). Section 4 will describe instantiation with custom parameters.
back to topIn order to add or change content to the rotator, you will have to specify a set of tags for each image within the rotator's html tags. The list of images is represented as a list tag <ul> and each image is represented by a list item tag <li>.
Below is an example of what the tags would look like for an image. You will have to repeat this for as many images as needed for your rotator.
<li effect="fade" delay="8000"> <a href="images/myimage.jpg" title="image caption"> <img src="images/thumbs/mytooltip.jpg"/> </a> <a href="http://codecanyon.net/" target="_blank"></a> <div style="top:6px; left:468px; width:306px; height:0; color:#000000; background-color:#FFFFFF;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis justo arcu. Fusce adipiscing condimentum aliquam. </div> </li>
The example above shows that each image entry begins with an opening and closing <li> tag. The <li> tag contains an optional attribute named effect in which an individual effect/transition type can be assigned for the image. Refer to the transitions table for a list of available transitions.
note: you can mix different effects except for the h.slide and v.slide effect.
Also, there is another optional attribute named delay for the <li> tag for assigning an individual timer delay for rotation. The delay time is in milliseconds.
Next, inside the <li> tag, there is an <a> tag for specifying the image's url as its href value. Also, the title attribute of the <a> tag is use for the thumbnail's text tooltip. You can omit the title attribute if you do not want a text tooltip for that thumbnail.
Similarly, the <img> inside is use for the thumbnail's image tooltip when image tooltip is turned on. Again, you can omit this <img> if you do not want an image tooltip for a particular thumbnail.
After the first <a> tag, there is a second optional <a> tag. This is for specifying the clickable link when the image is display. You can also specify the target for the link here also.
Finally, the <div> tag represents the description use for the text box when selected. You can specify html text within this <div> tag. If you do not want a description assigned to the image, you can leave the text empty.
This <div> tag also can contain 6 css style attributes (top, left, width, height, color, and background-color). You can specify the left and top position of the text box, the width and height, and the color and background color with these attributes. If you want the text box's height to be determined automatically, just set a value of 0. Color defaults to white and background color defaults to black if they are not specified.
back to topYou can change some common attributes of the rotator through the parameters of the plugin. Below is an example of the attributes being specified with corresponding values.
<script type="text/javascript"> $(document).ready( function() { $(".container").wtRotator({ width:825, height:300, thumb_width:24, thumb_height:24, button_width:24, button_height:24, button_margin:4, auto_start:true, delay:8000, play_once:false, transition:"random", transition_speed:800, easing:"", auto_center:false, cpanel_align:"BR", cpanel_position:"inside", timer_align:"top", display_thumbs:true, display_dbuttons:true, display_playbutton:true, display_thumbimg:false, display_side_buttons:false, display_numbers:true, display_timer:true, tooltip_type:"image", mouseover_select:false, mouseover_pause:false, cpanel_mouseover:false, text_mouseover:false, text_effect:"fade", text_sync:true, mousewheel_scroll:true, shuffle:false, block_size:75, vert_size:55, horz_size:50, block_delay:25, vstripe_delay:75, hstripe_delay:75 }); } ); </script>
note: if you want to leave a parameter with its default value, you can omit that parameter in the javascript call.
The table below describes each attribute in more detail:
Attribute Name | Description | Default Value | Possible Values |
---|---|---|---|
width | The width of the rotator. | 825 | Any positive number. |
height | The height of the rotator. | 300 | Any positive number. |
thumb_width | The width of the thumbnails. | 24 | Any positive number. |
thumb_height | The height of the thumbnails. | 24 | Any positive number. |
button_width | The width of the buttons. | 24 | Any positive number. |
button_height | The height of the buttons. | 24 | Any positive number. |
button_margin | The margin size between thumbnails/buttons. | 4 | Any positive number. |
auto_start | Specifies if image rotation initially starts. | true | true, false. |
delay | The global time delay for image rotation in milliseconds. If delay is set per slide, it will take precedence over the global delay. | 5000 | Any positive number. |
play_once | Specifies if rotation plays only once through. | false | true, false. |
transition | The global transition use for images. If transition is set per slide, it will take precedence over the global transition. | "fade" | See the next table for more information on the available transitions. |
transition_speed | The transition speed/duration use for image transition. | 800 | Any positive number in milliseconds. |
easing | The easing used for image transition. note: To use easing other than "" (none) or "linear", you must include the additional easing file in your page, refer to Section 2 for information on including this file. |
"" | Please visit jQuery Easing Plugin for a list of all available easing. |
auto_center | Specifies if images are automatically centered. | false | true, false. |
cpanel_align | The alignment of the control panel. | "BR" | "TL", "TC", "TR", "BL", "BC", "BR", "LT", "LC", "LB", "RT", "RC", "RB" |
cpanel_position | The position of the control panel. | "inside" | "inside", "outside" |
timer_align | The alignment of the timer bar. | "top" | "top", "bottom" |
display_thumbs | Specifies if the thumbnails are visible. | true | true, false. |
display_dbuttons | Specifies if the directional buttons are visible. | true | true, false. |
display_playbutton | Specifies if the play/pause button is visible. | true | true, false. |
display_thumbimg | Specifies if thumbnail image are displayed. | false | true, false. |
display_side_buttons | Specifies if the side directional buttons are displayed. | false | true, false. |
display_timer | Specifies if the timer indicator bar is visible. | true | true, false. |
display_numbers | Specifies if thumbnails are auto numbered. | true | true, false. |
tooltip_type | Specifies the tooltip type. | "image" | "image", "text", "none". |
mouseover_select | Specifies if banners are selected from mouse-overing of thumbnails. | false | true, false. |
mouseover_pause | Specifies if rotation pauses on mouseover and resumes on mouseout. | false | true, false. |
cpanel_mouseover | Specifies if the control panel appears only on mouseover and hides on mouseout. | false | true, false. |
text_mouseover | Specifies if the text box appears only on mouseover and hides on mouseout. | false | true, false. |
text_effect | The effect to display the text box. | "fade" | "none", "fade", "up", "down", "left", "right". |
text_sync | Specifies true for text box to appear only after transition is completed or false for text box to appear immediately. | true | true, false. |
shuffle | Specifies if slides are displayed in random order. | false | true, false. |
mousewheel_scroll | To specify if mousewheel scroll is enabled. | true | true, false. |
block_size | The size of the blocks use for block transitions. | 75 | Any positive number. |
vert_size | The size of the vertical stripes use for vertical stripe transitions. | 50 | Any positive number. |
horz_size | The size of the horizontal stripes use for horizontal stripe transitions. | 50 | Any positive number. |
block_delay | The delay when the next block transition occurs in sequence. (in milliseconds) | 25 | Any positive number. |
vstripe_delay | The delay when the next vertical stripe transition occurs in sequence. (in milliseconds) | 75 | Any positive number. |
hstripe_delay | The delay when the next horizontal stripe transition occurs in sequence. (in milliseconds) | 75 | Any positive number. |
Transition Value | Description | Category |
---|---|---|
none | No transition | N/A |
fade | Fade in transition | |
h.slide | Horizontal slide transition | |
v.slide | Vertical slide transition | |
random | Random transition (random only includes all the transitions in category blocks, vertical & horizontal stripe) |
|
block.top | Blocks expand, starting from top. | Blocks |
block.bottom | Blocks expand, starting from bottom. | |
block.left | Blocks expand, starting from left. | |
block.right | Blocks expand, starting from right. | |
diag.fade | Blocks fade in, starting diagonally. | |
diag.exp | Blocks expand, starting diagonally. | |
rev.diag.fade | Blocks fade in, reverse diagonally. | |
rev.diag.exp | Blocks expand, reverse diagonally. | |
block.fade | Blocks fade in at random speed. | |
block.exp | Blocks expand at random speed. | |
block.drop | Blocks fall at random speed. | |
block.top.zz | Blocks fade in, start from top and zig zag down. | |
block.bottom.zz | Blocks fade in, start from bottom and zig zag top. | |
block.left.zz | Blocks fade in, start from left and zig zag right. | |
block.right.zz | Blocks fade in, start from right and zig zag left. | |
spiral.in | Blocks fade in, spiraling in. | |
spiral.out | Blocks fade out, spiraling out. | |
vert.random.fade | Vertical stripe fade in at random. | Vertical Stripe |
vert.tl | Vertical stripe transition starting top left. | |
vert.tr | Vertical stripe transition starting top right. | |
vert.bl | Vertical stripe transition starting bottom left. | |
vert.br | Vertical stripe transition starting bottom right. | |
fade.left | Vertical stripe transition fade starting from left. | |
fade.right | Vertical stripe transition fade starting from right. | |
alt.left | Alternating vertical stripe transition starting from left. | |
alt.right | Alternating vertical stripe transition starting from right. | |
blinds.left | Vertical blinds transition starting from left. | |
blinds.right | Vertical blinds transition starting from right. | |
horz.random.fade | Horizontal stripe fade in at random. | Horizontal Stripe |
horz.tl | Horizontal stripe transition starting top left. | |
horz.tr | Horizontal stripe transition starting top right. | |
horz.bl | Horizontal stripe transition starting bottom left. | |
horz.br | Horizontal stripe transition starting bottom right. | |
fade.top | Horizontal stripe transition fade starting from top. | |
fade.bottom | Horizontal stripe transition fade starting from bottom. | |
alt.top | Alternating horizontal stripe transition starting from top. | |
alt.bottom | Alternating horizontal stripe transition starting from bottom. | |
blinds.top | Horizontal blinds transition starting from top. | |
blinds.bottom | Horizontal blinds transition starting from bottom. |
For help or questions regarding this file, please contact me using the email form on my profile page.
back to top