JS Tutorial
- Overview
- Documents
Free
This jQuery plugin is open source, under the MIT license.
Feel free to contribute on the repository.
Controls
Control the slider by clicking or pressing your keyboard keys.
Caption
Specify a caption and a link for each image to show more informations.
Multiple
Create as many instances as you want on a same page.
Setup
At first, include jQuery, animate.css and the desoSlide files in your page.
<link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/jquery.desoslide.css"> <script src="js/jquery.js"></script> <script src="js/jquery.desoslide.min.js"></script>
Then, you need to create your thumbnails list with that markup. Don't forget to specify your images links and the alt attribute.
<ul id="my_thumbs">
<li>
<a href="assets/img/bird.jpg">
<img src="assets/img/bird_thumb.jpg" alt="Bird" data-desoslide-caption="A bird, click me to open http://chez-syl.fr/" data-desoslide-href="http://chez-syl.fr/">
</a>
</li>
<li>
<a href="assets/img/flower.jpg">
<img src="assets/img/flower_thumb.jpg" alt="Flower" data-desoslide-caption="A flower" data-desoslide-caption="A flower, click me to open README.md file" data-desoslide-href="README.md">
</a>
</li>
<li>
<a href="assets/img/butterfly.jpg">
<img src="assets/img/butterfly_thumb.jpg" alt="Butterfly" data-desoslide-caption="A butterfly" data-desoslide-caption="A butterfly, click me to open LICENSE.md file" data-desoslide-href="LICENSE.md">
</a>
</li>
<li>
<a href="assets/img/rose.jpg">
<img src="assets/img/rose_thumb.jpg" alt="Rose" data-desoslide-caption="A rose, you can't click me, got no link">
</a>
</li>
</ul>
Explanations:
- mandatory Specify your images links and the alt attribute
- optional The data-desoslide-caption attribute is used for the caption
- optional The data-desoslide-href attribute contains the link to the page that will be active on the main image
Configuration
Call the plugin "desoSlide" on your list of thumbnails by specifying the target where the main image will be generated:
$(function() {
$('#my_thumbs').desoSlide({
main: {
container: '#demo_main_image',
cssClass: 'img-responsive'
},
caption: true
});
});
Here, the main image will be generated inside #demo_main_image.
View the result on the demo page.
Controls
You can control the slider by clicking on the pictos. Previous, pause, play and next are supported. Also, you are able to use your keyboard keys to control it:
-
press left arrow to trigger previous
-
press right arrow to trigger next
-
press space to toggle play/pause
As this feature is binded on the document, if you have more than one slider on your page and you press a key, all sliders will be triggered. I recommend to you to enable the keys control on only one slider, by disabling the other ones with controls.keys: false.
Options
Find below all the available options.
| Options | Values | Default | Description |
|---|---|---|---|
| main.container | Your target container | false | Container for the main image. If you don't specify a valid selector, you'll receive an error. |
| main.cssClass | String | '' | Class(es) name(s) of your main image. |
| main.insertion | 'append' 'prepend' 'replace' | 'append' | How to create the main image, by prepending, appending or replace all the selector's content (overwriting). |
| auto.load | Boolean | true | All thumbnails links (full size images) are auto loaded in background (invisible). |
| auto.start | Boolean | false | Autostarting a diaporama. |
| first | Integer between 0 and the number of thumbnails (-1) | 0 | The index of the thumbnail that you want to display first. |
| interval | Integer, minimum 1500 | 3000 | Interval in milliseconds between each image. |
| effect | 'fade' 'sideFade' 'sideFadeBig' 'flip' 'light' 'roll' 'rotate' 'random' | 'fade' | Transition effect provided by animate.css. 'random' chose the effect for you. |
| overlay | 'always' 'hover' 'none' | 'always' | How to show overlay. |
| caption | Boolean | false | If true, be sure that you have specified the data-desoslide-caption attribute on thumbnails. |
| controls.enable | Boolean | true | Able to control by clicking (prev/pause/play/next). |
| controls.keys | Boolean | true | Able to control by pressing the keyboard keys (left/right/space). |
| events.thumbClick | function() | false | Callback when clicking on a thumbnail. |
| events.prev | function() | false | Callback when triggering prev. |
| events.pause | function() | false | Callback when triggering pause. |
| events.play | function() | false | Callback when triggering play. |
| events.next | function() | false | Callback when triggering next. |
| events.completed | function(result) | false | Get the slider result. The first argument outputs one of these values: "success", "error" or "warning". |
Return value
The returned value by the .desoSlide() call is the jQuery object to maintain the chainability.
If you want to know if the slider is well generated, use the events.completed function.
$('#demo_thumbs').desoSlide({
main: {
container: '#demo'
},
events: {
completed: function(result) {
switch(result) {
case 'success': // success handler
break;
case 'warning': // warning handler
break;
case 'error': // error handler
break;
}
}
}
});
