Created:03/24/2010
By: SplitV
Thank you for purchasing my script. If you have any questions please feel free to email via my user page contact form here. Thanks so much!
Please take the time to read the documentaion fully before using this script. Each section is very important.
SV Slider is a script to make it easy for you to create a slideshow, be it a featured content slideshow or just an image slider. This script is suitable for all your slideshow needs. The Idea behind it is that you create the html/css to structure the slideshows look/feel the way you want and use the script to add functionality and control it. It is an incredibly small script at just 3.6kb(4.5 non-minified) and features 6 types of transitions between slides.
In case you plan to use only one type of transition througout your slideshow I have also included seperate scripts for each type of transition that weigh in at only 1.5 kb a piece. I will explain in a later section how to use these. Later on, I will also explain how to edit the script itself and remove transitions that you do not plan on using to allow you to have the smallest possible script that suits your exact needs.The first and most important part of the class is the constructor and options you pass in, but I will explain this in the basic usage section next. Here I will explain the rest of the methods and variables available to you for controlling the slideshow. Object_instance is to be replaced by the actual instance of the object you create in your code.
Class Methods
Object_instance.pl( ) -
'pl' is the play function. It will start the slideshows 'autoplay'
feature. It takes no arguments and returns nothing.(it will
automatically transition to the next slide when first called so if you
want to delay this feature call it within a settimeout call as
explained later)
Object_instance.gt( Slide_Number ) -
'gt' is the goto function. You call this function and pass to it the
slide number for the slide you wish to transition to and this function
will cause the slideshow to transition to that slide next. The slide
number corresponds to the order that the slides are in in the html code.
Object_instance.nx( ) -
'nx' is the next function. It will cause the slideshow to transition to
the next slide. It takes no arguments and returns nothing.
Object_instance.pr( ) -
'pr' is the previous function. It will cause the slideshow to
transition to the previous slide. It takes no arguments and
returns nothing.
Object_instance.st( ) -
'st' is the stop function. It will cause the slideshow to stop
transitioning if it is auto-playing. It takes no arguments and
returns
nothing.
Object_instance.cb( Current , Last ) -
'cb' is the onstart callback function you set when initializing the
script. It gets called at the beginning of each transition. It recieves
the current slide number and last slide number as arguments when called.
Object_instance.ce( Current , Last ) -
'cb' is the onend callback function you set when initializing the
script. It gets called at the end of each transition. It recieves
the current slide number and last slide number as arguments when called.
Class Variables
Object_instance.del -
'del' is the delay variable that gets set with the value you pass into
the constructor. It controls how long(in milliseconds) each slide is
shown before
transitioning to the next when autoplaying.
Object_instance.tm -
'tm' is the time/speed variable that gets set with the value you pass
into
the constructor. It controls how long each transition lasts.
Object_instance.sts -
'sts' is the steps variable that gets set with the value you pass into
the constructor. It controls how many steps are in the
animations/transitions.
Object_instance.c -
'c' is the variable that holds the number of the current slide.
Object_instance.l -
'l' is the variable that holds the number of the last slide.
Object_instance.ti -
'ti' is the variable that carries the value returned from settimeout
calls internally.
To begin, lets start with the basic html that must be present in ALL slideshows created with the script.
<div id='container'>
<ul>
<li>
//Content for first slide goes here
</li>
<li>
//Content for second slide goes here
</li>
<li>
//Content for third slide goes here
</li>
</ul>
</div>
And thats it, at the bare minimum you need a div(with a unique ID) that has an undordered list nested within it. The list items will be the slides to the slideshow. You can add as many list items(slides) as you wish and they can contain pretty much anything you wish to display, from images for a gallery to articles/posts for a featured content section. The div needs a unique id as this will be what you pass to the script to identify what you want to be made into a slideshow.
Now for the required CSS...
#container{
border:1px solid #5c5c5c;
height:345px;
width:700px;
position:relative;
overflow:hidden;
}
#container ul{
list-style:none;
margin:0px;
padding:0px;
}
#container ul li{
height:345px;
width:700px;
}
The first section gives the containing div a set width/height and sets overflow to 'hidden'. Overflow being set to hidden is very important because the slides are constanty being moved around to setup and go through the transitions, this allows the script to do that without the user being the wiser. The position:relative is important as IE browsers tend to ignore 'overflow:hidden' if an element has not specified position. The next section removes all defualt styling on the list. And the very last section just sets the width and height of all the slides. This is all the CSS you required to get started and you can actually create a very basic slideshow with just the HTML/CSS presented above.
Now for the javascript, first include the javascript file in the head section of the page..
<script src="js/sv_slider.min.js" type="text/javascript"></script>
Next you will need to create an instance of the slider class passing in the appropriate options, this must be done after the html for the slides has fully loaded and usually is done in the window.onload handler.
<script type="text/javascript">
window.onload=function(){
var options = {
"id": "container", // Required ID
"type": "slideout",// Optional Type of transition
"width": 700,// Required Width
"height": 345,// Required Height
"delay": 3000,// Optional Delay
"speed": 400,// Optional Speed
"steps": 10,// Optional Steps
"onstart": null,// Optional Onstart callback
"onend": null,// Optional Onend callback
};
///////////////////////////
// Initialize The slider //
///////////////////////////
var sc= new sv_slider(options);
}
</script>
Lets discuss the options object first. 'id' must be set to the id of the containing div element as mentioned earlier. The 'type' should be set to one of the six types of transitions(defaults to 'dropin'), available options are 'scrollanddrop', 'dropandscroll', 'dropin', 'riseout', 'slidein' and 'slideout'. Width and Height must be set to the same values you set for the containing div in the CSS code. 'Delay' is how long to show a slide before transitioning to the next(defaults to 4000), 'speed' is the how long it takes to transition(defaults to 400) and 'steps' is the amount of steps in the transition animation(defaults to 10). 'onstart' and 'onend' are OPTIONAL callback functions that you can define which will be called at the end or beginning of a transition respectively. Those function will recieve two arguments, the first will be a number representing the current slide and the second will be a number representing the last slide(we wil go through an example of these callbacks in the next section).
After you define the options you just need to create a new instance of the sv_slider class passing in the options object and we are done. The slider is setup to start autoplaying through the slides as soon as you initiate an instance of the class. If you add all of the above code to your html document you will have a slideshow(with blank slides). To see it all in action check out the 'tutorial1.html' file located in the 'examples' folder. If you read through the code you will notice that it is exactly the code posted in this section with the only alteration being that images have been added to the slides.
.
For this section we will be recreating the examples for the 'page 1' that you can view in the live preview on codecanyon.
To begin, lets talk about the needed html to add those box controls to the slideshow.
First you will want to take the basic html above and wrap the 'container' div with another div. This serves two purposes, one it will allow us to keep the controls hidden and then move them into view with javascript and two, it allows us to be certain that in all browsers/layouts our controls will begin from the same exact position when we move them into place later. So if you add another div the code should look like this.<div id='slideshow_wrap'>
<div id='container'>
<ul>
<li>
//Content for first slide goes here
</li>
<li>
//Content for second slide goes here
</li>
<li>
//Content for third slide goes here
</li>
</ul>
</div>
</div>
Now within the outer div but below the slideshow itself we will now need to add the code for the controls themselves.
<div id='slideshow_wrap'>
<div id='container'>
<ul>
<li>
//Content for first slide goes here
</li>
<li>
//Content for second slide goes here
</li>
<li>
//Content for third slide goes here
</li>
<li>
//Content for Forth slide goes here
</li>
<li>
//Content for Fifth slide goes here
</li>
</ul>
</div>
<div id="control_wrap">
<div class="control_active"></div>
<div class="control_inactive"></div>
<div class="control_inactive"></div>
<div class="control_inactive"></div>
<div class="control_inactive"></div>
</div>
</div>
The controls are wrapped in their own div which will allow us to grab the controls and change the classes via javascript at a later point in time. The CSS classes added to the inner divs will allow us to easily show which slide is the active slide. Now onto the CSS.
#slideshow_wrap{
height:345px;
width:700px;
position:relative;
overflow:hidden;
}
You should quickly notice the css for the slideshow wrap is pretty much the same as the code for the container div. Now to the CSS for the controls
#control_wrap{
width:190px;
margin-left:30px;
}
.control_inactive,.control_active{
float:left;
margin:0px 14px 0px 0px;
border:1px solid #5c5c5c;
background:#fff;
width:20px;
height:10px;
cursor:pointer;
}
.control_inactive{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: .5;
}
.control_active{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1.0;
}
The first block just sets a width on the outer container div for the controls and margins it a little off of the left edge. We could easily add the code to position it above our slideshow now, but by not doing that the controls will not display if javascript is disabled. The second block of code floats and positions all of inner control divs in a row and then sets a width/height for them. Then it adds a border and background color for the divs. The next two change the opacity of the blocks, this will allow us to have the div that coincides with the currently viewed slide be fully opaque while the inactive slides will have a 50% opacity.
Now onto the javascript. We will start off with the same javascript used in the last section and expand apon it.
<script type="text/javascript">
window.onload=function(){
var options = {
"id": "container", // Required ID
"type": "slideout",// Optional Type of transition
"width": 700,// Required Width
"height": 345,// Required Height
"delay": 3000,// Optional Delay
"speed": 400,// Optional Speed
"steps": 10,// Optional Steps
"onstart": null,// Optional Onstart callback
"onend": null,// Optional Onend callback
};
///////////////////////////
// Initialize The slider //
///////////////////////////
var sc= new sv_slider(options);
sc.st(); // Call the stop function
var c_div= document.getElementById('control_wrap'); //Grab the outerdiv to our controls
c_div.style.position="relative"; // set the position to relative.
c_div.style.top=-(options.height-10)+"px"; //Move it to 10 pixels from the top
c_div.style.zIndex=10000; //set the zindex to an extreme number
sc.ti=setTimeout(function(){sc.pl(sc);},sc.del);
}
</script>
You should notice that the first thing we add is a call to the 'st' function of the script, if you have read the earlier sections you will know this will stop the autoplay feature. It is called just to allow us to completely setup the slideshow before we start autoplaying it(optional). Next we grab the containing div element to our controls and position it where we want. The z-index is set to such an extreme number because some of the transitions available in the slider script work by setting the z-index value of slides to 1000. Setting the zindex value of the control div so high will ensure that it displays ontop of the slides no matter what transition is being used. If you have read through the previous sections I have mentioned that if you call the pl/play function it will automatically switch to the next slide and then begin autoplaying. We don't want our slideshow doing this as soon as the page loads so we use settimeout to delay it. We use the delay value you passed in with the options. And then we catch the return value in the instances ti variable. Catching that value and storing it in that variable will allow us to stop the autoplay feature if one of the controls are clicked before the first slide is transitioned. If you add all of the code so far to an html file and load it into your browser you will now get a slideshow that autoplays and see our controls ontop of it. And well thats about it, our controls do nothing yet.
Now we need to add functionality to our control divs.
<script type="text/javascript">
window.onload=function(){
var options = {
"id": "container", // Required ID
"type": "slideout",// Optional Type of transition
"width": 700,// Required Width
"height": 345,// Required Height
"delay": 3000,// Optional Delay
"speed": 400,// Optional Speed
"steps": 10,// Optional Steps
"onstart": null,// Optional Onstart callback
"onend": null,// Optional Onend callback
};
///////////////////////////
// Initialize The slider //
///////////////////////////
var sc= new sv_slider(options);
sc.st(); // Call the stop function
var c_div= document.getElementById('control_wrap'); //Grab the outerdiv to our controls
c_div.style.position="relative"; // set the position to relative.
c_div.style.top=-(options.height-10)+"px"; //Move it to 10 pixels from the top
c_div.style.zIndex=10000; //set the zindex to an extreme number
var divs=c_div.getElementsByTagName('div');//grab a list of our controls
for(i=0;i<divs.length;i++){ // cycle through all the control divs.
divs[i].num=i+1; //store the slide number it corresponds to
divs[i].onclick=function(){sc.gt(this.num);};//add onclick event handler
}
sc.ti=setTimeout(function(){sc.pl(sc);},sc.del);
}
</script>
If you look at the code we added we have first grabbed a list of all the divs within our 'control_wrap' div. These are the divs that are our controls. Next we cycle through the list of divs with a for loop. We must first add a variable to each element to hold the numbers for the slide they represent. We do this because the actual onclick will be triggered outside of the scope of our forloop so just passing i to the onclick handler will not yield the results we are looking for. We add 1 to i because as you should know indexing starts at 0 and we want our numbers to start at 1 to represent which slides they correspond to. The next line will add an onlick event handler to each div, it calls the gt/goto function and tells the script to transition to the specific slide that the control div which was clicked represents.
Now if you load the page in a browser you get a slideshow with fully functioning controls, if you click on one of the small block controls the slideshow will transition to the slide that it represents. You should notice though that our first control div is fully opaque while the rest are not, and this never changes. We already have the css classes setup, so now lets change the classes on the control divs to correspond to which slide is active. We will create an onstart callback function and pass it in with the options.
<script type="text/javascript">
window.onload=function(){
var options = {
"id": "container", // Required ID
"type": "slideout",// Optional Type of transition
"width": 700,// Required Width
"height": 345,// Required Height
"delay": 3000,// Optional Delay
"speed": 400,// Optional Speed
"steps": 10,// Optional Steps
"onstart": function(c,l){
c_div= document.getElementById('control_wrap');
divs=c_div.getElementsByTagName('div');
divs[l].className='control_inactive';
divs[c].className='control_active';
},
"onend": null,// Optional Onend callback
};
///////////////////////////
// Initialize The slider //
///////////////////////////
var sc= new sv_slider(options);
sc.st(); // Call the stop function
var c_div= document.getElementById('control_wrap'); //Grab the outerdiv to our controls
c_div.style.position="relative"; // set the position to relative.
c_div.style.top=-(options.height-10)+"px"; //Move it to 10 pixels from the top
c_div.style.zIndex=10000; //set the zindex to an extreme number
var divs=c_div.getElementsByTagName('div');//grab a list of our controls
for(i=0;i<divs.length;i++){ // cycle through all the control divs.
divs[i].num=i+1; //store the slide number it corresponds to
divs[i].onclick=function(){sc.gt(this.num);};//add onclick event handler
}
sc.ti=setTimeout(function(){sc.pl(sc);},sc.del);
}
</script>
Now this added function is pretty simple. Both types of callback functions will recieve the current and last slide numbers so all we really need to do is grab the list of control divs again and index them using the current/last slide numbers the function recieves as arguments. Doing this, we then set the last slide to the 'inactive' class and the current one to the 'active class.
If you load that up, now we have the functioning slideshow complete with functional controls that will accurately represent which slide we are viewing. We could leave this as is, but there is one more thing I want to cover. Lets set the script up to alernate which type of transition it uses.
<script type="text/javascript">
window.onload=function(){
var options = {
"id": "container", // Required ID
"type": "slideout",// Optional Type of transition
"width": 700,// Required Width
"height": 345,// Required Height
"delay": 3000,// Optional Delay
"speed": 400,// Optional Speed
"steps": 10,// Optional Steps
"onstart": function(c,l){
sc.type=(sc.type=='slidein')?'slideout':'slidein';
c_div= document.getElementById('control_wrap');
divs=c_div.getElementsByTagName('div');
divs[l].className='control_inactive';
divs[c].className='control_active';
},
"onend": null,// Optional Onend callback
};
///////////////////////////
// Initialize The slider //
///////////////////////////
var sc= new sv_slider(options);
sc.st(); // Call the stop function
var c_div= document.getElementById('control_wrap'); //Grab the outerdiv to our controls
c_div.style.position="relative"; // set the position to relative.
c_div.style.top=-(options.height-10)+"px"; //Move it to 10 pixels from the top
c_div.style.zIndex=10000; //set the zindex to an extreme number
var divs=c_div.getElementsByTagName('div');//grab a list of our controls
for(i=0;i<divs.length;i++){ // cycle through all the control divs.
divs[i].num=i+1; //store the slide number it corresponds to
divs[i].onclick=function(){sc.gt(this.num);};//add onclick event handler
}
sc.ti=setTimeout(function(){sc.pl(sc);},sc.del);
}
</script>
All we did was add a single line to our onstart callback function. This line will just alternate between transition types before each slide is transitoned. If you load it up now you have the slideshow with the complete functionality we were looking for. Check out the 'tutorial2.html' file located in the examples folder for the complete source code to the example in this section..
Have a look through the rest of the examples for even more ideas about how you can use this script on your site.First I would like to cover the script files I mentioned in the first section, the ones where there is only a single transition per script. If you look in the 'js/seperated' folder you should notice a file for each type of transition where the names of the files correspond to the transition effect it contains(eg. slidein.js contains only the 'slidein' transition). These files are setup EXACTLY like the main script with the only difference being the name of the file and name of the class. The name of the class, like the name of the file, corresponds to the type of transition it contains. When using these scripts you would use them just as you would the main script except without passing in a value for the 'type' option and using the transition type as the class name.
<script type="text/javascript">Now if you don't plan on using all of the transition effects in the main file but plan on using more then one you can always remove the transition effects from the main file that you do not wish to use without effecting the functionality of the script itself. This is not really important to do but can cut 500bytes - 1kb per transition type out of the file size(im a stickler for making things as small as possible).
window.onload=function(){
var options = {
"id": "container", // Required ID
"width": 700,// Required Width
"height": 345,// Required Height
"delay": 3000,// Optional Delay
"speed": 400,// Optional Speed
"steps": 10,// Optional Steps
"onstart": null,// Optional Onstart callback
"onend": null,// Optional Onend callback
};
///////////////////////////
// Initialize The slider //
///////////////////////////
var sc= new slideout(options);
}
</script>
switch(m.type){
Below that line and before the corresponding } contains the code for all of the transitions. You should notice blocks of code starting off with a line like this.
case 'slideout':
That is the start of the code for the 'slideout' transition and the end of the code for that type of transition ends at the first 'break' statement after that first line. So for the slideout transition this would be the code for it.
case 'slideout':
if(!m.a){
el.zIndex=1000;ec.zIndex=1;
m.cl=0;ec.display=el.display="block";
if(m.l<m.c){el.top="0px";ec.top=-m.h+"px";}
else{ec.top="0px";el.top=-m.h+"px";}
el.left=ec.left="0px";
m.a=1;
}
if(m.cl<m.w){if(m.cl+m.sw>m.w){m.cl=m.w;}else{m.cl+=m.sw;}el.left=m.cl+"px";}
else{el.display="none";ec.top="0px";m.cl=0;m.a=0;m._e(cn);return;}
m.ti=setTimeout(function(){m.an(cn);},m.tm);
break;
If we removed that whole section including the first line and break statement then we would have successfully removed that animation from the script.
Credits for files includes
Once again, thank you so much for purchasing this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this scrpt.
SplitV