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 > < 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 > < 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 --> |