One of the best jQuery sliders available on the market at the moment.
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'.
Copy the JavaScript and CSS 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).
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.
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>
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>
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.
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.
The following properties were removed: skipBroken and slidesPreloaded.
The following properties had their name or role changed:
The following CSS selector were changed:
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.
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>
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>
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>
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.
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>
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>
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>
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>
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.
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>
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.
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>
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>
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>
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.
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>
Just like with HTML markup, you can use XML to add links, both to the slide and thumbnail, captions, lightboxes and inline HTML content.
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.
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:
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.
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.
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>
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>
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>
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>
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'.
<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" />
/* 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; }
/* 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; }
$('#my-slider').advancedSlider({width:750, height:345, skin:'minimal-small', scrollbarSkin:'scrollbar-3-light', thumbnailsType:'navigation', thumbnailScrollbar:true });
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.
This topic was covered in the 'Using HTML -> Inline HTML content' chapter, so in case you missed it please go here.
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.
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.
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.
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.
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.
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. |
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. |
Once again, thank you so much for purchasing this product!