All-In-One Slider a jQuery plugin

jQuery has changed the way users interact with websites. jQuery Image sliders are become increasingly popular within webpages. I’ve created a Slideshow widget All-In-One. As I’m calling it All-In-Oneso I hope almost all jQuery slider features you will find here. And Of course some new features which you may find interesting.

All-In-One Slider a jQuery Plugin

• VIEW DEMO
• DOWNLOAD IT (812 Kb)

A New Version is Available here. Check out-
• DEMO [Ver 2.0]

Features

• Any types of content are possible to add.You can add Images, Plane text, Html content, videos what ever you want to slide
• Display Multiple Items TogetherYou can display multiple items in column or row direction. So in a single box people can see multiple items together. Usually very useful in product display purpose.
• Display your content in Two Dimensional ViewYou can give All-In-One slider a two-dimensional view. All you’ll have to do is add Column and Row number. How many column and row you want to use per movement.
• Accessible Auto-Playing Slideshow Feature.Auto-playing feature included. Which is user accessible You can change auto play directions. Like Left to Right or Right to Left etc also you can disable auto-playing slideshow option if you don’t like it.
• Number Of Items Move/Scroll Per Click/MoveYou can control the number of items which you want to scroll per click or when auto-play is going on. Just like in jCarousel.
• Animation Speed Control.You can control animation speed. So if you want to move your content Faster/Slower you can adjust it.
• Mouseover Pause During auto-play if you want to see what is the item is then just move your mouse over the item and autoplay will pause.
• Overlay Caption For ImageYou can add a overlay caption with images, for showing title or meta content.
• All Options are OptionalYou can just add more than a few words $(DIV NAME).all-in-one({}); to make All-In-One slider works, if you don’t have much time to add options. It will work fine. Although options will make it perfect

How to Make this Work

• HTML Markup

<!-- All-in-One Slider's HTML Markup -->
<div id="any_name">
<div id="another_name">
<ul>
	<li><img src="myImg/01.jpg" alt="" /></li>
	<li><img src="myImg/02.jpg" alt="" /></li>
	<li><img src="myImg/03.jpg" alt="" /></li>
	<li><img src="myImg/04.jpg" alt="" /></li>
	<li><img src="myImg/05.jpg" alt="" /></li>
</ul>
</div>
</div>

• CSS

/* All-in-One Slider's CSS */
#allinone-frame{
width:500px;
height:238px;
margin:0 auto;
background:#242424;
overflow:auto;
}

#allinone-content{
position:relative;
margin:0 auto;
width:60%;
color:#fff;
background:#3d3d3d;
}

#allinone-content ul{list-style-type:none; }

#allinone-content li{ margin:8px; float:left; }

/* change width or height value if you want */
#allinone-content li img{
width:256px; height:192px; /* (important) need to be same as your images width & height */
}

#allinone-meta-content{
height:40px; position:relative; margin-top:-46px; color:#fff; background:#000;
font-size:11px;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity:0.6;
padding:2px;
}

#allinone-meta-content p{font-size:15px; font-weight:bold; padding-left:2px;}
#allinone-meta-content span{position:relative; font-size:11px; color:#e4ff00; padding:2px; font-style:italic;}

• Script

// All-in-One Slider's jQuery script

// add jquery library
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>// add All-In-One version 1.0<script type="text/javascript" src="jquery.allinone-1.0.js"></script>

$(document).ready(function() {
$('#allinone-frame').allinone({
    autoPlay:true
});
});

Options

In order to make All-In-One looks like your own you can add some options. like..

Questions?

If you face any problem or find any bug please feel free to contact me. Just leave a message here or mail me. I hope you will enjoy it.

VIEW DEMO

DOWNLOAD IT (812 Kb)

A New Version is Available here. Check out-
• DEMO [Ver 2.0]