This page requires a Javascript enabled browser
?
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!-- DC KenBurns Caption Slider CSS -->
<link rel="stylesheet" type="text/css" href="dcodes/sliders/kbcaption-slider/css/kenburns-caption-settings.css" media="screen" />
<!-- DC Javascript Library -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->
<script type="text/javascript" src="dcodes/jquery.easing.js"></script> <!-- jQuery Easing (do not call twice on same page) -->
<!-- DC KenBurns Caption Slider JS -->
<script type="text/javascript" src="dcodes/sliders/kbcaption-slider/js/jquery.waitforimages.js"></script>
<script type="text/javascript" src="dcodes/sliders/kbcaption-slider/js/jquery.cssAnimate.mini.js"></script>
<script type="text/javascript" src="dcodes/sliders/kbcaption-slider/js/jquery.touchwipe.min.js"></script>
<script type="text/javascript" src="dcodes/sliders/kbcaption-slider/js/jquery.templateaccess.kenburns-caption.min.js"></script>
<!-- DC KenBurns Caption Slider Settings -->
<script type="text/javascript">
$(function() {         
    $('#kbcaption-1').kenburn({                                        
        width:960, // width of slider
        height:350, // height of slider
         
        thumbWidth:120, // thumbnail width
        thumbHeight:70, // thumbnail height
        thumbAmount:6,                         
        thumbSpaces:0,
        thumbPadding:9,
        thumbStyle:"thumb", // thumbnail style: thumb, bullet, none, both
        bulletXOffset:0,
        bulletYOffset:0,
        shadow:'true', // cast shadows over thumbnails: false, true
        touchenabled:'on', // allow touch swipe (suitable for mobile devices): on, off
        pauseOnRollOverThumbs:'off', // pause slider when mouse over thumbnail
        pauseOnRollOverMain:'on', // pause slider when mouse over slider
        preloadedSlides:2, // number of slides to preload during startup
         
        timer:5, // time before next slide (5 = 5 seconds)
         
        debug:"off",                       
                            ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                            //                                               Google Fonts !!                                             //
                            // local GoogleFont JS from your server: http://www.yourdomain.com/kb-plugin/js/jquery.googlefonts.js        //
                            // GoogleFonts from Original Source: http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js or https:... //
                            //                                                                                                          //
                            /////////////////////////////////////////////////////////////////////////////////////////////////////////////
                            googleFonts:'PT+Sans+Narrow:400,700',
                            googleFontJS:'dcodes/sliders/kbcaption-slider/js/jquery.googlefonts.js'
                             
    });
});
</script>
<!-- DC KenBurns Caption Slider Start -->
  <div class="bannerholder">
    <!-- <div id="kbcaption-1" class="light"> light theme -->
    <div id="kbcaption-1" class="dark">
      <ul>
                    <!-- Slide 1 -->
                    <li data-transition="fade" data-startalign="right,bottom" data-zoom="in" data-zoomfact="3" data-endAlign="center,top" data-panduration="12" data-colortransition="4">
                        <img alt="" src="dcodes/sliders/kbcaption-slider/images/image1.jpg" data-bw="dcodes/sliders/kbcaption-slider/images/image1_blur.jpg" data-thumb="dcodes/sliders/kbcaption-slider/images/thumb1.jpg" data-thumb_bw="dcodes/sliders/kbcaption-slider/images/thumb1_blur.jpg">
                                                                                                             
                            <div  class="creative_layer">
                                <div class="caption_green wipeleft" style="top:130px;left:50px;"><i>TemplateAccess </i></div> 
                                <div class="caption_transparent wipedown" style="top:180px;left:50px;">The Ultimate Ken Burns Slider</div>                                                             
                                <div class="caption_white minicap wipeup" style="top:230px;left:210px"><i>Caption styles are </i> completely <b>customizable</b>.</div>                                    
                            </div>
                             
                    </li>
                     
                    <!-- Slide 2 -->
                    <li data-transition="slide" data-startalign="center,top" data-zoom="out" data-zoomfact="1" data-endAlign="left,bottom" data-panduration="15" data-colortransition="4">
                        <img alt="" src="dcodes/sliders/kbcaption-slider/images/image2.jpg" data-bw="dcodes/sliders/kbcaption-slider/images/image2_blur.jpg" data-thumb="dcodes/sliders/kbcaption-slider/images/thumb2.jpg" data-thumb_bw="dcodes/sliders/kbcaption-slider/images/thumb2_blur.jpg">
                                                     
                            <div class="video_container">
                                <div class="video_container_wrap">   
                                    <iframe class="video_clip" src="http://player.vimeo.com/video/4749536?title=0&byline=0&portrait=0" width="569" height="320"></iframe>
                                    <h2>Vimeo Video</h2>
                                    <p>
                                        Short CG animation about a kid and a toy shop.
                                    </p>
                                    <p>
                                        <strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>.
                                    </p>
                                    <a class="buttonlight" href="http://www.vimeo.com" target="_blank">Visit Website</a>
                                    <div class="close"></div>
                                </div>
                            </div>   
                             
                            <div  class="creative_layer">
                                <div class="caption_blue wipeleft" style="top:120px;left:570px;">Vimeo</div>                   
                                <div class="caption_black wiperight" style="top:120px;left:680px;">Support</div>
                                <div class="caption_transparent minicap wipeup" style="top:180px;left:626px;">Click the play button</div>                                  
                            </div>
                             
                    </li>
                     
                    <!-- Slide 3 -->
                    <li data-transition="slide" data-startalign="left,bottom" data-zoom="in" data-zoomfact="3" data-endAlign="center,center" data-panduration="8" data-colortransition="4">
                        <img alt="" src="dcodes/sliders/kbcaption-slider/images/image3.jpg" data-bw="dcodes/sliders/kbcaption-slider/images/image3_blur.jpg" data-thumb="dcodes/sliders/kbcaption-slider/images/thumb3.jpg" data-thumb_bw="dcodes/sliders/kbcaption-slider/images/thumb3_blur.jpg">
                                                                                                             
                            <div  class="creative_layer">
                                <div class="caption_transparent wipedown" style="top:75px;left:50px;">Some of Burner's Options:</div>                                                              
                                <div class="caption_black smallcap wipeleft" style="top:135px;left:50px">Image And Thumbs Fully Resizable</div>
                                <div class="caption_black smallcap wipeleft" style="top:173px;left:50px">Customizable Ken Burns Effect</div>
                                <div class="caption_black smallcap wipeleft" style="top:211px;left:50px">Freely Positionable and Stylable Captions</div>
                                <div class="caption_black smallcap wipeleft" style="top:249px;left:50px">High Browser Compatibility!</div> 
                            </div>
                             
                    </li>
                     
                     
                    <!-- Slide 4 -->
                    <li data-transition="fade" data-startalign="right,center" data-zoom="out" data-zoomfact="1.3" data-endAlign="left,center" data-panduration="11" data-colortransition="4">
                        <img alt="" src="dcodes/sliders/kbcaption-slider/images/image4.jpg" data-bw="dcodes/sliders/kbcaption-slider/images/image4_blur.jpg" data-thumb="dcodes/sliders/kbcaption-slider/images/thumb4.jpg" data-thumb_bw="dcodes/sliders/kbcaption-slider/images/thumb4_blur.jpg">
                                                                                                             
                                <div  class="creative_layer">
                                <div class="caption_transparent wipedown" style="top:50px;left:50px;">Features:</div>                                                              
                                <div class="caption_black smallcap wipeleft" style="top:105px;left:50px">Touch swipe for iOS/Android/Windows 8 devices</div>
                                <div class="caption_black smallcap wipeleft" style="top:145px;left:50px">Small file size</div>
                                                                 
                                <div class="caption_orange wipeup" style="top:210px;left:100px;">Captions can be positioned freely</div>   
                                <div class="caption_transparent wipedown" style="top:265px;left:100px;"><a href="http://www.bing.com" target="_blank">Supports URLs too! Goto: Bing Search</a></div>                                           
                            </div>
                             
                    </li>
                     
                    <!-- Slide 5 -->
                    <li data-transition="fade" data-startalign="center,top" data-zoom="in" data-zoomfact="1.6" data-endAlign="center,bottom" data-panduration="12" data-colortransition="4">
                        <img alt="" src="dcodes/sliders/kbcaption-slider/images/image5.jpg" data-bw="dcodes/sliders/kbcaption-slider/images/image5_blur.jpg" data-thumb="../sliders/kbcaption-slider/images/thumb5.jpg" data-thumb_bw="dcodes/sliders/kbcaption-slider/images/thumb5_blur.jpg">
                                                     
                            <div class="video_container">
                                <div class="video_container_wrap">   
                                    <iframe class="video_clip" src="http://www.youtube.com/embed/FG0fTKAqZ5g?hd=1&wmode=opaque&autohide=1&showinfo=0" height="320" width="569"></iframe>
                                    <h2>YouTube</h2>
                                    <p>
                                        Sample YouTube Video.
                                    </p>
                                    <p>
                                        <strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>.
                                    </p>
                                    <a class="buttonlight" href="http://www.youtube.com" target="_blank">More Info</a>
                                    <div class="close"></div>
                                </div>
                            </div>   
                             
                            <div  class="creative_layer">
                                <div class="caption_red wipeleft" style="top:140px;left:40px;"><a href="#">YouTube</a></div>                   
                                <div class="caption_white wiperight" style="top:140px;left:180px;">Support</div>
                                <div class="caption_transparent minicap wipeup" style="top:200px;left:75px;">Click the play button</div>                                                                   
                            </div>
                             
                    </li>
                     
                    <!-- Slide 6 -->
                    <li data-transition="slide" data-startalign="center,center" data-zoom="in" data-zoomfact="2" data-endAlign="center,center" data-panduration="15" data-colortransition="4">
                        <img alt="" src="dcodes/sliders/kbcaption-slider/images/image6.jpg" data-bw="dcodes/sliders/kbcaption-slider/images/image6_blur.jpg" data-thumb="dcodes/sliders/kbcaption-slider/images/thumb6.jpg" data-thumb_bw="dcodes/sliders/kbcaption-slider/images/thumb6_blur.jpg">
                                                                                                             
                            <div  class="creative_layer">    
                                <div class="caption_black nobg largecap wiperight" style="top:130px;left:100px;">Add Anything  </div>
                                <div class="caption_black nobg largecap wipeleft" style="top:110px;left:620px;">You Want! </div>                                      
                            </div>
                             
                    </li>
                    <!-- Slide 7 -->
                    <li data-transition="slide" data-startalign="left,bottom" data-zoom="in" data-zoomfact="2" data-endAlign="center,center" data-panduration="15" data-colortransition="4">
                        <img alt="" src="dcodes/sliders/kbcaption-slider/images/image7.jpg" data-bw="dcodes/sliders/kbcaption-slider/images/image7_blur.jpg" data-thumb="dcodes/sliders/kbcaption-slider/images/thumb7.jpg" data-thumb_bw="dcodes/sliders/kbcaption-slider/images/thumb7_blur.jpg">
                                                                                                             
                            <div  class="creative_layer">        
                                <div class="caption_transparent minicap wipeup" style="top:230px;left:330px;">Supports Anchor Links. Visit: <b><a href="http://www.bing.com" target="_blank">Bing Search</a> | <a href="http://www.templateaccess.com" target="_blank">TemplateAccess</a></b></div>
                            </div>
                    </li>
                     
      </ul>
    </div> <!-- /kbcaption-1 -->
  </div> <!-- /bannerholder -->
<!-- DC KenBurns Caption Slider End -->
<div class="dc_clear"></div> <!-- line break/clear line -->