Unleash 2

Including Files

First of all, you need to import at the head of your html document (i.e between <head> <head/>) the jQuery version, gsgd easing plugin, the style file and the unleash 2 plugin file as follows:

     
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js></script>

<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/unleash.2.css" />

<script src="js/jquery.unleash.2.js" type="text/javascript" ></script>

Setting up HTML

Before the slides 2 divs are declared, first one named below 'unleash container' is necessary as it will contain the control buttons, it can be named anything, however it's name should be initiated in the options as will be shown in a later section. The next div is the slider object itself wich will be used to initiate the slider. Finaly, the 'box' div is for each slide and it contains the image and the caption as shown below (look at examples html pages for more details):

     
<div class="unleash_container"> <!-- container -->
    <div id="outer"> <!-- slider -->
    
        <div class="box"> <!-- slide -->
        <img src="img/img_1.jpg" /> <!-- slide image -->
            <div class="caption_1"> <!-- caption -->
            </div> <!-- end caption -->
        </div> <!-- end slide -->
        
        <div class="box"> <!-- slide -->
        <img src="img/img_1.jpg" /> <!-- slide image -->
            <div class="caption_1"> <!-- caption -->
            </div> <!-- end caption -->
        </div> <!-- end slide -->
                        .
                        .
                        .
                        .
        
    </div> <!-- end slider -->
</div> <!-- end container -->

Changing Styles

For the buttons and captions styles, the slider comes with multiple css files for different styles, however if you wnt to style your own caption, just choose a name for the caption div and initialize that name in the options as will be shown below, however, to style the buttons you need to stick to those class names as follows:

     //you can change these styles, this is just an example.
.unleash_loader { //this is the loader that grows by time.
	height: 5px;
	background: #F03;
	left: -100%; // don't change that
	position: absolute;
	position: relative;
	z-index: 1000;
}
.unleash_loader_bg { //this is the background of the loader
	width: 120px;
	height: 5px;
	overflow: hidden;
	background: rgba(255,255,255,0.2);
	position: absolute;
	z-index: 999;
	top: 20px;
	right: 20px;
}
.unleash_prev { //previous button
	background: url(../img/prev.png) no-repeat;
	height: 20px;
	height: 30px;
	width: 40px;
	float: left;
	cursor: pointer;
}
.unleash_next { //next button
	background: url(../img/next.png) no-repeat;
	height: 20px;
	height: 30px;
	width: 40px;
	float: left;
	cursor: pointer;
}
.unleash_play { //play button
	background: url(../img/play.png) no-repeat;
	height: 20px;
	height: 30px;
	width: 40px;
	float: left;
	cursor: pointer;
}
.unleash_pause { //play button
	background: url(../img/pause.png) no-repeat;
	height: 30px;
	width: 40px;
	float: left;
	cursor: pointer;
}
.unleash_buttons { //All buttons container
   overflow: hidden;
   width: 120px;
   margin: 20px auto 0px auto;
}

Initializing Plugin

After importing jQuery and the plugins you need to put these lines:

<script type="text/javascript">
$(document).ready(function() {
     $("#outer").unleash();			
}); 
</script>

If you will have to call any public function, you have to use the following initialization:

<script type="text/javascript">
$(document).ready(function() {
     var unleash = $("#outer").unleash().data("plugin_unleash");	
     unleash.OpenSlide(2) //Call a function that opens slide 2		
}); 
</script>

If you want to change options (all options are illustrated in the next section):

<script type="text/javascript">
$(document).ready(function() {
      var unleash = $("#outer").unleash({
	  captionClassName: '.caption_1',
	  caption_animation: "pop-up",
	  pause_onmouseover: false
      }).data("plugin_unleash");			
}); 
</script>

Options List

This is a list of all available options and their functions:

Option	Type	Default	Function
slide_height	int	330	Your desired slide height (typically image height)
slide_width	int	700	The width that you want it to appear when slide is opened
max_width	int	1000	This can be considered as the total slider width given the above 2 values, it is essential for scaling the slider when screen width changes.
full_screen	boolean	false	For full screen slider given that the slider should be the only item in the <body>
rtl	boolean	false	Start sliding from right to left for certin languages.
Event	String	"click"	How the slide is opened? "click" or "hover"
duration	int	700	The duration that the slide takes to open and caption appears.
slide_duration	int	600	The duration the slide takes before the next one opens in slideshow mode.
initially_open_slide	int	0	Choose a slide to be opened when page loads. 0 for no slide.
collapse_on_mouseout	boolean	false	Do you want all slides to close when mouse is not on the slider
easing	Sring	"easeOutQuad"	Easing for slides. check gsgd for easing options
container_class	String	'.unleash_container'	The name of the container class explained above
captionTitleClassName	String	'.upper_text'	Only specify for caption_abimation ="double"
captionClassName	String	'.lower_text'	Caption class name
caption_animation	String	"double"	"pop-up" : the caption comes from below the slide. "opacity" : the caption appears in a fading style. "double" : two objects come in from above and below, you will need to specify 2 caption classes here.
double_dist	array	["28%", "28%", "28%", "28%", "28%", "28%"]	Only for caption_animation: "double", it specifies the 2 captions top and bottom positions for each slide. The number of elements in the array should be equals to number of slides.
slideshow	boolean	true	Automatically change slides after specified time.
hide_controls	boolean	false	Hides the control buttons and make them only appear when mouse is over the slide.
pause_onmouseover	boolean	true	Pauses the slideshow when mouse is over the slider.
caption_animation_easing	String	"easeInOutBack"	Easing for captions, check gsgd for types.

Change Defauld Options

Put desired option in initialization as follows:

<script type="text/javascript">
$(document).ready(function() {
      var unleash = $("#outer").unleash({
	  captionClassName: '.caption_1',
	  caption_animation: "pop-up",
	  pause_onmouseover: false
      }).data("plugin_unleash");			
}); 
</script>

Methods List

Methods are called as follows:

Method	Function
construct()	Constructs the slider at the begining and it's called when window is resized to readjust dimensions.
OpenSlide(slide)	Opens a certain slide.
AnimateCaption(slide)	Opens the caption of a certain slide.
CloseAll()	Closes all opened slides.
CurrentSlide()	returns currently opened slide.
NumberOfSlides()	returns number of slides.
next()	returns next slide's number.
prev()	returns previous slide's number
goToNext()	Opens next slide.
goToPrev()	Opens previous slide.
play(delay)	Plays the slider starting from the current slide with a certain delay.
pause()	Pauses the slider.
stopSlideshow()	Stops the slider.

Use Methods

Put desired option in initialization as follows:

<script type="text/javascript">
$(document).ready(function() {
     var unleash = $("#outer").unleash().data("plugin_unleash");	
     unleash.OpenSlide(2) //Call a function that opens slide 2		
});

Documentation

Getting Started