“Ultimate Smart Slider” Documentation by “David Blanco” v1.0

“Ultimate Smart Slider”

Created: April/2/2013
By: David Blanco

Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

  1. Files
  2. HTML Structure
  3. Modify the default options
  4. The Classic Way (just HTML)
  5. Multiple sliders in one page
  6. Some handy options

A) Files - top

These are the folders inside your new plugin:

In the documentation folder there is this documentation that you are reading.
In the example folder there is a Sample Page of the slider using Twitter Bootstrap just like the demo in codecanyon.
In the plugin folder there is a Page with the slider only with the things you need to have the slider working.

Inside the plugin folder you can find this files

In the css folder there is only one CSS file that you need for the slider with all the style and some effects.
In the images folder there are all the images of the slider that the plugin reads automatically.
In the img folder there are some images that are used for some icons.
The index.php file there is a working example of the slider only.
In the js there are 3 javascript files needed for the slider.
The slider.php file there are the methods that create the auto slider.

B) HTML Structure - top

First you need to add the CSS file of the slider to your page like this:

Second you need to add the slider.php file to the page, so you can call the method to create the slider.

Now is time to add the javascript, but before you need to make sure that jQuery is in the page (make sure that the version of jQuery is above the 1.7.2).

And now you need to add the 3 javascript files.

Now where ever you want to put a slider you need to create it with a unique id (the first parameter) and specify the url of folder where the plugin will read the images automatically (the second parameter)

And finally you need to initialize the slider with the unique id you specify in the step before


Writing all the code together it will look like this:

C) Modify the default options - top

Now that you have create your HTML markup and initialize the slider you can modify the javascript default options by passing parameters to the autoSlider method like this:

These are all the options available:

And here is a description of each one: 

{
    theme               : 'default', //The theme of the slider (default, theme1, theme2, theme3)
    width               : '100%', //The width of the slider, if it set to 0 it will take the width of the largest image
    autoPlay            : true, //auto play the images of the slider when is loaded
    showTimer           : true, //show the timer line
    playInterval        : 4000, //Time between transitions when auto play is on
    playBtn             : true, //show play button
    loop                : true, //when play is on if is set to true start slideshow again when it finishes
    navArrows           : true, //show prev and next arrows
    navBar              : true, //show the navigation bar
    navBarNumeric       : false, //If the navigation bar will show the numbers of images
    autoHideNavArrows   : false, //if it set to true then show the prev and next arrow only when you do a mouseover
    autoHidePlayBtn     : true, //if it set to true then show the play button only when you do a mouseover
    autoHideNavBar      : false, //if it set to true then show the navigation bar only when you do a mouseover
    keyboardNav         : true, //navigation with arrows right and left of the keyboard
    transitionSpeed     : 700, //The speed between transitions 
    boxSpeed            : 450, //The animation speed of a single box (must be lower than transitionSpeed)
    captionSpeed        : 300, //The animation speed of the caption 
    captions            : true, //Show captions of the images that have text to show
    autoHideCaptions    : false, //if it set to true then show the captions only when you do a mouseover
    thumbnails          : true, //Show thumbnails when hovering nav
    thumbnailSize       : 20, //Thumbnail size (percentage of the original image)
    x                   : 8, //when using boxes the x axis
    y                   : 4, //when using boxes the y axis
    hideIconsInWidth    : 500, //Hide the icons(arrows, plat btn, navbar) when the width is 500px or less for responsive design
    hideTimerInWidth    : 500, //Hide the timer when the width is 500px or less for responsive design
    shadow              : true, //A CSS3 shadow of the slider
    beforeTransition    : function(){}, //execute a function before right before the transition begins
    afterTransition     : function(){}, //execute a function after the transition completes
    onSlideshowEnd      : function() {}, // Runs when the slideshow finishes ( "loop" must be set to false )
    onPlay              : function() {}, // Runs when somebody click the button play
    onPause             : function() {} // Runs when somebody click the button pause
}

Few more options...

Also at the top of the slider.php file you can modify a few more options

You specify the effects of the transitions you want for the images by passing an array containing all the names of the effects like in the images above, but also when you create multiple sliders in one page maybe you want to specify different effects for each slider, so you can pass an array with the effects for the images to the make_slider method like this:

And pass an array as another parameter for the caption effects like this:

These are all the effects available for the transitions of the images
  1. fade
  2. slide
  3. show
  4. fromTop
  5. fromBottom
  6. fromRight
  7. fromLeft
  8. fromTopRight
  9. fromBottomRight
  10. fromTopLeft
  11. fromBottomLeft
  12. openBookY
  13. openBookX
  14. zoomIn
  15. zoomOut
  16. boxes
  17. boxes-openBookY
  18. boxes-openBookX
  19. boxes-zoomIn
  20. boxes-zoomOut
  21. boxesOrder
  22. boxesOrder-openBookY
  23. boxesOrder-openBookX
  24. boxesOrder-zoomIn
  25. boxesOrder-zoomOut
  26. horizontalStripes
  27. horizontalStripes-openBookY
  28. horizontalStripes-openBookX
  29. horizontalStripes-zoomIn
  30. horizontalStripes-zoomOut
  31. verticalStripes
  32. verticalStripes-openBookY
  33. verticalStripes-openBookX
  34. verticalStripes-zoomIn
  35. verticalStripes-zoomOut
  36. boxesDiagonal
  37. boxesDiagonal-openBookY
  38. boxesDiagonal-openBookX
  39. boxesDiagonal-zoomIn
  40. boxesDiagonal-zoomOut
These are all the effects available for the captions of the images
  1. fade
  2. slide
  3. show
  4. fromTop
  5. fromBottom
  6. fromRight
  7. fromLeft
  8. openBookY
  9. openBookX
  10. zoomIn
  11. zoomOut

D) The Classic Way (just HTML) - top

If you don't want the automatic feature and want to use it as only and pure HTML, you will have to use this simple HTML markup for the slider, (and wont need the slider.php file)

E) Multiple sliders in one page - top

Is very simple to create multiple sliders in one page, you only need to call the method again and use a unique ID for each one, and then intialize them in javascript with its own unique ID like this:

F) Some handy options - top

If you have the option of captions set to true, and you don't want an image to show its caption then just add at the end of the image name this: --
For example like this:

Also the images are in alphabetical order, so if you want to edit the order just add a-, b-, etc... at beginning of the name of the images like this (If you set the captions to true, the a-,b-, etc... will not be showing in the caption):