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:  How to write dynamic css in a php file in wordpress

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:  Fix png issue for jQuery fadeIn()/fadeOut() effect IE7

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:  BeautyMenu: A simple jQuery drop down menu plugin

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