Unleash 3

Including Files

First of all, you need to import at the head of your html document (i.e between <head> <head/>) the jQuery version, modernizr for old browsers fallback, the styles files and the unleash 3 plugin file as follows:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js></script>
<script src="js/custom.modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/unleash.3.css" />
<script src="js/jquery.unleash.3.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. The next div is the slider div itself wich will be used to initiate the slider, you can give it any class, however, you should put the class 'unleash_slider' anyways. Finaly, the 'unleash_slide' 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 class="any_other_class unleash_slider"> <!-- slider -->
    
        <div class="unleash_slide"> <!-- slide -->
        <img src="img/img_1.jpg" /> <!-- slide image -->
            <div class="unleash_caption"> <!-- caption -->
            </div> <!-- end caption -->
        </div> <!-- end slide -->
        
        <div class="unleash_slide"> <!-- slide -->
        <img src="img/img_1.jpg" /> <!-- slide image -->
            <div class="unleash_caption"> <!-- caption -->
            </div> <!-- end caption -->
        </div> <!-- end slide -->
                        .
                        .
                        .
                        .
        
    </div> <!-- end slider -->
</div> <!-- end container -->

Content and Captions

For Captions, you simply put your caption HTML between the 'unleash_caption' class:

<div class="unleash_slide"> <!-- slide -->
      <img src="img/img_1.jpg" /> <!-- slide image -->
      <div class="unleash_caption"> <!-- caption -->
      </div> <!-- end caption -->
</div> <!-- end slide -->

If you want to animate your caption, you simply add these data-* atrributes for entrance and exit of the caption, you can choose any animations from animate.css library

<div class="unleash_slide"> <!-- slide -->
      <img src="img/img_1.jpg" /> <!-- slide image -->
      <div class="unleash_caption" data-entrance="bounceInLeft" data-exit="bounceOut"> <!-- caption -->
      </div> <!-- end caption -->
</div> <!-- end slide -->

For Animated Content, you put your content between the 'unleash_content' class with special data-* attribues for position, animation, etc... for each child in the class, for example we want to add an image in the content:

<div class="unleash_slide"> <!-- slide -->
      <img src="img/img_1.jpg" /> <!-- slide image -->
      <div class="unleash_content"> <!-- Content -->
      <img data-entrance="slideInLeft" data-exit="slideOutRight" data-dur="1000" data-delay="0" data-pos='["","","20","20"]' data-width="17" data-z="2" src="img/ipad.png" />
      </div> <!-- end content -->
</div> <!-- end slide -->

Lets break that down a bit, so here is a list of all attributes you can use and their meaning:

data-entrance: The entrance animation, choose from animate.css library.
data-exit: The exit animation, choose from animate.css library.
data-dur: The duration of the animation in ms.
data-delay: The delay time of the animation in ms (useful if you want one by one animations).
data-pos: The position of the element ["top","right","bottom","left"] in percentage.
data-width: The width of the element in percentage.
data-z: The z-index of the element, that is useful when you have multiple layers on top of each other, the higher the z-index the higher the layer position.

Initializing Plugin

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

<script type="text/javascript">
$(document).ready(function() {
     $(".slider_class_or_id").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 = $(".slider_class_or_id").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 = $(".slider_class_or_id").unleash({
	 slide_width: "75%",
         duration: 700,
         slide_duration: 6000,
         slideshow: true,
      }).data("plugin_unleash");			
}); 
</script>

Options List

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

Option	Type	Default	Function
slide_width	string	"70%"	The amount of space the slide will occupy when it is opened compared to the total width.
duration	int	700	The duration that the slide takes to open. (ms)
slide_duration	int	6000	The duration that the slide keeps opened when slideshow i activated. (ms) ie. 6000 = 6 seconds.
initially_open_slide	int	0	Opens a certain slide when the page loads, 0 for no slide.
pause_onmouseover	boolean	true	Pause the slider when mouse is over the slides.
hide_controls	boolean	false	Hides the play, next and previous buttons.
slideshow	boolean	true	Activates the slideshow mode.
open_event	string	"click"	How the slides open, "drag" or "click" or "mouseover".
collapse_on_mouseout	boolean	false	Close all slides when the mouse is not on the slider.

Change Defauld Options

Put desired option in initialization as follows:

<script type="text/javascript">
$(document).ready(function() {
      var unleash = $(".slider_class_or_id").unleash({
         slide_width: "75%",
         duration: 700,
         slide_duration: 6000,
         slideshow: true,
      }).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.
OpenCaption(slide)	Opens the caption of a certain slide.
OpenContent(slide)	Opens the content 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()	Plays the slider starting from the current slide.
pause()	Pauses the slider.
stopSlideshow()	Stops the slider when it is playing.

Use Methods

Put desired option in initialization as follows:

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

Callbacks List

Here's a table for all callbacks:

Method	Function
onSlideOpen	Runs when the slide finishes transitioning.
onEventStart	When a slide is clicked or hovered.
onDragStart	When a slide is clicked and dragging starts.
onDragMove	When a slide is clicked and being moved.
onDragEnd	When mouse is released and dragging ends.
onNext	When next button is clicked.
onPrev	When previous button is clicked.

Using Callbacks

Put desired callback in initialization as follows:

<script type="text/javascript">
$(document).ready(function() {
     var slider = $('.slider').unleash({
         slide_width: "75%",
         onSlideOpen : function() { Alert('opened'); }
         }); 
</script>

Examples

Getting Started