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.

a jQuery Plugin for image Slider

All-In-One Slider a jQuery Plugin

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..

columnNo : 1, //[1,2,3......; default 1] number of columns, each column hold one item
rowNo : 1, //[1,2,3......; default 1] number of rows, each row hold one item
itemMove : 2, //[1,2,3......; default 1] number of item scroll per click / move
Speed : 1000, //[in milliseconds] animation speed
autoPlay : true, //["true" or "false"] auto play disable or Enable
animDir : “left2right” //["left2right" or "right2left"] change animation direction

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)

About these ads

8 Comments on “All-In-One Slider a jQuery plugin”

  1. Pol says:

    Hi! Just a question. Im trying to make a thumbnail navigation on http://www.birdpictures.pro but i have a problem, when i click on a thumnail the page reloads and the slide starts from the beggining again. I’m not very good with jquery.

    So my question is, can I set the slide to start at some photo? (ie. to check the url and set the slide to that position?

    • Md. Faisal says:

      hi, I think you trying to start ur slider from a particular img. in that case u can’t do this. and for navigation problem please check “demo-1″ and “demo-4″ files in ur all-in-one folder. i used nav link with img and also with caption.

  2. Pol says:

    Thanks for your fast response Faisal. I’ve almost done it since the current image has the class “select” I can find the offset of the current image. Now I’m adjusting it to set the current img in the middle of the container.

    Tomorrow I think i’ll complete it, after it’s done i’ll post a comment so you can see it.

    Cya!

  3. Pol says:

    It’s done! Check it if you want.

  4. Scooter says:

    FYI – download and demo links are bad now :(

  5. Marco says:

    it´s possible center img when have correct height but width is minor like

    OK: 320wx 240h (correct all box)
    Fail: 150wx240h (img position wrong, all left)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.