Advanced Slider Documentation

Thank you for purchasing Advanced Slider. If you have any questions that are beyond the scope of this documentation, please feel free to email at contact@bqworks.com or via my user page contact form here.

All the scripts that you will ever need are in the 'source files' folder. There are a few mandatory files while the rest are optional and need to be included in your page only if you use certain features. You are provided with both minified and developer files, which contain the uncompressed and commented source code. In the _dev folder you can also find the PSD files for the skins.

Let's try to create a new slider. As it is a good practice to keep your files organized, I'm going to create separate directories for the JavaScript and CSS files: 'js' and 'css'.

1. Copy required files

Copy the JavaScript and CSS files

JavaScript files

Next I will copy the files that I need from the 'source files' folder into these 2 directories. For now, I'm only going to use the mandatory files, so from 'source files/js' I will copy the jQuery library (jquery-1.7.2.min.js), the Advanced Slider script (jquery.advancedSlider.min.js) and the Excanvas script (excanvas.compiled.js), which is mandatory for older versions of IE (IE8 and lower).

CSS files

From 'source files/css/base' I will copy 'advanced-slider-base.css', which is the skeleton for the skin CSS files, and the 'images' folder which contains some common image assets. I also need to copy one of the skin folders, which can be found in 'source files/css/slider-skins'. I will copy the 'pixel' folder.

2. Include files in the page

After copying all the necessary files, I need to include them in the header of the HTML page.

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Page Title</title>

    <link rel="stylesheet" type="text/css" href="css/advanced-slider-base.css" />
    <link rel="stylesheet" type="text/css" href="css/pixel/pixel.css" />
		
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.advancedSlider.min.js"></script>
    <!--[if IE]><script type="text/javascript" src="js/excanvas.compiled.js"></script><![endif]-->
</head>
<body>

</body>
</html>

3. Create HTML markup

Although you can use XML instead of HTML markup to specify the content, in this introductory example I will use some basic HTML. Later, I will show you how to use XML as well.

The HTML markup needs to be specified inside the <body> tag.

As you can see in the code on the right, you need to create a main DIV container to which you assign the "advanced-slider" class. It's also recommended to assign a unique ID, which you can use to reference the slider in the CSS or JavaScript code. Inside the main container you need to create an unordered list (ul element) and assign it the "slides" class. Each "li" element represents a slide and you need to assign the "slide" class to each. Then, inside the "li" element you can add elements for the slide. In this example I'm only adding a main image and a thumbnail but, as you will see later, slides can contain more complex content. It's optional to specify a main slide image or a thumbnail image. However, if you do, the "image" and "thumbnail" classes are mandatory.

<body>

    <div class="advanced-slider" id="my-slider">
        <ul class="slides">
            <li class="slide">
                <img class="image" src="../images/slides/image1.jpg" alt=""/>
                <img class="thumbnail" src="../images/thumbnails/image1.jpg" alt=""/>
            </li>
		
            <li class="slide">
                <img class="image" src="../images/slides/image2.jpg" alt=""/>
                <img class="thumbnail" src="../images/thumbnails/image2.jpg" alt=""/>
            </li>
		
            <li class="slide">
                <img class="image" src="../images/slides/image3.jpg" alt=""/>
                <img class="thumbnail" src="../images/thumbnails/image3.jpg" alt=""/>
            </li>
		
            <li class="slide">
                <img class="image" src="../images/slides/image4.jpg" alt=""/>
                <img class="thumbnail" src="../images/thumbnails/image4.jpg" alt=""/>
            </li>
		
            <li class="slide">
                <img class="image" src="../images/slides/image5.jpg" alt=""/>
                <img class="thumbnail" src="../images/thumbnails/image5.jpg" alt=""/>
            </li>
        </ul>
    </div>
	
</body>

4. Instantiate the slider

The last step is to instantiate the slider. In this example I won't pass any property to the slider, which means that the default values will be used. This code needs to be added after including the necessary files for the slider.

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('#my-slider').advancedSlider();
    });
</script>

These are all the required steps for creating a basic slider. In the following chapters you will learn how to create more advanced sliders.

5. Updating guide

If you're updating from a pre-V3 version, please note that in V3 there were introduced some modification to the name of some JavaScript properties and CSS selectors. These changes are meant to improve the slider's semantics but if you think it's too much work to make the necessary edits, keep in mind that it's not necessary to update. However, if you do update and make the necessary edits, it will be worth it in the long run.

One of the most important changes is the role of the 'width' and 'height' properties. These properties no longer refer to the width and height of the slide image but rather to the width and height of the whole slider, which includes controls, shadow, thumbnail scroller, etc. This modification was introduces in order to allow the slider to be responsive. When you want to determine the required width and height that you need to set the slider to, in order to have a certain width and height for the slides, you can use the slider's getSize() method. This mehod will return both the width/height of the slider and the width/height of the slide. Having this information you will know by how much to increase/decrease the width/height of the slider so that the width/height of the slide is set to a certain value.

1. JavaScrip Modifications

The following properties were removed: skipBroken and slidesPreloaded.

The following properties had their name or role changed:

visibleThumbnails -> maximumVisibleThumbnails
slideStartRatio and sliceStartPosition -> sliceStartRatio and sliceStartPosition
effectType accepts the following values: fade, slide, swipe, slice and none, and a new property was introduced for the slice effects: sliceEffectType
the "horizontalAlternativ", "verticalAlternativ" values of the sliceStartPosition property were changed to "horizontalAlternate" and "verticalAlternate"
thumbnailsType -> thumbnailType
the "navigation" value of the thumnbailsType property was changed to "scroller"
navigationArrows -> slideArrows
fadeNavigationArrows -> slideArrowsToggle
navigationArrowsShowDuration -> slideArrowsShowDuration
navigationArrowsHideDuration -> slideArrowsHideDuration
navigationButtons -> slideButtons
navigationButtonsNumbers -> slideButtonsNumber
fadeNavigationSlideButtons -> slideButtonsToggle
navigationButtonsShowDuration -> slideButtonsShowDuration
navigationButtonsHideDuration -> slideButtonsHideDuration
navigationButtonsCenter -> slideButtonsCenter
navigationButtonsContainerCenter -> slideButtonsContainerCenter
thumbnailNavigationShowDuration -> thumbnailScrollerShowDuration
thumbnailNavigationHideDuration -> thumbnailScrollerHideDuration
thumbnailNavigationCenter -> thumbnailScrollerCenter
fadeThumbnailNavigation -> thumbnailScrollerToggle
fadeCaption -> captionToggle
fadeSlideshowControls -> slideshowControlsToggle
fadeTimer -> timerToggle
fadeThumbnailCaption -> thumbnailCaptionToggle
fadeThumbnailButtons -> thumbnailButtonsToggle
fadeThumbnailArrows -> thumbnailArrowsToggle
fadeThumbnailScrollbar -> thumbnailScrollbarToggle

2. CSS Modifications

The following CSS selector were changed:

.curved-square .navigation-arrows -> .curved-square .slide-arrows
.curved-square .caption .background -> .curved-square .caption-container .background
.curved-square .caption .content -> .curved-square .caption-container .caption
.curved-square .navigation-buttons -> .curved-square .slide-buttons
.curved-square .navigation-buttons .buttons -> .curved-square .slide-buttons .buttons-inner
.curved-square .navigation-buttons .buttons .thumbnail -> .curved-square .slide-buttons .buttons-inner .thumbnail-wrapper
.curved-square .navigation-thumbnails -> .curved-square .thumbnail-scroller
.curved-square .navigation-thumbnails .thumbnail -> .curved-square .thumbnail-scroller .thumbnail-wrapper

This chapter will show you how to write the HTML markup for the slider when you want to use certain features supported by Advanced Slider. You will see how to add lightboxes, lazy loaded slide images, html content and more.

1. Captions and tooltips

Slide captions

It's very simple to add captions to the slides. All you have to do is create a DIV with the 'caption' class and add the text inside this DIV. The slider will automatically create a transparent background, with the opacity and color you set, for that captions. Later you will learn how to customize the caption's position, size, color and transparency but, for now, we will only take a look at the required HTML markup.

<div class="advanced-slider" id="my-slider">
    <ul class="slides">
        <li class="slide">
            <img class="image" src="../images/slides/image1.jpg" alt=""/>
            <img class="thumbnail" src="../images/thumbnails/image1.jpg" alt=""/>
            <div class="caption">Simple caption for the first slide.</div>
        </li>
		
        <li class="slide">
            <img class="image" src="../images/slides/image2.jpg" alt=""/>
            <img class="thumbnail" src="../images/thumbnails/image2.jpg" alt=""/>
            <div class="caption">Some text for the second slide.</div>
        </li>
		
        <li class="slide">
            <img class="image" src="../images/slides/image3.jpg" alt=""/>
            <img class="thumbnail" src="../images/thumbnails/image3.jpg" alt=""/>
            <div class="caption">Yet another captions.</div>
        </li>
    </ul>
</div>

Thumbnail captions and tooltips

You can specify captions for the thumbnails by inserting some text in the thumbnail's ALT attribute and you can specify tooltips by using the thumbnail's TITLE attribute. Please see the code example on the right. In order to enable the tooltip you will also need to set the slider's 'thumbnailTooltip' property to true.

<div class="advanced-slider" id="my-slider">
    <ul class="slides">
        <li class="slide">
            <img class="image" src="../images/slides/image1.jpg" alt=""/>
            <img class="thumbnail" src="../images/thumbnails/image1.jpg" alt="Slide 1" title="some tooltip content"/>
            <div class="caption">Simple caption for the first slide.</div>
        </li>
		
        <li class="slide">
            <img class="image" src="../images/slides/image2.jpg" alt=""/>
            <img class="thumbnail" src="../images/thumbnails/image2.jpg" alt="Slide 2" title="some tooltip content"/>
            <div class="caption">Some text for the second slide.</div>
        </li>
		
        <li class="slide">
            <img class="image" src="../images/slides/image3.jpg" alt=""/>
            <img class="thumbnail" src="../images/thumbnails/image3.jpg" alt="Slide 3" title="some tooltip content"/>
            <div class="caption">Yet another captions.</div>
        </li>
    </ul>
</div>

2. Lazy loaded images

When you insert images in the page using the </img> tag, all the images will load when the page loads. Sometimes you want an image to load only when you navigate to the slide that contains it. This will speed up the initial load of the page, and it's especially useful if you have a slider that contains many images. In order to achieve this functionality for the slider, you will have to specify the image using a data attribute instead of using the </img> tag. The data attribute is "data-image" and must be added to the </li> tag, as you can see in the example on the right.

<div class="advanced-slider" id="my-slider">
    <ul class="slides">
        <li class="slide" data-image="../images/slides/image1.jpg">
            <img class="thumbnail" src="../images/thumbnails/image1.jpg"/>
            <div class="caption">Simple caption for the first slide.</div>
        </li>
		
        <li class="slide" data-image="../images/slides/image2.jpg">
            <img class="thumbnail" src="../images/thumbnails/image2.jpg"/>
            <div class="caption">Some text for the second slide.</div>
        </li>
		
        <li class="slide" data-image="../images/slides/image3.jpg">
            <img class="thumbnail" src="../images/thumbnails/image3.jpg"/>
            <div class="caption">Yet another captions.</div>
        </li>
    </ul>
</div>

3. Links and Lightboxes

You can add links and lightboxes for the main slide image but also for the thumbnail images. When you click a thumbnail image that has a link or a lightbox specified for it, the default action of navigating to the corresponding slide will not occur, but instead the link or lightbox will be opened.

Links

In order to add a link to an image all you have to do is wrap the image within the anchor tag. Please see the code example on the right. The first slide has a link for the slide image and the second slide has a link for the thumbnail image.

<div class="advanced-slider" id="my-slider">
    <ul class="slides">
        <li class="slide">
            <a href="http://yahoo.com">
                <img class="image" src="../images/slides/image1.jpg" alt=""/>
            </a>
            <img class="thumbnail" src="../images/thumbnails/image1.jpg" alt=""/>
            <div class="caption">Simple caption for the first slide.</div>
        </li>
		
        <li class="slide">
            <img class="image" src="../images/slides/image2.jpg" alt=""/>
            <a href="http://yahoo.com">
                <img class="thumbnail" src="../images/thumbnails/image2.jpg" alt=""/>
            </a>
            <div class="caption">Some text for the second slide.</div>
        </li>
    </ul>
</div>

Basic lightboxes

If you worked with lightbox scripts before, you already know how to use them in the slider: you create an anchor tag that wraps the image and then you identify that link as a lightbox by adding a 'rel' attribute for it and giving that attribute a certain value. For Advanced Slider, you will need to use a predefined value: 'slider-lightbox'.

Please note that in order to enable the built-in lightbox you will need to set the slider's 'lightbox' property to true. In the list of available JavaScript properties you will find several more properties that allow you to control how the lightbox will work.

In the code example I specified a slide image lightbox for the first and third slides and a thumbnail image lightbox for the second and fourth slide. The slide lightboxes will create a lightbox gallery by having an extra identifier inside the 'rel' attribute. The thumbnail lightboxes don't have the extra identifier so each lightbox will be separate but it's possible to have them as a gallery as well.

Please notice that for each image that has a lightbox I specified some text in the ALT attribute, which will be used as the lightbox title, and for the anchor element I added a TITLE attribute, which will be used as lightbox description.

<div class="advanced-slider" id="my-slider">
    <ul class="slides">
        <li class="slide">
            <a rel="slider-lightbox[g]" href="../images/slides/image1.jpg" title="Some lightbox description">
                <img class="image" src="../images/slides/image1.jpg" alt="Slide 1 title"/>
            </a>
            <img class="thumbnail" src="../images/thumbnails/image1.jpg" alt=""/>
        </li>
		
        <li class="slide">
            <img class="image" src="../images/slides/image2.jpg" alt=""/>
            <a rel="slider-lightbox" href="../images/slides/image2.jpg" title="Some lightbox description">
                <img class="thumbnail" src="../images/thumbnails/image2.jpg" alt="Thumbnail 2 title"/>
            </a>
            <div class="caption">Some text for the second slide.</div>
        </li>
		
        <li class="slide">
            <a rel="slider-lightbox[g]" href="../images/slides/image3.jpg" title="Some lightbox description">
                <img class="image" src="../images/slides/image3.jpg" alt="Slide 3 title"/>
            </a>
            <img class="thumbnail" src="../images/thumbnails/image3.jpg" alt=""/>
            <div class="caption">Caption for the third slide.</div>
        </li>
		
        <li class="slide">
            <img class="image" src="../images/slides/image4.jpg" alt=""/>
            <a rel="slider-lightbox" href="../images/slides/image4.jpg" title="Some lightbox description">
                <img class="thumbnail" src="../images/thumbnails/image4.jpg" alt="Thumbnail 4 title"/>
            </a>
            <div class="caption">Yet another caption text.</div>
        </li>
    </ul>
</div>

Video and other content in the lightbox

In the first lightbox example you saw how to open images inside the lightbox. However, it's also possible to open YouTube and Vimeo videos, web pages, or inline HTML content.

When you open a Vimeo or YouTube video all you have to do is specify the URL of the youtube/vimeo page, and if you want to set a certain size for the video you can do this by passing a width and a height to the URL of the video. The code example has a youtube video for the first slide and a vimeo video for the second slide.

When you open a web page you need to pass 'iframe=true' to the URL of the page and you can also pass a width and a height. For loading inline HTML content all you have to do is specify the ID attribute of the content in the HREF attribute of the anchor tag. In the example, the third slide has a lightbox that will open a web page and the fourth slide has a lightbox that will open inline HTML content.

<body>

    <div class="advanced-slider" id="my-slider">
        <ul class="slides">
            <li class="slide">
                <a rel="slider-lightbox[]" href="http://www.youtube.com/watch?v=JVuUwvUUPro?width=700&height=400" title="Nuit Blanche explores a fleeting moment between two strangers.">
                    <img class="image" src="../images/slides/image1.jpg" alt="Nuit Blanche - Arev Manoukian"/>
                </a>
                <img class="thumbnail" src="../images/thumbnails/image1.jpg" alt=""/>
            </li>
		
            <li class="slide">
                <a rel="slider-lightbox[]" href="http://vimeo.com/10829255?width=700&height=400" title="New York invasion by 8-bits creatures ! PIXELS is Patrick Jean' latest short film, shot on location in New York.">
                    <img class="image" src="../images/slides/image2.jpg" alt="PIXELS"/>
                </a>
                <img class="thumbnail" src="../images/thumbnails/image2.jpg" alt=""/>
            </li>
		
            <li class="slide">
                <a rel="slider-lightbox[]" href="http://yahoo.com?iframe=true&width=700&height=400" title="Some description of this page">
                    <img class="image" src="../images/slides/image3.jpg" alt="Yahoo"/>
                </a>
                <img class="thumbnail" src="../images/thumbnails/image3.jpg" alt=""/>
            </li>
		
            <li class="slide">
                <a rel="slider-lightbox[]" href="#my-content" title="Some description of this content">    
                    <img class="image" src="../images/slides/image4.jpg" alt="Inline HTML"/>
                </a>	
                <img class="thumbnail" src="../images/thumbnails/image4.jpg" alt=""/>
            </li>
        </ul>
    </div>
	
    <div id="my-content">
        <p class="title">Some Title</p>
        <p class="description">Description: Some description of this content.</p>
    </div>
	
</body>

Integration with lazy loaded images

As you saw in the previous example, the link or lightbox must be wrapped aroung the <img> tag. However, when you use lazy loading you don't have to specify an <img> tag and use the "data-image" attribute instead. So, the solution for having both links/lightboxes and lazy loaded images for the same slide is to use a mockup image as a replacement for the main image and wrap the link/lightbox around that mockup image, while the actual image will be specified using the "data-image" attribute. For the mockup image it's recommended to use an image that's very small in size, something like a one pixel image.

<div class="advanced-slider" id="my-slider">
    <ul class="slides">
        <li class="slide" data-image="../images/slides/image1.jpg">
            <a rel="slider-lightbox[]" href="http://www.youtube.com/watch?v=JVuUwvUUPro">
                <img class="image" src="mockup.jpg" alt="Nuit Blanche - Arev Manoukian"/>
            </a>
            <img class="thumbnail" src="../images/thumbnails/image1.jpg" alt=""/>
        </li>
		
        <li class="slide" data-image="../images/slides/image2.jpg">
            <a rel="slider-lightbox[]" href="http://vimeo.com/10829255">
                <img class="image" src="mockup.jpg" alt="PIXELS"/>
            </a>
            <img class="thumbnail" src="../images/thumbnails/image2.jpg" alt=""/>
        </li>
    </ul>
</div>

4. Inline HTML content

One of the strong features of this slider is the possibility to add HTML content inside the slides. In this section you will learn how to add simple HTML content as well as more complex content such as videos.

Simple HTML content

In order to add HTML content to a slide all you have to do is create an additional DIV, give it the "html" class and insert all the content inside that div. Any HTML element is allowed.

In the example on the right, the first and third slides contain HTML content. The first slide contains 4 image boxes and a box of text. As you can see, there are some CSS classes assigned to the HTML elements, which are used to customize the position and look of the elements. It's recommended to insert the custom CSS code in a separate CSS file. The third slide also contains inline HTML content but it also contains a main slide image.

<div class="advanced-slider" id="my-slider">
    <ul class="slides">
        <li class="slide">
            <div class="html">
                <div class="images-box">
                    <img src="../presentation-assets/images/other/image7.jpg" alt=""/>
                    <img src="../presentation-assets/images/other/image8.jpg" alt=""/>
                    <img src="../presentation-assets/images/other/image9.jpg" alt=""/>
                    <img src="../presentation-assets/images/other/image10.jpg" alt=""/>
                </div>
					
                <div class="content-box">
                    <p class="title">Inline HTML content</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    <a class="button" href="#">Read More</a>
                </div>
            </div>
        </li>
			
        <li class="slide">
            <img class="image" src="../presentation-assets/images/slides/image1.jpg" alt=""/>
        </li>
			
        <li class="slide">
            <img class="image" src="../presentation-assets/images/slides/image2.jpg" alt=""/>
            <div class="html">
                <div class="content-box">
                    <p class="title">Inline HTML content</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    <a class="button" href="#">Read More</a>
                </div>
            </div>
        </li>
    </ul>
</div>

Video content

Not only you can insert videos inside the slides but Advanced Slider has built-in support for automatic handling of those videos. For example, the slider will pause or stop a video when you navigate away from the slide, or it will pause or stop the automatic slideshow when a video starts playing. Without this automatic handling you would have to manually pause/stop the video or pause/stop the slideshow, which isn't very convenient.

The slider has built-in support for YouTube videos, Vimeo videos, simple HTML5 videos, and HTML5 videos enhanced with VideoJS. VideoJS is a 3rd party library that will enhance the look of the HTML5 video and will provide a Flash fallback for browsers that don't support the HTML5 video element, like IE8 and below.

In the example code on the right you can see how to insert each type of videos. Please note that in order to have the the videos automatically handled you also need to load some additional JavaScript files in the page. In the examples provided you will see the required files and in a later chapter you will also see a description of all files provided with the plugin and when you need to use each of them.

Heads Up! The Vimeo and YouTube APIs will work only after you move the page on a local or online server.

YouTube videos

First, you need to get the embed code from the YouTube page. The code will be an iframe, to which you will need to add the "video" class. Also, to the URL or the video you will need to append the following parameters: "enablejsapi=1" and "wmode=transparent". The first parameter is necessary in order to enable the automatic handling and the second parameter is necessary if the video loads in the flash player.

<li class="slide">
  <div class="html">
    <iframe class="video" src="http://www.youtube.com/embed/msIjWthwWwI?rel=0&enablejsapi=1&wmode=transparent" width="580" height="380" frameborder="0"></iframe>
  </div>
</li>

Vimeo videos

For Vimeo videos you need to get the embed code from Vimeo and add the "video" class to the iframe, just like with YouTube videos. Then, append "api=1" to the URL of the video.

<li class="slide">
  <div class="html">
    <iframe class="video" src="http://player.vimeo.com/video/3116167?api=1" width="580" height="380" frameborder="0"></iframe>
  </div>
</li>

HTML5 videos

When you insert simple HTML5 videos, you just need to add the "video" class to the <video> tag.

<li class="slide">
  <div class="html">
    <video class="video" controls preload="none" width="580" height="380"
           poster="http://bqworks.com/products/assets/videos/bbb/bbb-poster.jpg">
      <source src="http://bqworks.com/products/assets/videos/bbb/bbb-trailer.mp4" type="video/mp4"/>
      <source src="http://bqworks.com/products/assets/videos/bbb/bbb-trailer.ogg" type="video/ogg"/>
    </video>
  </div>
</li>

VideoJS videos

Loading VideoJS enhanced HTML5 videos is similar to loading simple HTML5 videos but in addition to adding the "video" class you need to add some VideoJS specific classes. Also, you will need to give the video a unique ID and add the "data-video" attribute.

<li class="slide">
  <div class="html">
    <video id="video-1" class="video video-js vjs-default-skin" controls="controls" preload="none" width="580" height="380"
           poster="http://bqworks.com/products/assets/videos/sintel/sintel-poster.jpg" data-video="{}">
      <source src="http://bqworks.com/products/assets/videos/sintel/sintel-trailer.mp4" type="video/mp4"/>
      <source src="http://bqworks.com/products/assets/videos/sintel/sintel-trailer.ogv" type="video/ogg"/>
    </video>
  </div>
</li>

Using XML instead of HTML markup is very easy and recommended for users who don't have much experience with HTML. One disadvantage, though, is that XML is not as SEO-friendly as HTML but sometimes this is not a concern. In this chapter you will learn everything you need to know about creating an XML file for Advanced Slider and, as you will notice, the structure of the XML file will be very similar to the required HTML structure.

1. Basic XML example

The XML file must have a main <slider> node and for each slide you need to create a <slide> node. Then, inside the <slide> node you specify the images, captions and inline HTML content. In the right side you can see a simple example of the required XML structure.

<slider>
    <slide>
        <image>../presentation-assets/images/slides/image1.jpg</image>
        <thumbnail>../presentation-assets/images/thumbnails/image1.jpg</thumbnail>
    </slide>
	
    <slide>
        <image>../presentation-assets/images/slides/image2.jpg</image>
        <thumbnail>../presentation-assets/images/thumbnails/image2.jpg</thumbnail>
    </slide>
	
    <slide>
        <image>../presentation-assets/images/slides/image3.jpg</image>
        <thumbnail>../presentation-assets/images/thumbnails/image3.jpg</thumbnail>
    </slide>
</slider>

2. Advanced XML use

Just like with HTML markup, you can use XML to add links, both to the slide and thumbnail, captions, lightboxes and inline HTML content.

Captions

To add a caption for the main slide you need to create a <caption> node, and to create a caption for the thumbnail you need to add the "alt" attribute to the <thumbnail> node. You can also add a a tooltip to the thumbnail by using the "title" attribute. As you can see in the code example on the right, the format is similar to the HTML markup.

Links and lightboxes

Adding links and lightboxes is different from doing the same in HTML, but it's still very easy. Instead of wrapping the image tag/node inside an anchor you will need to create a <link> node for the main slide link, and a <thumbnailLink> node for the thumbnail. The URL of the link will need to be added inside this node. If you want to transform a link to a lightbox you will need to add some extra attributes to the link node:

type="slider-lightbox" for indicating that the link is a lightbox
group="some_group" to create a lightbox gallery
title attribute for specifying the description of the lightbox

In order to specify a title for the lightbox you will need to add the "alt" attribute to the <image> and/or <thumbnail> node.

The example on the right has simple links for the first two slides and lightbox links for the third and fourth slides.

Lazy loaded images

When you want an image to be lazy loaded you will need to add the "data-image" attribute to the <slide> node instead of adding the path inside the node. In the code example on the right, the fifth and sixth slides contain lazy loaded images.

Inline HTML content

The same rules for working with inline HTML content apply when you work with XML. If you skipped the "Using HTML" chapter, please take a look at the sections that show hot to use inline HTML content and how to have the videos automatically handled.

You will need to use the <html> node to insert the inline HTML and, also, you will need to add the content inside a CDATA tag. Please see the last two slides in the code example.

<slider>
    <!-- Slides with images, captions, links and lightboxes-->
	
    <slide>
        <image>../presentation-assets/images/slides/image1.jpg</image>
        <link>http://yahoo.com</link>
        <thumbnail alt="Slide 1" title="tooltip content">../path/to/image1.jpg</thumbnail>
        <caption>Caption for the first slide.</caption>
    </slide>
	
    <slide>
        <image>../presentation-assets/images/slides/image2.jpg</image>
        <thumbnail alt="Slide 2" title="tooltip content">../path/to/image2.jpg</thumbnail>
        <thumbnailLink>http://yahoo.com</thumbnailLink>
        <caption>Some caption for the second slide.</caption>
    </slide>
	
    <slide>
        <image>../presentation-assets/images/slides/image3.jpg< alt="Slide 3"/image>
        <link type="slider-lightbox" group="slides" title="some description">../path/to/image.jpg</link>
        <thumbnail alt="Slide 3" title="tooltip content">../path/to/image3.jpg</thumbnail>
        <caption>Yet another caption.</caption>
    </slide>
	
    <slide>
        <image>../presentation-assets/images/slides/image4.jpg< alt="Slide 4"/image>
        <thumbnail alt="Slide 4" title="tooltip content">../path/to/image4.jpg</thumbnail>
        <thumbnailLink type="slider-lightbox" group="thumbs" title="some description">../path/to/image.jpg</thumbnailLink>
    </slide>
	
    <!-- Slides with lazy loaded images-->
	
    <slide data-image="../presentation-assets/images/slides/image5.jpg">
        <thumbnail>../presentation-assets/images/thumbnails/image5.jpg</thumbnail>
    </slide>
	
    <slide data-image="../presentation-assets/images/slides/image6.jpg">
        <thumbnail>../presentation-assets/images/thumbnails/image6.jpg</thumbnail>
    </slide>
	
    <!-- Slides with inline HTML content-->
	
    <slide>
        <html>
            <![CDATA[
                <div class="images-box">
                    <img src="../presentation-assets/images/other/image7.jpg" alt=""/>
                    <img src="../presentation-assets/images/other/image8.jpg" alt=""/>
                    <img src="../presentation-assets/images/other/image9.jpg" alt=""/>
                    <img src="../presentation-assets/images/other/image10.jpg" alt=""/>
                </div>
					
                <div class="content-box">
                    <p class="title">Inline HTML content</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    <a class="button" href="#">Read More</a>
                </div>
            ]]>
        </html>
    </slide>

    <slide>
        <html>
            <![CDATA[
                <video id="video-1" class="video video-js vjs-default-skin" controls="controls" preload="none" width="580" height="380" poster="../videos/sintel/sintel-poster.jpg" data-video="{}">
                    <source src="../videos/sintel/sintel-trailer.mp4" type="video/mp4"/>
                    <source src="../videos/sintel/sintel-trailer.ogv" type="video/ogg"/>
                </video>
            ]]>
        </html>
    </slide>
	
    <slide>
        <html>
            <![CDATA[
                <iframe class="video" src="http://www.youtube.com/embed/msIjWthwWwI?rel=0&enablejsapi=1&wmode=transparent" width="580" height="380" frameborder="0"></iframe>
            ]]>
        </html>
    </slide>

</slider>

1. Properties

Advanced Slider has over 150 properties that can can be used to customize the look and feel of the slider. These properties need to be set when the plugin is instantiated, as can see in the example on the right.

<script type="text/javascript">
    $(document).ready(function(){
        $('#my-slider').advancedSlider({width:'100%', height:400, effectType:'swipe', timerAnimation:false});
    });         
</script>

Below is a list of all the available properties, their default value and description.

Property Name	Default value	Description
General
xmlSource	null	The path to the XML source file
skin	'pixel'	Sets the main skin of the slider
width	500	The width of the slider. Can be set in percentages if the '%' symbol is used or in pixels if only a number is used.
height	300	The height of the slider. Can be set in percentages if the '%' symbol is used or in pixels if only a number is used.
scaleType	'outsideFit'	Indicates the scale type of the slide images. Available values are: 'insideFit', 'outsideFit', 'proportionalFit', 'exactFit' and 'noScale'.
alignType	'leftTop'	Indicates the alignment of the image if its size is higher than the specified width or height. Available values are: 'leftTop', 'leftCenter', 'leftBottom', 'centerTop', 'centerCenter', 'centerBottom', 'rightTop', 'rightCenter', 'rightBottom'
allowScaleUp	false	Allows the image to scale up to a size larger than the original size.
preloadNearbyImages	false	Indicates whether the images located nearby the currently opened image will be preloaded. This will happen only if the nearby images are set to lazy load.
slideStart	0	The index of the first displayed slide.
shuffle	false	Randomizes the slides.
shadow	true	Indicates whether the shadow will be displayed under the slide.
Slideshow
slideshow	true	Sets the slider to the auto slideshow mode.
slideshowLoop	true	Indicates whether the slider will loop continuously through the slides or only one time.
slideshowDelay	5000	The delay, in milliseconds, between transitions.
slideshowDirection	'next'	Sets the slider to navigate to the next slide or to the previous slide. Available values are 'next' and 'previous'.
slideshowControls	false	Displays the play/pause button for the slideshow.
slideshowControlsToggle	true	Indicates whether the slideshow button will fade in/out on mouse hover.
slideshowControlsShowDuration	500	Sets the duration, in milliseconds, of the slideshow's controls show animation.
slideshowControlsHideDuration	500	Sets the duration, in milliseconds, of the slideshow's controls hide animation.
pauseSlideshowOnHover	false	Indicates whether the slideshow will be paused when the mouse is over the slide.
Timer Animation
timerAnimation	true	Indicates whether the timer animation will be displayed. For this to be displayed the 'slideshow' property also has to be set to 'true'.
timerAnimationControls	true	Indicates whether the play and pause button will be displayed inside the timer animation.
timerToggle	false	Indicates whether the timer will be hidden and only shown on mouse hover.
timerFadeDuration	500	The duration for the timer to fade in/out.
timerRadius	18	The radius of the timer circle.
timerStrokeColor1	'#000000'	The color of the underlying circle.
timerStrokeColor2	'#FFFFFF'	The color of the animated circle.
timerStrokeOpacity1	0.5	The alpha of the underlying circle.
timerStrokeOpacity2	0.7	The alpha of the animated circle.
timerStrokeWidth1	8	The width of the underlying circle's stroke.
timerStrokeWidth2	4	The width of the animated circle's stroke.
Lightbox
lightbox	false	Indicates whether the lightbox will be enabled.
lightboxTheme	'pp_default'	The theme of the lightbox. Available values are: 'pp_default', 'light_rounded', 'dark_rounded', 'light_square', 'dark_square' and 'facebook'.
lightboxOpacity	0.8	The opacity of the lightbox's overlay.
lightboxIcon	true	Indicate whether an overlay icon will appear when a slide or thumbnail has a lightbox attached to it.
lightboxIconToggle	false	Indicates whether the lightbox icon will fade in/out on hover.
lightboxIconFadeDuration	500	Sets the duration for the fade in/out animation of the lightbox icon.
thumbnailLightboxIcon	true	Indicates whether a lightbox icon will be displayed on the thumbnail when the corresponding slide has a lightbox attached to it. Not to be confused with the possibility of having the icon displayed when a lightbox is attached to the thumbnail itself. For this, only the 'lightboxIcon' property option needs to be enabled.
thumbnailLightboxIconToggle	true	Indicates whether the thumbnail lightbox icon will fade in/out on hover. This option is used only when the lightbox icon is enabled for the thumbnails that correspond to slides that have a lightbox attached to them.
Transition Effects
effectType	'random'	The type of the transition effect. Available values are: 'fade', 'slide', 'swipe', 'slice' and 'random'.
sliceEffectType	'random'	Sets the effect type for the "slice" transition. Available values are: 'fade', 'scale', 'width', 'height' and 'random'.
initialEffect	true	Indicates whether the initial slide will have a transition effect. If set to false, the first slide will initially appear instantly.
htmlDuringTransition	true	Indicates whether specified HTML content will be displayed while the transition is in progress. A transition which displayes HTML will be slower.
'Slide' transition effect
slideDirection	'autoHorizontal'	Sets the direction of the slides. Available values are: autoHorizontal, autoVertical, rightToLeft, leftToRight, topToBottom and bottomToTop.
slideLoop	false	Indicates whether the slides will run in a loop when the 'autoHorizontal' or 'autoVertical' directions are used.
slideDuration	700	Sets the duration of the transition.
slideEasing	'easeInOutExpo'	Sets the easing of the transition effect. Available values are: 'swing', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce'.
'Swipe' transition effect
swipeTouchDrag	true	Indicates whether the swipe effect will work for touch gestures.
swipeMouseDrag	true	Indicates whether the swipe effect will work when the mouse is used.
swipeOrientation	'horizontal'	Sets the orientation of the slides and the direction for which the swipe gestures will work. Available values are 'horizontal' and 'vertical'.
swipeThreshold	50	Sets the minimum amount that the slides need to be dragged in order to navigate to the new slide.
swipeDuration	700	Sets the duration of the swipe transition.
swipeBackDuration	300	Sets the duration of slide's movement when the drag amount is below the threshold.
swipeSlideDistance	10	Sets the distance between slides.
swipeGrabCursor	true	Enables the grabbing cursor for the Swipe effect.
swipeEasing	'swing'	Sets the easing of the transition. Available values are: 'swing', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce'.
'Fade' transition effect
fadeInDuration	500	Sets the duration of 'in' transition.
fadeInEasing	'swing'	Sets the easing type of 'in' transition. Available values are: 'swing', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce'.
fadeOutDuration	500	Sets the duration of 'out' transition.
fadeOutEasing	'swing'	Sets the easing type of 'out' transition. Available values are: 'swing', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce'.
'Slice' transition effect
fadePreviousSlide	false	Indicates whether the previous slide will fade out during transition.
fadePreviousSlideDuration	300	Sets the duration of the fade out animation of the previous slide.
horizontalSlices	5	The number of horizontal slices.
verticalSlices	3	The number of vertical slices.
slicePattern	'random'	The order in which the slices will be animated. Available values are: 'randomPattern', 'topToBottom', 'bottomToTop', 'leftToRight', 'rightToLeft', 'topLeftToBottomRight', 'topRightToBottomLeft', 'bottomLeftToTopRight', 'bottomRightToTopLeft', 'horizontalMarginToCenter', 'horizontalCenterToMargin', 'marginToCenter', 'verticalCenterToMargin', 'skipOneTopToBottom', 'skipOneBottomToTop', 'skipOneLeftToRight', 'skipOneRightToLeft', 'skipOneHorizontal', 'skipOneVertical', 'spiralMarginToCenterCW', 'spiralMarginToCenterCCW', 'spiralCenterToMarginCW', 'spiralCenterToMarginCCW' and 'random'
sliceDelay	50	The delay between each slice animation.
sliceEasing	'swing'	Sets the easing of each slice animation. Available values are: 'swing', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce'.
sliceDuration	1000	The duration for each slice animation.
slicePoint	'centerCenter'	Determines the starting point for the slice animation when the 'scale', 'width' or 'height' effects are used. Available values are: 'leftTop', 'leftCenter', 'leftBottom', 'centerTop', 'centerCenter', 'centerBottom', 'rightTop', 'rightCenter', 'rightBottom' and 'random'.
slideStartPosition	'left'	The starting position of the slice animation when the "slide" effect is used. Available values are: 'left', 'right', 'top', 'bottom', 'leftTop', 'rightTop', 'leftBottom', 'rightBottom', 'horizontalAlternate', 'verticalAlternate' and 'random'.
slideStartRatio	1	Sets the actual distance between the starting and ending point for the 'slide' animation. The actual distance will be determined by multiplying the slice's width/height to the 'slideStartRatio' property.
sliceFade	true	Will set the opacity of the slices to 0 and fade them in during the animation.
slideMask	false	Indicates whether or not the slide will have overflow hidden during the transition.
Slide navigation controls
slideArrows	true	Displays the right and left arrows.
slideArrowsToggle	true	If set to true, the arrow buttons will fade in on mouse over and fade out on mouse out. If set to false, the buttons will be visible all the time.
slideArrowsShowDuration	500	Sets the duration for the show animation of the main navigation arrows.
slideArrowsHideDuration	500	Sets the duration for the hide animation of the main navigation arrows.
slideButtons	true	Displays the navigation buttons.
slideButtonsNumber	false	Indicates whether numbers will be displayed inside the navigation buttons/bullets.
slideButtonsToggle	false	Indicates whether the navigation buttons will fade in/out on hover.
slideButtonsShowDuration	500	Sets the duration for the show animation of the main navigation buttons/bullets.
slideButtonsHideDuration	500	Sets the duration for the show animation of the main navigation buttons.
slideButtonsCenter	true	Will center the navigation buttons within the container horizontally.
slideButtonsContainerCenter	true	Will center the container of the navigation buttons horizontally.
keyboardNavigation	false	Indicates whether keyboard navigation will be enabled. This options allows navigation through the slides by using the left and right arrow keyboard keys. Also if you have a link attached to a slide, it' possible to open that link by pressing the 'Enter' key.
keyboardNavigationOnFocusOnly	false	Indicates whether keyboard navigation will be enabled only when the slider has focus.
Thumbnails
thumbnailType	'tooltip'	Indicates the way in which the thumbnails will be displayed. Avaialble values are: 'tooltip', 'scroller', 'tooltipAndScroller' and 'none'. If 'tooltip' is used the thumbnails will slide in on top of the slide buttons when you roll over them. If 'scroller' is used the thumbnails will appear inside the thumbnail scroller. If 'none' is used the thumbnails will not be displayed.
thumbnailWidth	80	Sets the width of the thumbnail.
thumbnailHeight	50	Sets the height of the thumbnail.
Tooltip Thumbnails
thumbnailSlideAmount	10	Sets the sliding amount of the thumbnail, when thumbnailsType is set to 'tooltip'.
thumbnailSlideDuration	300	Sets the sliding duration of the thumbnail, when thumbnailsType is set to 'tooltip'.
thumbnailSlideEasing	'swing'	Sets the sliding duration of the thumbnail, when thumbnailsType is set to 'tooltip'.
Thumbnails Scroller
thumbnailScrollerToggle	false	Indicates whether the navigation thumbnails will fade in/out on hover.
thumbnailScrollerHideDuration	500	Sets the duration for the fade out animation of the thumbnail scroller.
thumbnailScrollerShowDuration	500	Sets the duration for the fade in animation of the thumbnail scroller.
thumbnailSync	true	Indicates whether the thumbnail page will always be synchronized with the current slide.
thumbnailScrollerResponsive	false	Indicates whether the thumbnail scroller will be responsive as well if the slider's size is set in percentages.
maximumVisibleThumbnails	5	Sets the maximum number of thumbnails per page.
minimumVisibleThumbnails	1	Sets the minimum number of thumbnails per page. This property is useful in a responsive layout.
thumbnailLayers	1	Indicates the number of layers that will be used. Layers can represent either rows, when the thumbnail orientation is set to 'horizontal', or columns, when the thumbnail orientation is set to 'vertical'. In order to use the maximum amount of layers allowed, set this option to -1.
thumbnailOrientation	'horizontal'	Indicates whether the thumbnails will be arranged horizontally or vertically. Possible values are 'horizontal' and 'vertical'
thumbnailScrollerCenter	true	Indicates whether the navigation thumbnails will be centered relativelly to the slide.
thumbnailScrollDuration	1000	Sets the duration of the scrolling animation when the thumbnail arrows or thumbnail buttons are used for scrolling.
thumbnailScrollEasing	'swing'	Sets the easing of the scrolling animation when the thumbnail arrows or thumbnail buttons are used for scrolling. Possible values are 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce'.
thumbnailScrollbar	false	Indicates whether the navigation thumbnails will have a scrollbar.
thumbnailButtons	false	Indicates whether the navigation thumbnails will have buttons (bullets) for navigating through thumbnail pages.
thumbnailArrows	true	undicates whether the navigation thumbnails will have arrows for navigating through thumbnail pages.
thumbnailButtonsToggle	false	Indicates whether the thumbnail buttons will fade in/out on hover.
thumbnailArrowsToggle	false	Indicates whether the thumbnail arrows will fade in/out on hover.
thumbnailScrollbarToggle	false	Indicates whether the thumbnail scrollbar will fade in/out on hover.
scrollbarSkin	'scrollbar-1'	Sets the skin of the scrollbar.
scrollbarArrowScrollAmount	100	Sets the amount, in pixels, by which the thumbnails will be scrolled when one of the scrollbar's arrows is clicked.
thumbnailArrowsHideDuration	500	Indicates the duration for the fade out animation of the thumbnail arrows.
thumbnailArrowsShowDuration	500	Indicates the duration for the fade in animation of the thumbnail arrows.
thumbnailButtonsHideDuration	500	Indicates the duration for the fade out animation of the thumbnail buttons.
thumbnailButtonsShowDuration	500	Indicates the duration for the fade in animation of the thumbnail buttons.
thumbnailScrollbarHideDuration	500	Indicates the duration for the fade out animation of the thumbnail scrollbar.
thumbnailScrollbarShowDuration	500	Indicates the duration for the fade in animation of the thumbnail scrollbar.
thumbnailScrollbarEase	10	Indicates the easing amount for the scrollbar scrolling.
thumbnailMouseScroll	false	Indicates whether the thumbnails can be scrolled by moving the mouse over them.
thumbnailMouseScrollEase	90	Sets the ease of the mouse scrolling when the mouse leaves the thumbnails area.
thumbnailMouseScrollSpeed	10	Sets the speed of the thumbnail mouse scrolling.
thumbnailMouseWheel	false	Indicates whether the thumbnails can be scrolled using the mouse wheel.
thumbnailMouseWheelSpeed	20	Sets the speed of the thumbnail mouse wheel scrolling.
thumbnailMouseWheelReverse	false	Indicates whether the thumbnails will be scrolled in the opposite direction when mouse wheel scrolling is used.
thumbnailTooltip	false	Indicates whether the tooltip will be displayed for those thumbnails for which the tooltip content was specified.
tooltipShowDuration	300	Sets the duration of the tooltip's fade in animation.
tooltipHideDuration	300	Sets the duration of the tooltip's fade out animation.
Thumbnail Caption
thumbnailCaptionPosition	'bottom'	Sets the position of the caption inside the thumbnail. Can be set to 'top' or 'bottom'.
thumbnailCaptionTogle	true	Indicates whether the thumbnail caption will be hidden/shown on hover.
thumbnailCaptionEffect	'slide'	Sets the animation effect type for the captions. Possible values are 'slide' and 'fade'.
thumbnailCaptionShowDuration	500	Sets the duration of the fade/slide in animation of the caption.
thumbnailCaptionHideDuration	500	Sets the duration of the fade/slide out animation of the caption
thumbnailCaptionEasing	'swing'	Sets the easing of the caption's animation. Possible values are 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce'
Caption
captionToggle	false	Indicates whether the slide caption will be hidden/shown on hover.
captionPosition	'bottom'	Sets the caption's position. Available values are: 'top', 'bottom', 'left', 'right' and 'custom'.
captionBackgroundColor	'#000000'	Sets the caption's background color
captionBackgroundOpacity	0.5	Sets the caption's background opacity
captionSize	70	Sets the width/height of the caption's background, unless the caption's position is 'custom'.
captionLeft	50	Sets the left position of the caption when captionPosition is 'custom'
captionTop	50	Sets the top position of the caption when captionPosition is 'custom'
captionWidth	300	Sets the width of the caption when captionPosition is 'custom'
captionHeight	100	Sets the height of the caption when captionPosition is 'custom'
captionShowEffect	'slide'	Sets the type of effect that will run when the caption appears. Available values are 'fade' and 'slide'
captionShowEffectDuration	500	Sets the duration, in milliseconds, of the show effect
captionShowEffectEasing	'swing'	Sets the easing of the show effect. Possible values are 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce'
captionShowSlideDirection	'auto'	Sets the direction in which the caption will slide when it appears. Possible values are 'topToBottom', 'bottomToTop', 'leftToRight', 'rightToLeft' and 'auto'. When 'auto' is used, the direction will depend on the captionPosition property. So, if captionPosition is 'top', the caption will slide from top to bottom, if captionPosition is 'left', the caption will slide from left to right and so on.
captionHideEffect	'fade'	Sets the type of effect that will run when the caption is removed. Available values are 'fade' and 'slide'
captionHideEffectDuration	300	Sets the duration, in milliseconds, of the hide effect
captionHideSlideDirection	'auto'	Similar to the 'captionShowSlideDirection' but applied when the caption is removed.
captionHideEffectEasing	'swing'	Sets the easing of the hide effect. Possible values are 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce'
Video
videoPlayAction	'stopSlideshow'	Sets the action that will be triggered when the video starts playing. Possible values are: stopSlideshow, pauseSlideshow and none.
videoPauseAction	'none'	Sets the action that will be triggered when the video is paused. Possible values are: startSlideshow, resumeSlideshow and none.
videoEndAction	'startSlideshow'	Sets the action that will be triggered when the video end. Possible values are: resetVideo, startSlideshow, resumeSlideshow, nextSlide and none.
leaveVideoAction	'pauseVideo'	Sets the action that will be triggered when the navigates away from the video. Possible values are: pauseVideo, stopVideo and pauseVideoAndBuffering.
reachVideoAction	'none'	Sets the action that will be triggered when the user reaches a slide that contains a video. Possible values are: startVideo and none
slideProperties	null	An object that allows to define a set of settings for each particular slide

When you set any of the above properties they will apply globally, for all the slides, but you can override some of these global settings by setting specific values for each slide. This can be done for both HTML sliders and XML-driven sliders. The following properties can be set for individual slides: alignType, effectType, sliceEffectType, sliceDelay, sliceDuration, sliceEasing, horizontalSlices, verticalSlices', slicePattern, slicePoint, sliceStartPosition, sliceStartRatio, sliceFade, captionSize, captionPosition, captionShowEffectDuration, captionShowEffectEasing, captionHideEffectDuration', 'captionHideEffectEasing, captionShowEffect, captionHideEffect, captionLeft, captionTop, captionWidth, captionHeight, captionShowSlideDirection, captionHideSlideDirection, captionBackgroundColor, captionBackgroundOpacity, slideshowDelay, slideMask, slideDirection, slideDuration, slideEasing, slideLoop, fadeInDuration, fadeOutDuration, fadeInEasing, fadeOutEasing','fadePreviousSlide, fadePreviousSlideDuration, thumbnailType, captionDelay, htmlDuringTransition.

The above properties will be passed to the "slideProperties" object. For example if you want to edit the 1st and 4th slide, you will do as you see in the code example on the right. You can see that first you indicate the index of the slide (note that enumeration starts from 0) and then to this index you pass an object that contains the settings.

<script type="text/javascript">
    $('#my-slider').advancedSlider({
        width:750, 
        height:345, 
        pauseSlideshowOnHover:true, 
        slideProperties:{
            0:{effectType:'slice', horizontalSlices:'6', verticalSlices:'3'},
            3:{effectType:'fade', captionPosition:'top', captionSize:'40'}
    }});
</script>

For XML-driven sliders, you also have the option to specify the settings using attributes for each <slide> tag, as you can see in the example.

<slider>	
    <slide effectType="slice" sliceEffectType="scale" horizontalSlices="6" verticalSlices="3">
        <image>../presentation-assets/images/slides/image1.jpg</image>
        <link>http://yahoo.com</link>
        <thumbnail alt="Slide 1" title="tooltip content">../path/to/image1.jpg</thumbnail>
        <caption>Caption for the first slide.</caption>
    </slide>
	
    <slide effectType="fade" captionPosition="bottom" captionSize="35">
        <image>../presentation-assets/images/slides/image2.jpg</image>
        <thumbnail alt="Slide 2" title="tooltip content">../path/to/image2.jpg</thumbnail>
        <thumbnailLink>http://yahoo.com</thumbnailLink>
        <caption>Some caption for the second slide.</caption>
    </slide>
</slider>

2. Public Methods

The public methods will allow you to manipulate the slider using external controls. This is a very useful capability if you want to integrate the slider with other applications.

Method Name	Description
nextSlide()	Opens the next slide.
previousSlide()	Opens the previous slide.
gotoSlide(index)	Opens the slide at the specified index.
startSlideshow()	Starts the slideshow mode.
stopSlideshow()	Stops the slideshow mode.
pauseSlideshow()	Pauses the slideshow.
resumeSlideshow()	Resumes the slideshow.
scrollToThumbnailPage()	Moves the thumbnail scroller to the specified page.
scrollToNextThumbnailPage()	Moves the thumbnail scroller to the next page.
scrollToPreviousThumbnailPage()	Moves the thumbnail scroller to the previous page.
startThumbnailMouseScroll()	Starts the mouse scrolling functionality.
stopThumbnailMouseScroll()	Stops the mouse scrolling functionality.
startThumbnailMouseWheel()	Starts the mouse wheel functionality.
stopThumbnailMouseWheel()	Stops the mouse wheel functionality.
doSliderLayout()	Forces the slider to re-position all elements. The position of the elements depends on the specified width, height, scaleType and alignType.
getSlideshowState()	Gets the current slideshow state. Returns 'playing', 'paused' or 'stopped'.
getCurrentIndex()	Gets the index of the current slide.
getSlideAt(index)	Gets all the data of the slide at the specified index. Returns an object that contains all the data specified for that slide.
getTriggerType()	Returns a string that indicates what triggered the slider to navigate to a different slide. Possible values are: 'none', 'previousButton', 'nextButton', 'button', 'slideshow' and 'thumbnail'.
isTransition()	Checks if the slider is in the transition phase. Returns true or false.
getTotalSlides()	Returns the total number of slides.
getSize()	Returns an object that contains the width and height of both the slider and the slide. The returned object has the following properties: sliderWidth, sliderHeight, slideWidth and slideHeight.
destroy()	Stops all running actions. It's reccomended to call this method before removing the slider from the DOM.

In the code example on the right you can see that we use 2 external buttons to navigate to the previous and to the next slide. As you can notice, first we need to assign the slider instance to a variable, in this example: 'slider', and then we use that variable to call the slider methods that we want.

<script type="text/javascript">

    var slider;
	
    jQuery(document).ready(function($) {
        slider = $('#my-slider').advancedSlider({width: '100%', 
                                                 height: 400, 
                                                 horizontalSlices: 8, 
                                                 verticalSlices: 4,
                                                 thumbnailsType: 'scroller', 
                                                 visibleThumbnails: 4
                                                });
    });
	
	
    function previous() {
        slider.previousSlide();
    }	
	
    function next() {
        slider.nextSlide();
    }
	
</script>

</head>

<body>
    <input type="button" value="Previous Slide" onclick="previous();"/>
    <input type="button" value="Next Slide" onclick="next();"/>
</body>

3. Callbacks

The callbacks, or events, are useful for detecting when certain actions take place. For example we can detect when a transition is complete or when a slide was clicked. Below is a list of all the available callbacks.

Callback Name	Description
transitionStart	Triggered when a transition starts.
transitionComplete	Triggered when a transition is complete.
slideRequest	Triggered when a slide is requested/called.
slideClick	Triggered when a slide is clicked.
slideMouseOver	Triggered when the mouse is rolled over a slide.
slideMouseOut	Triggered when the mouse is rolled out of a slide.
thumbnailClick	Triggered when a thumbnail is clicked.
thumbnailMouseOver	Triggered when the mouse is rolled over a thumbnail.
thumbnailMouseOut	Triggered when the mouse is rolled out of a thumbnail.
xmlLoaded	Triggered when the XML file is completely loaded.
doSliderLayout	Triggered when the layout is modified.

Most of these callback functions will return an object that contain certain information. The slide related callbacks, for example, will contain information about the slide that triggered the event. The information contained is the index of the slide(0, 2, 5 etc.), the type of event(slideClick, transitionComplete etc.) and a 'data' object that contains all the slide's information that was specified for that slide.

The code example on the right shows you how to detect when a transition is over and when the slider's layout is changed. You can use the first callback to identify which slide is currently visible and you can also get certain data about that slide. The second callback is useful if you want to keep track of the slider's size.

<script type="text/javascript">                
    jQuery(document).ready(function($) {
        var slider = $('#my-slider').advancedSlider({width: 840, 
                                                     height: 400,
                                                     transitionComplete: onTransitionComplete,
                                                     doSliderLayout: onSliderLayout});
    });
                
    function onTransitionComplete(obj) {
        console.log('You are viewing slide ' + obj.index);
        console.log(obj.type, obj.data);
    }
	
    function onSliderLayout() {
        console.log(slider.getSize());
    }
</script>

1. Introduction

The slider offers you several main skins to chose from and also a few skins just for the scrollbar. When you want to apply one of these skins, you first need to include the CSS file in the header and then use the 'skin' or 'scrollbarSkin' properties to specify the skin that was included in the header. Let's say you want to include the minimal-small skin for the slider and the 'scrollbar-3-light' skin for the scrollbar. For this, you need to include the minimal-small.css and scrollbar-3-light.css files in the header. Also, don't forget about the advanced-slider-base.css file.

If you open the minimall-small.css or the scrollbar-3-light.css files you will see some information about the skin.

The 'Class' information gives you the value that you will need to specify for the 'skin' property.

The CSS files are commented and the selectors are also suggestive so it should be pretty easy to customize the skin. Also you are being provided with the layered PSD (or PNG in some cases) files, so that you're able to modify the size and color of the graphic elements. These files are in 'source files/_dev/css'.

Including the CSS files in the page

<link rel="stylesheet" type="text/css" href="css/advanced-slider-base.css" />
<link rel="stylesheet" type="text/css" href="css/minimal-small/minimal-small.css" />
<link rel="stylesheet" type="text/css" href="css/scrollbar-3-light/scrollbar-3-light.css" />

Slider skin example

/*
    Skin Name: Minimal Small
    Class: minimal-small
    Description: Minimal Small skin for Advanced Slider jQuery plugin
    Author: David
*/


/* MAIN SLIDE */

.minimal-small .slide-wrapper
{
    background-color:#000;
    border:8px solid #000;
    -moz-box-shadow: 0px 0px 10px #000;
    -webkit-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

Scrollbar skin example

/*
    Skin Name: Scrollbar 3 Light
    Class: scrollbar-3-light
    Description: Scrollbar 3 Light skin for Advanced Slider jQuery plugin
    Author: David
*/


/* HORIZONTAL SCROLLBAR */

/* MAIN CONTAINER */

.scrollbar-3-light.horizontal
{
    position:absolute;
    width:340px;
    height:21px;
}

Specifying the skins to the slider

$('#my-slider').advancedSlider({width:750, 
                                height:345, 
                                skin:'minimal-small', 
                                scrollbarSkin:'scrollbar-3-light', 
                                thumbnailsType:'navigation', 
                                thumbnailScrollbar:true
                                });

2. Creating custom skins

Some of the visual aspects of the slider can be customized only by editing the slider's CSS. However, if you need to do CSS edits, it's recommended to create your own custom skin instead of modifying one of the default skins. You can duplicate one of the existing skins and then add your edits to the custom skin.

Let's try to create a custom skin, by copying the 'pixel' skin and modifying a few elements. The new skin will be called 'my-custom-skin'. I'm going to start by creating a copy of the 'pixel' directory and name the directory: 'my-custom-skin'. Inside the 'my-custom-skin' folder change the name of the CSS file to 'my-custom-skin.css' and then open the file. What we'll first need to change inside the my-custom-skin.css file is the header information and the selectors.

As you can see in the example on the right, in the skin's header I changed the 'Skin Name' to 'My Custom Skin' and the 'Class' to 'my-custom-skin'. I also change the selector from '.pixel' to '.my-custom-skin'. The selector needs to match the value of the 'Class'. At this point, the two skins will apply the same styling, so let's start making some modifications. For example let's change the border color to red and the background color to black.

After adding the new skin, you can include it in the page and then set the 'skin' property to name of the new skin, 'my-custom-skin'.

/*
    Skin Name: My Custom Skin
    Class: my-custom-skin
    Description: Custom skin for Advanced Slider jQuery plugin
    Author: David
*/


/* MAIN SLIDE */

.my-custom-skin .slide-wrapper
{
    background-color: #000;
    border: 8px solid #FFF;
    -moz-box-shadow: 0px 0px 10px #000;
    -webkit-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

<link rel="stylesheet" type="text/css" href="css/advanced-slider-base.css" />
<link rel="stylesheet" type="text/css" href="css/my-custom-skin/my-custom-skin.css" />

$('#my-slider').advancedSlider({width:750, 
                                height:345, 
                                skin:'my-custom-skin'
                                });

This chapter will cover several topics like how to have the videos automatically handled or how to setup the responsive feature properly, and more in the future.

1. Automatic video handling

This topic was covered in the 'Using HTML -> Inline HTML content' chapter, so in case you missed it please go here.

2. Responsive slider

In order to make a slider responsive, you will need to set its 'width' and 'height' properties to percentage values, for example '100%'. When you set the width and height to '100%', it will make the slider adjust to fill its container entirely. Please note that sometimes the container has a height of 0px so when you set the slider to be a certain percentage from 0px, the height will become 0px. So, in order to properly create a responsive slider, there are several solutions:

1. Set the 'scaleType' option to 'proportionalFit'.

2. You can also set a minimum and/or maximum size for the slider using custom CSS code:

#my-slider {
    max-width: 500px;
    max-height: 500px;
    min-height: 100px;
    min-width: 100px;
}

3. If you want the height of the images to be automatically set based on the width, you can also add some custom JavaScript code. The JavaScript code that you need to add is this:

jQuery(document).ready(function($){                                
    // set the initial height of the slider to 50% from the width
    $('#my-slider').css('height', $('#my-slider').width() * 0.50);
    $('#my-slider').advancedSlider().doSliderLayout();

    // as the window resizes, maintain the slider's height at 50% from the width
    $(window).resize(function() {
        $('#my-slider').css('height', $('#my-slider').width() * 0.50);
    });                     
});

The above code will maintain the height of the slider at 50% from the width.

3. CSS3 transitions

The slider gives you the possibility to use CSS3 transitions by simply loading the jquery.transition.min.js file in the page. Please note that this feature requires a recent version of the jQuery library, preferably jQuery 1.7+. If you enable the feature but use an older jQuery version, the transition effects will not work.

If something doesn't work as expected, the first thing you need is a little patience :) and the assurance that you have my free assistance for resolving the problem. Please see if the indications below help, and if they don't please kindly email me and I'll gladly help you.

1. The slider breaks when the 'slide' effect is used

The default easing type for the 'slide' effect is 'easeInOutExpo'. This is a custom easing type so in order for it to work, the jQuery Easings library needs to be loaded in the page, as you can see in the 'minimal' or 'basic' examples.

2. The slider loads but doesn't respond to input

It can happen when you're loading an older jQuery library in the page and use CSS3 transitions at the same time. In order for the CSS3 transitions to work, you need a recent release of the jQuery library, preferably version 1.7+. If you can't use a newer jQuery library, you will need to disable the CSS3 Transitions. This option can be found inside the Transition Effects sidebar panel.

3. The self-hosted, HTML5 videos don't play

It can happen if the server is not configured to deliver the types of videos you're trying to play. In order to make this possible, open the .htaccess file from your site's root folder, or create it if it doesn't exist, and add the following lines:

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/webm .webm
AddType audio/webm .weba
AddType video/mp4 .mp4
AddType video/x-m4v .m4v

If the videos still don't play, it could happen because the server is set to not read the .htaccess file. In this case, you might need to contact the hosting provider and ask them to add the above mime types for you.

1. JavaScript files

All the JavaScript files can be found in the 'source files/js' folder. The uncompressed version of these files can be found in '_dev/js'

File Name	Description
`jquery-1.7.2.min.js`	The jQuery library contains the base code for most of the following files. It's not necessary to use this exact code; you can use your own jQuery library version and you can load it from a CDN. However, it's important to include the jQuery library before all the other scripts.
`jquery.advancedSlider.min.js`	Contains the main code of the slider and must be included in all pages where you use the slider.
`excanvas.compiled.js`	This file is necessary for IE8 and lower versions of IE. Because these browsers don't support the HTML5 canvas element, this script is used to emulate a canvas. If you don't include this script, the timer animation will not work in IE8 and lower.
`jquery.transition.min.js`	This script will enable hardware accelerated CSS3 transitions, which will make the slider's transition effects run smoother. The performance increase is more visible on mobile devices. While this library is not mandatory, it's recommended to include it in the page. Also, please note that it requires a recent version of the jQuery library.
`jquery.touchSwipe.min.js`	If you want to use the 'swipe' effect you need to include this script. It will enable touch gestures on touch devices.
`jquery.videoController.min.js`	This script is necessary if you load YouTube, Vimeo or HTML5 videos inside the slides. It will enable the automatic handling of the videos.
`video.min.js`	Only necessary when you want to use VideoJS for your HTML5 videos. VideoJS is a 3rd party library that will enhance the look of the HTML5 video and will provide a Flash fallback for browsers that don't support the HTML5 video element, like IE8 and below.
`froogaloop.min.js`	This script is necessary if you load Vimeo videos.
`jquery.easing.1.3.min.js`	Load this script only if you want to use a custom easing type for the animations. This script is also necessary if you use the 'slide' effect because the default easing type for 'slide' effect is provided by this script.
`jquery.mousewheel.min.js`	Include this if you want to use the mouse wheel feature for the thumbnail scroller.
`jquery.prettyPhoto.custom.min.js`	This file is necessary if you want to use the lightbox feature.

2. CSS files and folders

The CSS files are categorized in folders and can be found in 'source files/css'. The layered PSD/PNG files used for the skins can be found in '_dev/css'

Folder	Description
`base`	Contains the CSS skeleton of the slider, advanced-slider-base.css, and a folder of image assets.
`slider-skins`	Contains the slider skins. Some of the skins are available in multiple color variations.
`scrollbar-skins`	Contains the scrollbar skins.
`lightbox`	Contains the CSS and image assets for the lightbox.
`video-js`	Contains the CSS and image assets for the VideoJS player.

jQuery — jQuery library
Excanvas — HTML5 canvas emulation
Easings — easing equations for jQuery
TouchSwipe — touch swipe plugin for jQuery
CSS3 Transitions — overrides the jQuery animate method to use CSS3 transitions
PrettyPhoto — jQuery lightbox
MouseWheel — jQuery mouse wheel plugin.
Froogaloop — script for controlling the Vimeo player
VideoJS — HTML5 video enhancer with Flash fallback

Once again, thank you so much for purchasing this product!

Advanced Slider

Introduction Getting started with Advanced Slider