"TEST: Ken Burns Slider"
Bootstrap 3.1.0 Snippet by mrmccormack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>TEST: Ken Burns Slider</h2>
<div class="col-md-2">
Sidebar content
</div>
<div class="col-md-10">
Body content
<div id="kenburns-slideshow"></div>
<div id="kenburns-description">
<h1 id="status">Loading Images..</h1>
<h1 id="slide-title"></h1>
<h1 class="title"><a href="http://www.github.com/toymakerlabs/kenburns/" target="blank">Kenburns.js
</a></h1>
<p>Kenburns.js is a lightweight and flexible Jquery gallery plugin that loads images and features an animated, pan-and-zoom, Ken Burns style effect. Grab the source from my <a href="http://www.github.com/toymakerlabs/kenburns/" target="blank"> Github</a></p>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
margin-top:44;
}
/* KENBURNS STYLES
-------------------------------------------------------*/
/* kenburns_slideshow is the wrapper div.
Our list of Images scrolls inside of this frame
To compute the minimum frame size needed:;
image width * scale
image height * scale
if the image size is smaller than the frame size,
gaps may appear. If image sizes are exactly the same,
the images will fade over one another and not move.
*/
#kenburns-slideshow {
position: relative;
width:600px;
height: 360px;
background-color:#292929;
border:22px solid #191919;
z-index: 1;
overflow: hidden;
}
/* The plugin wraps the images in div.kb-slide. This
allows me to run separate animations simultaneously. */
.kb-slide{
position: absolute;
z-index: 1;
opacity: 0;
}
/* I used position relative here because IE8
didnt like the opacity when the img was set to absolute*
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var titles = ["Epic Day at Refugio",
"Colors of Spring",
"First Flowers",
"Magic Hour at Sands Beach",
"Coal Oil Point",
"Hope Ranch Views"];
$(document).ready(function() {
$('#kenburns-slideshow').Kenburns({
images: [
"http://www.toymakerlabs.com/kenburns/images/image0.jpg",
"http://www.toymakerlabs.com/kenburns/images/image1.jpg",
"http://www.toymakerlabs.com/kenburns/images/image2.jpg",
"http://www.toymakerlabs.com/kenburns/images/image3.jpg",
"http://www.toymakerlabs.com/kenburns/images/image4.jpg",
"http://www.toymakerlabs.com/kenburns/images/image5.jpg",
],
scale:0.75,
duration:8000,
fadeSpeed:1200,
ease3d:'cubic-bezier(0.445, 0.050, 0.550, 0.950)',
onSlideComplete: function(){
$('#slide-title').html(titles[this.getSlideIndex()]);
},
onLoadingComplete: function(){
$('#status').html("Loading Complete");
}
});
});
/*
* Jquery Kenburns Image Gallery
* Original author: John [at] Toymakerlabs
* Further changes, comments: [at]Toymakerlabs
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Hi,
How can I add some text over the image to stay there static?
Thank you

andi () - 8 years ago - Reply 0


I used a non-recommended way of doing that. You can adapt it from the Triple Ad Fade Slider. There is also my design of a Ken Burns image slider that is easy to adapt for your needs. Here is my POS web page;
jrswpprac.wordpress.com

Pinky_Sauvo () - 8 years ago - Reply 0


thx alot ..very useful ..but how to increae the hight of slideshow plz

Aml Mansor () - 8 years ago - Reply 0