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 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 | <!-- DC Ken Burns Panel Slider CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/kbpanel-slider/css/kenburns-panel-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 Ken Burns Panel Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/kbpanel-slider/js/jquery.waitforimages.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/kbpanel-slider/js/jquery.cssAnimate.mini.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/kbpanel-slider/js/jquery.touchwipe.min.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/kbpanel-slider/js/jquery.templateaccess.kenburns-panel.min.js" ></ script > <!-- DC Ken Burns Panel Slider Settings --> < script type = "text/javascript" > $(function() { $('.kbpanel-bannercontainer').kenburn({ thumbWidth:70, // thumbnail width thumbHeight:40, // thumbnail height thumbAmount:4, // number of thumbnails to show thumbStyle:"both", // thumb, bullet, none, both thumbVideoIcon:"on", // show a video icon for video content: off, on thumbVertical:"bottom", thumbHorizontal:"center", thumbXOffset:0, thumbYOffset:40, bulletXOffset:0, bulletYOffset:-16, hideThumbs:"on", 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:... // // PT+Sans+Narrow:400,700 // ///////////////////////////////////////////////////////////////////////////////////////////////////////////// googleFonts:'Oswald', googleFontJS:'dcodes/sliders/kbpanel-slider/js/jquery.googlefonts.js' }); $('.tnone').click(function() { $('.tbull').removeClass('selected'); $('.tthumb').removeClass('selected'); $('.tnone').addClass('selected'); $('.tauto').removeClass('selected'); $('.kenburn_thumb_container').css({'visibility':'hidden'}); $('.thumbbuttons').css({'visibility':'hidden'}); }); $('.tthumb').click(function() { $('.tbull').removeClass('selected'); $('.tauto').removeClass('selected'); $('.tthumb').addClass('selected'); $('.tnone').removeClass('selected'); $('.kenburn_thumb_container').css({'visibility':'visible'}); $('.thumbbuttons').css({'visibility':'hidden'}); $('body').addClass('tp_showthumbsalways'); $('.kenburn_thumb_container').animate({'opacity':1},{duration:300,queue:false}); }); $('.tauto').click(function() { $('.tauto').addClass('selected'); $('.tthumb').removeClass('selected'); $('.tnone').removeClass('selected'); $('.tbull').removeClass('selected'); $('body').removeClass('tp_showthumbsalways'); $('.kenburn_thumb_container').css({'visibility':'visible'}); $('.thumbbuttons').css({'visibility':'hidden'}); setTimeout(function() { $('.kenburn_thumb_container').animate({'opacity':0},{duration:300,queue:false}); },100); }); $('.tbull').click(function() { $('.tbull').addClass('selected'); $('.tauto').removeClass('selected'); $('.tthumb').removeClass('selected'); $('.tnone').removeClass('selected'); $('.kenburn_thumb_container').css({'visibility':'hidden'}); $('.thumbbuttons').css({'visibility':'visible'}); }); $('body').addClass('tp_showthumbsalways'); $('.tthumb').click(); }); </ script > <!-- DC Ken Burns Panel slider Start --> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (by strict force) --> < div class = "demoholder" > < div class = "bggradient" ></ div > <!-- <div class="kbpanel-bannercontainer centerme light"> light theme --> < div class = "kbpanel-bannercontainer centerme 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/kbpanel-slider/images/image1.jpg" data-bw = "dcodes/sliders/kbpanel-slider/images/image1_blur.jpg" data-thumb = "dcodes/sliders/kbpanel-slider/images/thumb1.jpg" > < div class = "creative_layer" > < div class = "cp-left faderight" > < p class = "cp-title" >Ken Burns Panel Slider</ p > < p >Supports IE, Firefox, Chrome, Safari, Opera.</ p > < p >The ultimate ken burns slider is here.< br /> Supports URLs, YouTube/Vimeo Videos< br /> multiple transition effects, transparent< br /> panels, bullets/thumbs and more! < br /></ p > < a style = "margin-top:10px" class = "kb-button" href = "#" >See More</ a > < div class = "clear" ></ div > </ div > </ div > </ li > <!-- Slide 2 --> < li data-transition = "slide" data-startalign = "right,top" data-zoom = "out" data-zoomfact = "1.5" data-endAlign = "left,bottom" data-panduration = "8" data-colortransition = "4" >< img alt = "" src = "dcodes/sliders/kbpanel-slider/images/image2.jpg" data-bw = "dcodes/sliders/kbpanel-slider/images/image2_blur.jpg" data-thumb = "dcodes/sliders/kbpanel-slider/images/thumb2.jpg" > < div class = "video_kenburner" > < div class = "video_kenburn_wrap" > < div class = "video_video" > < iframe class = "video_clip" src = "http://player.vimeo.com/video/4749536?title=0&byline=0&portrait=0" ></ iframe > </ div > < div class = "video_details" > < p class = "cp-title" >Vimeo Video</ p > < p >Watch sample embedded Vimeo video.< br /></ p > < a style = "margin-top:10px" class = "kb-button" href = "#" >See More</ a > < div class = "clear" ></ div > </ div > < div class = "close" ></ div > </ div > </ div > < div class = "creative_layer " > < div class = "cp-right fade" > < p class = "cp-title" >Vimeo Support</ p > < p >This slider supports embedded content.< br /> Click the play button to play a sample video.< br /> </ p > < a style = "margin-top:10px" class = "kb-button" href = "#" >See More</ a > < div class = "clear" ></ div > </ 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/kbpanel-slider/images/image3.jpg" data-bw = "dcodes/sliders/kbpanel-slider/images/image3_blur.jpg" data-thumb = "dcodes/sliders/kbpanel-slider/images/thumb3.jpg" > < div class = "creative_layer " > < div class = "cp-bottom fadeup" > < p class = "cp-title" >Did You Know?</ p > < p >The Ken Burns effect is a popular name for a type of panning and zooming effect used in video production from still imagery.</ p > </ div > </ div > </ li > <!-- Slide 4 --> < li data-transition = "fade" data-startalign = "right,top" data-zoom = "out" data-zoomfact = "1.2" data-endAlign = "left,bottom" data-panduration = "11" data-colortransition = "4" >< img alt = "" src = "dcodes/sliders/kbpanel-slider/images/image4.jpg" data-bw = "dcodes/sliders/kbpanel-slider/images/image4_blur.jpg" data-thumb = "dcodes/sliders/kbpanel-slider/images/thumb4.jpg" > < div class = "creative_layer " > < div class = "cp-top fadedown" > < p class = "cp-title" >Your Portfolio, Revealed.</ p > < p >Showcase your work and bring still images to life!</ p > </ 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/kbpanel-slider/images/image5.jpg" data-bw = "dcodes/sliders/kbpanel-slider/images/image5_blur.jpg" data-thumb = "dcodes/sliders/kbpanel-slider/images/thumb5.jpg" > < div class = "video_kenburner" > < div class = "video_kenburn_wrap" > < div class = "video_video" > < iframe class = "video_clip" src = "http://www.youtube.com/embed/FG0fTKAqZ5g?hd=1&wmode=opaque&autohide=1&showinfo=0" ></ iframe > </ div > < div class = "video_details" > < p class = "cp-title" >Youtube Video</ p > < p >YouTube Video</ p > < p >This is a sample YouTube video.</ p > < a style = "margin-top:10px" class = "kb-button" href = "#" >See More</ a > < div class = "clear" ></ div > </ div > < div class = "close" ></ div > </ div > </ div > < div class = "creative_layer " > < div class = "cp-left fade" > < p class = "cp-title" >YouTube Support</ p > < p >Click to Play!</ p > < p >This innovative slider supports< br /> YouTube content. Click to play!</ p > < a style = "margin-top:10px" class = "kb-button" href = "#" >See More</ a > < div class = "clear" ></ div > </ div > </ div > </ li > </ ul > </ div > <!-- /kbpanel-bannercontainer --> <!-- Banner Shadow Effect --> < div class = "bannershadow centerme" >< img width = "100%" height = "40px" src = "dcodes/sliders/kbpanel-slider/images/bannershadow.png" ></ div > </ div > <!-- /demoholder --> </ div > <!-- DC Ken Burns Panel slider End --> < div class = "dc_clear" ></ div > <!-- line break/clear line --> |
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 | <!-- DC sCarousel Slider CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/css/carousel/feature-carousel.css" /> <!-- 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 sCarousel Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/js/carousel/jquery.featureCarousel.js" ></ script > <!-- DC sCarousel Slider Start --> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (strict enforce) --> <!-- navigation controls --> < div class = "navig-carousel" > < div id = "scarousel-left" ></ div > < div id = "scarousel-right" ></ div > </ div > < section id = "slide" > < div id = "carousel-container" > < div id = "carousel" > <!-- Slide 1 --> < div class = "carousel-feature" > <!-- sample local image: <a href="#"><img class="carousel-image" alt="Image Caption" src="dcodes/sliders/images/carousel/510x320-image.jpg" width="510" height="320"></a> --> < a href = "#" >< img class = "carousel-image" alt = "Image Caption" src = "http://cdn.dcodes.net/p/510x320/ccc" width = "510" height = "320" ></ a > < div class = "mask" >< img alt = "" src = "dcodes/sliders/images/carousel/bg-carousel.png" ></ div > < div class = "carousel-caption" > < div class = "caption-head" >Lovis storius penatibus donec</ div > < div class = "text-capt" > < p >Curabitur scelerisque mauris quis diam gravida eu placerat ligula scelerisque. In vitae sem nec massa imperdiet condimentum.</ p > </ div > </ div > </ div > <!-- Slide 2 --> < div class = "carousel-feature" > < a href = "#" >< img class = "carousel-image" alt = "Image Caption" src = "http://cdn.dcodes.net/p/510x320/999" width = "510" height = "320" ></ a > < div class = "mask" >< img alt = "" src = "dcodes/sliders/images/carousel/bg-carousel.png" ></ div > < div class = "carousel-caption" > < div class = "caption-head" >Pharetra nec purus amet adipiscing</ div > < div class = "text-capt" > < p >Ultrices egestas in. Est ivamus dolor pede haretra vamus quis ipsum. Sed aenean aliquam quibusdam quam. In penatibus donec.</ p > </ div > </ div > </ div > <!-- Slide 3 --> < div class = "carousel-feature" > < a href = "#" >< img class = "carousel-image" alt = "Image Caption" src = "http://cdn.dcodes.net/p/510x320/666" width = "510" height = "320" ></ a > < div class = "mask" >< img alt = "" src = "dcodes/sliders/images/carousel/bg-carousel.png" ></ div > < div class = "carousel-caption" > < div class = "caption-head" >Donec porta aliquam purus amet adipiscing</ div > < div class = "text-capt" > < p >Duis dapibus pulvinar. Aliquam egestas vivamus consectetuer condimentum nibh purus amet adipiscing. Facilisis pulvinar turpis fusce in risus nibh dui.</ p > </ div > </ div > </ div > <!-- Slide 4 --> < div class = "carousel-feature" > < a href = "#" >< img class = "carousel-image" alt = "Image Caption" src = "http://cdn.dcodes.net/p/510x320/333" width = "510" height = "320" ></ a > < div class = "mask" >< img alt = "" src = "dcodes/sliders/images/carousel/bg-carousel.png" ></ div > < div class = "carousel-caption" > < div class = "caption-head" >Augue nunc malesuada quis ligula</ div > < div class = "text-capt" > < p >Tincidunt nisl nunc. Elit malesuada etiam. Suspendisse id lacinia. Augue nunc quis ligula elit odio. Donec porta aliquam neque suspendisse cursus.</ p > </ div > </ div > </ div > <!-- Slide 5 --> < div class = "carousel-feature" > < a href = "#" >< img class = "carousel-image" alt = "Image Caption" src = "http://cdn.dcodes.net/p/510x320/000" width = "510" height = "320" ></ a > < div class = "mask" >< img alt = "" src = "dcodes/sliders/images/carousel/bg-carousel.png" ></ div > < div class = "carousel-caption" > < div class = "caption-head" >Facilisis consectetuer pulvinar turpi</ div > < div class = "text-capt" > < p >Aliquam egestas vivamus consectetuer condimentum nibh purus amet adipiscing. Facilisis pulvinar turpis fusce in risus nibh dui. Pellentesque deleniti sagittis. Tincidunt nisl nunc.</ p > </ div > </ div > </ div > <!-- Slide 6 --> < div class = "carousel-feature" > < a href = "#" >< img class = "carousel-image" alt = "Image Caption" src = "http://cdn.dcodes.net/p/510x320/9CF" width = "510" height = "320" ></ a > < div class = "mask" >< img alt = "" src = "dcodes/sliders/images/carousel/bg-carousel.png" ></ div > < div class = "carousel-caption" > < div class = "caption-head" >Facilisis consectetuer pulvinar turpi</ div > < div class = "text-capt" > < p >Aliquam egestas vivamus consectetuer condimentum nibh purus amet adipiscing. Facilisis pulvinar turpis fusce in risus nibh dui. Pellentesque deleniti sagittis. Tincidunt nisl nunc.</ p > </ div > </ div > </ div > </ div > <!-- /carousel --> </ div > <!-- /carousel-container --> </ section > <!-- /section slide --> </ div > <!-- DC sCarousel Slider End --> < div class = "dc_clear" ></ div > <!-- line break/clear line --> |
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 | <!-- DC Flick Slider CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/css/flick/flick.css" /> <!-- 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 Flick Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/js/flick/jquery.easing.1.3.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/js/flick/flick.js" ></ script > <!-- DC Flick Slider Start --> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (strict enforce) --> <!-- navigation controls--> < div class = "navig-photo-stack ps" > < a class = "prev" ></ a > < a class = "next" ></ a > </ div > < section id = "slide" > < div id = "ps-slider" class = "ps-slider" > <!-- Slide 1 --> < div id = "ps-albums" > <!-- sample local image: <div class="ps-album" style="opacity:0;"> <img src="dcodes/sliders/images/flick/226x420-image.jpg" width="226" height="420" /> --> < div class = "ps-album" style = "opacity:0;" > < img src = "http://cdn.dcodes.net/p/226x420/ccc" width = "226" height = "420" /> < div class = "ps-desc" > < div class = "ps-head" > < h3 >TemplateAccess</ h3 > </ div > < div class = "ps-cont" > < span > Vel vitae aptent velit emagna in molestienec. torquent vehicula. Nonummy a velit</ span > </ div > </ div > </ div > <!-- Slide 2 --> < div class = "ps-album" style = "opacity:0;" > < img src = "http://cdn.dcodes.net/p/226x420/999" width = "226" height = "420" /> < div class = "ps-desc" > < div class = "ps-head" > < h3 >Vision</ h3 > </ div > < div class = "ps-cont" > < span >Duis dapibus pulvinar. Aliquam egestas vivamus consectetuer. Sed arcu aenean aliquam!</ span > </ div > </ div > </ div > <!-- Slide 3 --> < div class = "ps-album" style = "opacity:0;" > < img src = "http://cdn.dcodes.net/p/226x420/666" width = "226" height = "420" /> < div class = "ps-desc" > < div class = "ps-head" > < h3 >Integrity</ h3 > </ div > < div class = "ps-cont" > < span > Et fusce in risus nibh ellentesque deleniti sagittis. Tincidunt.</ span > </ div > </ div > </ div > <!-- Slide 4 --> < div class = "ps-album" style = "opacity:0;" > < img src = "http://cdn.dcodes.net/p/226x420/333" width = "226" height = "420" /> < div class = "ps-desc" > < div class = "ps-head" > < h3 >Persistance</ h3 > </ div > < div class = "ps-cont" > < span >Vivamus dolor pede. Pharetra nec in. Vivamus quis ipsum. Sed arcu aenean aliquam!</ span > </ div > </ div > </ div > <!-- Slide 5 --> < div class = "ps-album" style = "opacity:0;" > < img src = "http://cdn.dcodes.net/p/226x420/000" width = "226" height = "420" /> < div class = "ps-desc" > < div class = "ps-head" > < h3 >Compassion</ h3 > </ div > < div class = "ps-cont" > < span >Vestibulum nec aliquam quibusdam quam lobortis. Ultrices egestas in. Est sed arcu.</ span > </ div > </ div > </ div > <!-- Slide 6 --> < div class = "ps-album" style = "opacity:0;" > < img src = "http://cdn.dcodes.net/p/226x420/9CF" width = "226" height = "420" /> < div class = "ps-desc" > < div class = "ps-head" > < h3 >Open Minded</ h3 > </ div > < div class = "ps-cont" > < span > Vivamus dolor pede. Fruitful great fourth likenes. Sed arcu aenean aliquam!</ span > </ div > </ div > </ div > <!-- Slide 7 --> < div class = "ps-album" style = "opacity:0;" > < img src = "http://cdn.dcodes.net/p/226x420/99F" width = "226" height = "420" /> < div class = "ps-desc" > < div class = "ps-head" > < h3 >Determination</ h3 > </ div > < div class = "ps-cont" > < span >Ultrices egestas in. Est ivamus dolor pede haretra vamus quis ipsum sed.</ span > </ div > </ div > </ div > <!-- Slide 8 --> < div class = "ps-album" style = "opacity:0;" > < img src = "http://cdn.dcodes.net/p/226x420/FFC" width = "226" height = "420" /> < div class = "ps-desc" > < div class = "ps-head" > < h3 >Focus</ h3 > </ div > < div class = "ps-cont" > < span >Pharetra nec in. Vivamus quis ipsum. Sed arcu aenean penatibus.</ span > </ div > </ div > </ div > <!-- Slide 9 --> < div class = "ps-album" style = "opacity:0;" > < img src = "http://cdn.dcodes.net/p/226x420/9CC" width = "226" height = "420" /> < div class = "ps-desc" > < div class = "ps-head" > < h3 >Goals</ h3 > </ div > < div class = "ps-cont" > < span > Tincidunt nisl nunc. Elit malesuada etiam. Suspendisse id lacinia. Augue nunc quis.</ span > </ div > </ div > </ div > </ div > <!-- /ps-albums --> </ div > <!-- /ps-slider --> </ section > <!-- /section slide --> </ div > <!-- DC Flick Slider End --> < div class = "dc_clear" ></ div > <!-- line break/clear line --> |
Curabitur scelerisque mauris quis diam gravida eu placerat ligula scelerisque. In vitae sem nec massa imperdiet condimentum. Donec ut mauris vel risus rutrum commodo.
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 | <!-- DC jFancyTile Slider CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/css/jfancytile/jquery.jfancytile.css" /> <!-- 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 jFancyTile Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/js/jfancytile/jquery.jfancytile.js" ></ script > <!-- DC jFancyTile Slider Start --> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (strict enforce) --> <!-- navigation controls --> < div class = "navig-fancytile" ></ div > < section id = "slide" > < div id = "fancytile-slide" > < ul > <!-- sample local image: <li><img src="dcodes/sliders/images/jfancytile/950x420-image.jpg" alt="#caption-one" width="950" height="420" /> --> <!-- Slide 1 --> < div class = "html-caption" > < div class = "caption-head" >Curabitur scelerisque mauris quis diam</ div > < div class = "text-capt" > < p >Curabitur scelerisque mauris quis diam gravida eu placerat ligula scelerisque. In vitae sem nec massa imperdiet condimentum. Donec ut mauris vel risus rutrum commodo. </ p > </ div > </ div > </ li > <!-- Slide 2 --> < div class = "html-caption" > < div class = "caption-head" >Aliquam consectetuer vivamus</ div > < div class = "text-capt" > < p >Dui hendrerit pellentesque lorem rutrum tellus fringilla feugiat. Interdum erat porta libero. Ullamcorper turpis sed lobortis. Vitae integer libero amet.</ p > </ div > </ div > </ li > <!-- Slide 3 --> < li >< img src = http ://cdn.dcodes.net/p/950x420/666" alt = "#caption-three" width = "950" height = "420" /> < div class = "html-caption" > < div class = "caption-head" >Wisi arcu est egestas vivamus!</ div > < div class = "text-capt" > < p >Duis dapibus pulvinar. Aliquam egestas vivamus consectetuer condimentum nibh purus amet adipiscing. Duis sed massa id urna elementum varius.</ p > </ div > </ div > </ li > <!-- Slide 4 --> < div class = "html-caption" > < div class = "caption-head" >Vel tristique portti arcu est!</ div > < div class = "text-capt" > < p >Ullamcorper turpis sed lobortis. Vitae integer libero amet. Vel tristique porttitor duis amet adipiscing sed massa id urna elementum varius.</ p > </ div > </ div > </ li > <!-- Slide 5 --> < div class = "html-caption" > < div class = "caption-head" >Withero duos arcu est egestas!</ div > < div class = "text-capt" > < p >In penatibus donec. In venenatis vivamus. Vel vitae aptent velit emagna in molestienec. torquent vehicula. sed massa id urna.</ p > </ div > </ div > </ li > <!-- Slide 6 --> < div class = "html-caption" > < div class = "caption-head" >Sagittis arcu est egestas vivamus!</ div > </ div > </ li > <!-- Slide 7 --> < div class = "html-caption" > < div class = "caption-head" >Odio non quo justo quis proin</ div > < div class = "text-capt" > < p >Ut varius vestibulum ligula est labore semper ornare morbi leo porttitor leo. Cras vitae adipiscing vel blandit donec vel elit dapibus erat ut sed quam arcu ut vestibulum.In penatibus donec. In venenatis vivamus.</ p > </ div > </ div > </ li > </ ul > </ div > <!-- /fancytile-slide --> <!-- background shadow --> < div class = "jfancybg-mask" ></ div > </ section > <!-- /section slide --> </ div > <!-- DC jFancyTile Slider End --> < div class = "dc_clear" ></ div > <!-- line break/clear line --> |
Error loading images. One or more images were not found.
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 | <!-- DC Skitter Slider CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/css/skitter/skitter.styles.css" /> <!-- 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 Skitter Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/js/skitter/jquery.skitter.min.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/js/skitter/jquery.animate-colors-min.js" ></ script > <!-- DC Skitter Slider Settings --> < script type = "text/javascript" > $(function(){ $('.box_skitter_large').skitter( { animation: 'random', // animation effects (individual slides: remove this variable and use class="effect_xxx" to force specific effect on each slide) interval: '2500', // Interval between transitions (2500 = 2.5 secs) velocity: '2', // velocity of animation numbers: true, // turn on pagination of slides (dots variable must be set to false) numbers_align: "right", // location of slide pagination dots: false, // turn on dots as pagination preview: true, focus: true, // enable slider lightbox button focus_position: "leftTop", // location of lightbox button navigation: true, // show thumbnail/bullet navigation controls: true, // show play/pause buttons controls_position: "leftTop", // location of control buttons progressbar: true, // show progress bar progressbar_css: { top:'5px', left:'120px', height:3, borderRadius:'1px', width:550, backgroundColor:'#fff', opacity:.3 }, animateNumberOver: { 'backgroundColor':'#555' }, enable_navigation_keys: true // enable navigation (left/right) keys } ); }); </ script > <!-- DC Skitter Slider Start --> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (strict enforce) --> < div class = "box_skitter box_skitter_large" > < ul > <!-- sample local image: <!-- <li> <a href="#"><img src=""dcodes/sliders/images/skitter/980x400-image.jpg" width="980" height="400" class="block" /></a> --> <!-- Slide 1 --> < li > < a href = "http://www.templateaccess.com" >< img src = "http://cdn.dcodes.net/p/980x400/ccc" width = "980" height = "400" class = "block" /></ a > < div class = "label_text" > < p >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ p > </ div > </ li > <!-- Slide 2 --> < li > < a href = "#" >< img src = "http://cdn.dcodes.net/p/980x400/999" width = "980" height = "400" class = "cube" /></ a > < div class = "label_text" > < p >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ p > </ div > </ li > <!-- Slide 3 --> < li > < a href = "http://jquery.com" >< img src = "http://cdn.dcodes.net/p/980x400/666" width = "980" height = "400" class = "default" /></ a > < div class = "label_text" > < p >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ p > </ div > </ li > <!-- Slide 4 --> < li > < a href = "http://jquery.com" >< img src = "http://cdn.dcodes.net/p/980x400/333" width = "980" height = "400" class = "paralell" /></ a > < div class = "label_text" > < p >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ p > </ div > </ li > <!-- Slide 5 --> < li > < a href = "http://jquery.com" >< img src = "http://cdn.dcodes.net/p/980x400/000" width = "980" height = "400" class = "random" /></ a > < div class = "label_text" > < p >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ p > </ div > </ li > </ ul > <!-- navigation controls --> < a style = "display: block; opacity: 0.6;" href = "#" class = "prev_button" >prev</ a >< a style = "display: block; opacity: 0.6;" href = "#" class = "next_button" >next</ a > </ div > <!-- /box_skitter --> </ div > <!-- DC Skitter Slider End --> < div class = "dc_clear" ></ div > <!-- line break/clear line --> |
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 | <!-- DC Responsive Grid CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/responsive-grid/css/dc_responsive_grid.css" /> < noscript > < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/responsive-grid/css/fallback.css" /> </ noscript > <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="dcodes/sliders/responsive-grid/css/fallback.css" /> <![endif]--> <!-- DC Javascript Library --> < script type = "text/javascript" src = "dcodes/jquery.min.js" ></ script > <!-- jQuery Library (do not call twice on same page) --> <!-- DC Responsive Grid JS --> < script type = "text/javascript" src = "dcodes/sliders/responsive-grid/js/modernizr.custom.26887.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/responsive-grid/js/jquery.transit.min.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/responsive-grid/js/jquery.gridrotator.js" ></ script > <!-- DC Responsive Grid Start --> < img src = "dcodes/sliders/responsive-grid/images/loading.gif" style = "display:none;" /> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (strict enforce) --> < div class = "responsive-grid-container" > < section class = "responsive-grid-main" > < div id = "ri-grid" class = "ri-grid ri-shadow" > < ul > <!-- note: all images defined below must exist or grid will fail to initialize --> <!-- sample local image --> <!-- <li><a href="#"><img src="dcodes/sliders/responsive-grid/images/image-200x200.jpg" /></a></li> --> </ ul > </ div > </ section > </ div > <!-- /responsive-grid-container --> </ div > <!-- DC Responsive Grid End --> < div class = "dc_clear" ></ div > <!-- line break/clear line --> <!-- DC Responsive Grid Settings --> < script type = "text/javascript" > $(function() { $( '#ri-grid' ).gridrotator( { rows : 4, // number of tile rows to show columns : 10, // number of tile columns to show animType : 'random', // effects: random, fadeInOut, showHide, slideLeft, slideRight, slideTop, slideBottom, rotateLeft, rotateRight, rotateTop, rotateBottom, scale, rotate3d, rotateLeftScale, rotateTopScale animSpeed : 1000, // ms seconds before next image switch (1000 = 1 seconds) interval : 600, step : 1, w320 : { rows : 3, columns : 4 }, w240 : { rows : 3, columns : 3 } } ); }); </ script > |
© TemplateAccess