This is my first jQuery plugin. Not so perfect, but it can be used I think :)

This plugin is very easy to use.

Doc:
This is a small slider content plugin for three horizontal floated div. By clicking on top menu, the divs switch.

1. Just pass the master div id which is wrapping the three floating div in the parameter field named master.
2. Pass id of the three floated divs’ in label parameter under jid index
3. Pass id of the three links’ in label parameter under links index

That’s It!
You don’t have to mention floated div in css.

Javascript Code:
[html]

$(document).ready(function(){
$.fn.jSlider({
//”width”:null,
//”height”:null,
“master”:”content”,
“labels”:[
{“jid”:”one_content”, “links”:”one”},
{“jid”:”two_content”, “links”:”two”},
{“jid”:”three_content”, “links”:”three”},
]
});
});

[/html]

HTML Code:
[html]

This is DIV 1

This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1.

You may also read:  An easy tooltip plugin tutorial

This is DIV 2

This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2.

You may also read:  Reorder or rearrange buddypress menu items

This is DIV 3

This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3.

You may also read:  How to enable php mail() in your ubuntu

[/html]

CSS Code:
[css]

#wrapper{
width:100%;
overflow:hidden;
color:#990000
}

#header{
width:100%;
height:30px;
background:#0033FF;
color:#FFFFFF;
}

#content{
overflow:hidden;
}

#header a{
padding:5px 15px;
color:#FFFFFF;
}

#one_content{
background:url(images/one.jpg) repeat;
}

#two_content{
background:url(images/two.jpg) repeat;
}

#three_content{
background:url(images/three.jpg) repeat;
}

[/css]

That’s it !

Leave a Reply