Documentation & Demos

jSlider

Code Examples

html code needed

<!-- the slider content holder -->
<div class="slider">
    <!-- the elements inside the slider, have as many as you want -->
    <div>
    	<a href="#">
        	<img src="slider_01.jpg" width="600" height="350" border="0" />
        </a>
    </div>   

    <!-- the navigation can be placed ANYWHERE in your document -->
    <a href="#" class="next">&rarr;</a>
    <a href="#" class="prev">&larr;</a>
</div><!-- slider -->

javascript code needed

$(document).ready(function(){
	$(".slider").jSlider({elem:"div"});
});

optional css you can use for a base

.slider {width:600px; height:350px; margin:50px auto; position:relative;}
a.next, a.prev {color:#000; background-color:#eee; border:1px solid #fff; outline:1px solid #ccc; text-shadow:-1px -1px 0px #fff; text-decoration:none; z-index:99; padding:0px 5px; display:block; }
.next {position:absolute; right:-10px; top:50%;}
.prev {position:absolute; left:-10px; top:50%;}
a.inactive {color:#ccc; background-color:#fff; border:1px solid #eee; outline:none;}
/* ul.navi is the generated navigational bullets we generate, you can disable this */
ul.navi {list-style:none; position:absolute; bottom:10px; right:5px;}
ul.navi li {float:left; margin-right:5px;}
ul.navi li a {background-color:#CCC; display:block; height:10px; width:10px; text-indent:-9999px; outline:none; -moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow:  0px 0px 2px  #000000;
-moz-box-shadow: 0px 0px 3px #000000;
box-shadow: 0px 0px 1px #000000; }
ul.navi li a.active {background-color:#fff;}

Documentation

The slider has a wide range of options you can choose to use. For custom animation transition effects you will need to embed the custom_animations.js. For custom easing in effects you will need to embed the custom_easing.js.

previous_class the class for the element that navigates to the previous item
next_class the class that navigates to the previous item/slide
inactive the class that will be set to the previous or next navigations when they are inactive
elem the elements inside your slider content item, this can be li's if ur slider is a ul
animation the animation is by default set to fade but if you include the custom_animations.js file you can use the following: slideDown, slideUp, slideRight, slideLeft, bounce, explode, fold, scale, random
easing by default we use swing easing but if you included the custom_easing.js file you can use the following easing: linear, swing, jswing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce
speed the speed of the animation
navi true/false if you want to have the navigation list to shop up
navi_active_class if navi is true you can choose a class to use for the navigation's active item
navi_class if navi is true you can choose a class to use for the navigation itself
auto_slide true/false to play the slider like a slide show
auto_slide_interval time in milliseconds between slides
auto_pause_hover if auto_slide is enabled you can choose whether to pause the slider when you hover with your mouse
click_next true/false if you want to allow to go to next slide when you click on the slider
infinite true/false infinite will make the slider infinite so when you are at the last slide you can click next and go back to the first slide and the same is true for the previous button
images true/false if your slider uses an image for each slide enabling this will take that image and set it as the background of the slider so when the animation occurs it feels natural switching

jTabs

Code Examples

html code needed

<ul class="tabs">  
    <li class="active"><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>  
<div class="clear"></div>
<div class="tabs_content">
    <div>Sample 1 content</div>
    <div>Sample 2 content</div>
    <div>Samplest content for the 3rd tabSamplest content for the 3rd tab</div>
</div><!-- tabs content -->

javascript code needed

$(document).ready(function(){
	$("ul.tabs").jTabs({content: ".tabs_content"});
});

optional css you can use for a base

ul.tabs {list-style:none; width:500px;}
ul.tabs li:first-child {border-left:1px solid #ccc;}
ul.tabs li {float:left; border-right:1px solid #ccc; border-top:1px solid #ccc; background-color:#eee;}
ul.tabs li.active {border-bottom:1px solid #fff; background-color:#fff; margin-bottom:-1px;}
ul.tabs li a {display:block; padding:5px 10px; color:#777; letter-spacing:-1px; outline:none; text-decoration:none; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}
ul.tabs li.active a {font-weight:600; color:#000;}

div.tabs_content {width:500px; border:1px solid #ccc;}
div.tabs_content > div {padding:20px; display:none;} /* suggested to use display:none so that if the html is very long it wont jump badly */

Documentation

The jTabs allow you to use cookies, or custom fade in effects. It also has equal height script to make the pagination jump free.

content the element that will hold the divs with the content of each tab
equal_height true/false to enable the columns to find the highest tab and set the height across all tabs
cookies true/false will use browser cookies to store which tab the user is on
animate true/false if you would like to use an animation effect when you switch tabs
effect which animation effect would you like to use (default is fade) other option includes slide
speed if you have animation to true you can choose how long to take the effect to take place

jPaginate

Code Examples

html code needed

<div id="content">  
    <p>1Lorem ipsum dolor sit amet, consectetur adipiscing ept.</p> 
    <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet apquam urna laoreet.</p> 
    <p>Curabitur a ipsum ut ept porttitor egestas non vitae pbero.</p> 
    <p>Pellentesque ac sem ac sem tincidunt euismod.</p> 
    <p>2Duis hendrerit purus vitae nibh tincidunt bibendum.</p> 
    <p>Nullam in nisireet.</p>   
    <p>Nulla sed purus et tellus convalps scelerisque.</p> 
    <p>Nam at justo ut ante consectetur faucibus.</p> 
    <p>Proin dapibus nisi a quam interdum lobortis.</p> 
    <p>Nunc ornare nisi sed mi vehicula eu luctus mauris interdum.</p> 
    <p>Mauris auctor suscipit tellus, at sodales nisi blandit sed.Lorem ipsum dolor sit abitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> 
</div>

javascript code needed

$(document).ready(function(){
	$("#content").jPaginate(); 
});

optional css you can use for a base

#content {width:500px;}
/* the following code is to style the generated pagination navigation system */
.pagination {list-style:none; margin:10px 0px 0px 0px; padding:0px; clear:both;}
.pagination li {float:left; margin:3px;}
.pagination li a{   display:block; padding:3px 5px; color:#fff; background-color:#44b0dd; text-decoration:none;}
.pagination li a.active {border:1px solid #000; color:#000; background-color:#fff;}
.pagination li a.inactive {background-color:#eee; color:#777; border:1px solid #ccc;}

Documentation

jPagination is filled with great little options to make the experience full of enhancements. For example you can set equal height to true to disable any jumping from the difference in height of pages. You can also enable cookies and have the users selected page be pre-selected when they refresh or come back to the page.

items number of items to have per page on pagination
next the text you want to have inside the text button
previous the text you want in the previous button
active the class you want the active paginaiton link to have
pagination_class the class of the pagination element that is being generated for you to style
minimize minimizing will limit the overall number of elements in the pagination links
nav_items when minimize is set to true you can specify how many items to show
cookies if you want to use cookies to remember which page the user is on, true by default
position specify the position of the pagination, possible options: "before", "after", or "both"
equal implements an equal height main element by using the highest possible element use true false
offset unfortunately calculating heights with javascript isn't always 100% accurate, so please use this value to make it perfect :) its defaultly set to 50

jSpotlight

Code Examples

html code needed

<ul class="parent">
	<li><img src="one.jpg" width="300" height="250" title="Such a pretty photo!" /></li>
    <li><img src="two.jpg" width="300" height="250" title="Even prettier!" /></li>
    <li><img src="three.jpg" width="300" height="250" title="Simpler and more information cna be handled here" /></li>
    <li><img src="four.jpg" width="300" height="250" title="short" /></li>
</ul><!-- parent -->

javascript code needed

$(document).ready(function(){
	$(".parent").jSpotlight({title_effect: "slide"});
});

optional css you can use for a base

.parent {list-style:none; margin:0px; padding:0px;}
.parent li {float:left; margin:10px; border:5px solid #eee; width:300px; height:250px; position:relative;}
.parent li.active {border:5px solid #000;}
.parent li.inactive {border:5px solid #ccc; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;}
.parent li .title {position:absolute; bottom:0px; left:0px; right:0px; padding:5px; background-color:#000; color:#fff; text-align:center;}

Documentation

jSpotlight is the real jewel of vanity in the whole set of plugins. It allows you to create beautiful spotlight effect in a series of images or just elements.

active the class for the element that is currently hovered over
inactive the class for the elements that are not hovered over when the main element is active
attr the attribute inside the img to take the information for the title
title_class the class of the title div which you can style
title_effect the effect the title will have appearing and dissapearing, possible: slide, fade, default
title_speed specify the speed of the effect in milliseconds or use slow/fast in quotes so like "slow"
title here you can enable or disable the title effect by passing in true or false

jTip

Code Examples

html code needed

<a href="#" class="tip" title="jTip And something longer will go here">Simple Tip</a>
<a href="#" class="tip" title="Something else in here!">Simple Tip 2</a>
<a href="#" class="tip" title="This is the greatest tip plugin EVER! Seriously :)">Longer text</a>

javascript code needed

$(document).ready(function(){
	$(".tip").jTip();
});

optional css you can use for a base

.tip_window {
	padding:5px; 
	width:200px;
	border:1px solid #fff;
	background-color:#000; 
	color:#fff; 
	text-align:center;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-top-left-radius: 0px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px; 
	-webkit-box-shadow: 1px 1px 3px #6e6d6e;
	-moz-box-shadow: 1px 1px 3px #6e6d6e;
	box-shadow: 1px 1px 3px #6e6d6e; 
}

Documentation

jTip is a super simple tip plugin, it's so simple we only have 4 options to use. Which attribute, that class for the tip, and the coordinates away from the element. That easy!

attr the attribute you want to pull the content from
tip_class the class you want to style for the tip, make sure to have a width when styling
y_coordinate the distance from the mouse the tip will show in the vertical direction
x_coordinate the distance from the mouse the tip will show in the horizontal direction

jPlaceholder

Code Examples

html code needed

<form method="get" action="#">
<input type="text" placeholder="something simple..." name="simple" class="placeholder" />
<input type="submit" />
</form>

javascript code needed

$(document).ready(function(){
	$("input:text").jPlaceholder({css_class: "placeholder"});
});

optional css you can use for a base

.placeholder {color:#888;  font-style:italic;}

Documentation

jPlaceholder brings the functionality of the html5 placeholder in all browsers!

css_class allows you to specify the class for the placeholder text

jCollapse

Code Examples

html code needed

<a href="#" class="collapse" rel="#collapsibleElement">Expand</a>
<div id="collapsibleElement">
	Test Content Number 1
</div>

javascript code needed

$(document).ready(function(){
    $(".collapse").jCollapse({effect: "fade"});                       
});

Documentation

The collapse is very easy to use with only a few options to modify.

expand_text enter the text you want the link to contain before the user has expanded the elements default is "expand"
collapse_text the text you want after the user expands the element(s) default is "Collapse" (commonly you can use More and Less)
effect this will be the effect that will change the way the new element/s show up, available options are: display, slide, fade