Bootstrap Snippet TEST: Ken Burns Slider using HTML CSS Bootstrap jQuery

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

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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