|
|
Slide Show Widget
Slide Shows are often part of modern UI. Various images can be shown randomly or in order. In Nedil Widget, we have different options for animations, arrows, play and pause options
Basic Usage
$.domLoaded(function() {
$.get("#prog").widget("slideshow", CONFIG_JSON );
}
HTML Template
<div id="slideshow">
<img src="image URL" title="Title text" >
<img src="image URL" title="Title text" >
</div>
Configuring Options
It contains array of JSON objects. The properties are mentioned below.
| Name | Type | Must/Optional | Description |
|---|
| pauseTime | Number | Optional | In Milliseconds. Timegap between each slide |
| animTime | Number | Optional | In Milliseconds. Animation time during slide changes |
| titlePos | String | Optional | Title positon. Allowed values "top" / "bottom". Default is "bottom" |
| autoPlay | Boolean | Optional | Plays the slides automatically if set true, default is true |
| arrow | Boolean | Optional | If set true, arrows to move the slides will be shown. Default is true |
| animType | String | Optional | Animation Types. There are several animation options during the slide movement. Default is "random".
| String | Description |
|---|
| "smoothLeft" | Smooth transition from left side |
| "smoothRight" | Smooth transition from right side |
| "smoothTop" | Smooth transition from top side |
| "smoothBottom" | Smooth transition from bottom side |
| "bounceLeft" | Bouncy transition from left side |
| "bounceRight" | Bouncy transition from right side |
| "bounceTop" | Bouncy transition from top side |
| "bounceBottom" | Bouncy transition from bottom side |
| "blur" | Blurs out the slide |
| "random" | Randomly chooses from the above list |
|
| dim | JSON | Optional | Sets dimension of the slideshow
| Name | Description |
|---|
| wid | Width of the slideshow |
| ht | Height of the slideshow |
|
| pos | JSON | Optional | Sets position of the slideshow
| Name | Description |
|---|
| x | Horizontal Position |
| y | Vertical Position |
|
Methods
| Name | Description |
|---|
| play() | Plays the slideshow |
| pause() | Pauses the slideshow |
Progress Bar Widget Examples
Example 1
JS
HTML
$.domLoaded(function() {
var te1, te2;
te1 = $.get("#slideshow").widget("slideshow", {
dim : { wid : 400, ht : 300},
pauseTime : 2000,
animTime : 1000,
titlePos : "top",
autoPlay : true,
arrow : true
});
te2 = $.get("#slideshowl").widget("slideshow", {
dim : { wid : 600, ht : 450},
pauseTime : 3000,
animTime : 1000,
titlePos : "bottom", //"bottom" - Default, top
arrow : true,
autoPlay : false,
animType : "bounceLeft"
});
$.get("#play").on("click", function() {
te2.play();
});
$.get("#pause").on("click", function() {
te2.pause();
});
});
<body>
<h4>SlideShow - Top title, Random Animation Types, Arrows, AutoPlay, Fast</h4>
<div id="slideshow">
<img src="../images/flower1.jpg" title="Lorem ipsum dolor sit amet, consectetur" >
<img src="../images/flower2.jpg" title="Adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam" >
<img src="../images/flower3.jpg" title="Quis nostrud exercitation ullamco laboris..." >
<img src="../images/flower4.jpg" title="Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident" >
</div>
<h4>SlideShow - Bottom title, bounceLeft Animation Type, Arrows, Slower, Play and Pause functions</h4>
<div id="slideshowl">
<img src="../images/flower1.jpg" title="Lorem ipsum dolor sit amet, consectetur" >
<img src="../images/flower2.jpg" title="Adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam" >
<img src="../images/flower3.jpg" title="Quis nostrud exercitation ullamco laboris..." >
<img src="../images/flower4.jpg" title="Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident" >
</div>
<br/>
<input type="button" value="Play" id="play" />
<input type="button" value="Pause" id="pause" />
</body>
|
