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.
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.
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.
[/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 !