jSlider Plugin for jQuery (for 3 horizontal div)

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 add login logout link in wordpress menu

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:  How HTML5 supports older versions of IE

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

You may also like...

Leave a Reply

%d bloggers like this: