BrandBox is a simple widget that enables the use of existing DOM elements to create widget that cycles through pieces of content. Whether these pieces of content are images, pieces of text or flash videos is left to the user.
Optionally, the class can create numbered 'tabs' and/or a list indicating the names of the items that are cycled. Both the tabs and the list will hilight along with the content that is currently being showed by applying a user-defined class to the corresponding items.
The styling of the entire plugin (including the positioning of the container and contents) is left to the user. See the demo for an example of this.
The code (BrandBox.js) will work with both MooTools 1.3 and 1.4, without needing compatibility layer.
A brand box is created by supplying an id or an element containing the pieces of content that should be cycled. Consider the following HTML snippet to be turned into a brand box:
<div id="items"> <div class="item"> <h2>This is the first item</h2> <p>The first item in the brand box sadly does not contain anything interesting.</p> </div> <div class="item"> <h2>The second item is similar</h2> <p>The scond item is also not all that interesing.</p> </div> <div class="item"> <h2>Some markup</h2> <p> <img src="path/to/image.png" alt=":)" /><br/> And some text too. </p> </div> </div>
To create a brand box from the markup shown, a call to the constructor as such will suffice:
var myBrandBox = new BrandBox('items');
Based on the default values for BrandBox' options, the contents whithin each element with class item will be shown in turn.
var myBrandBox = new BrandBox(container[, options]);
Starts the periodic showing of content items.
Stops the periodic showing of elements.
Shows the previous item.
Shows the next item, analogous to previous().
Shows a particular item by index.
myBrandBox.show(index[, animate[, userInitiated]]);
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.blog comments powered by Disqus