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 | <!-- DC OneByOne Slider CSS --> < link href = "dcodes/sliders/onebyone/css/jquery.onebyone.css" rel = "stylesheet" type = "text/css" > < link href = "dcodes/sliders/onebyone/css/animate.min.css" rel = "stylesheet" type = "text/css" > <!-- DC OneByOne Custom Fonts --> < link rel = "stylesheet" type = "text/css" href = "http://fonts.googleapis.com/css?family=PT Sans Narrow" > <!-- DC Javascript Library --> < script type = "text/javascript" src = "dcodes/jquery.min.js" ></ script > <!-- jQuery Library (do not call twice on same page) --> <!-- DC OneByOne Slider JS --> < script src = "dcodes/sliders/onebyone/js/jquery.onebyone.js" ></ script > < script src = "dcodes/sliders/onebyone/js/jquery.touchwipe.min.js" ></ script > <!-- DC OneByOne Slider Start --> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (strict enforce) --> < div class = "oneByOne1" > < div id = "obo_banner" > <!-- slide 1 --> < div class = "oneByOne_item obo_slide1" > < img src = "dcodes/sliders/onebyone/images/slider1_element_bg.png" class = "element_bg animate3" /> < img src = "dcodes/sliders/onebyone/images/slider1_element_1.png" class = "element_0 animate0" /> < img src = "dcodes/sliders/onebyone/images/slider1_element_1.png" width = "100" class = "element_1 animate1" /> < img src = "dcodes/sliders/onebyone/images/slider1_element_1.png" width = "75" class = "element_2 animate2" /> < span class = "slide1Txt1" >OneByOne Slider</ span > < span class = "slide1Txt2" >The Ultimate Layer Slider</ span > < span class = "slide1Txt3" >Includes 17+ Transition Effects</ span > </ div > <!-- slide 2 --> < div class = "oneByOne_item obo_slide2" > < img src = "dcodes/sliders/onebyone/images/slider2_tablet.png" class = "element_0 animate0" /> < img src = "dcodes/sliders/onebyone/images/slider2_element_1.png" class = "element_1 animate0" /> < img src = "dcodes/sliders/onebyone/images/slider2_element_2.png" class = "element_2 animate1" /> < img src = "dcodes/sliders/onebyone/images/slider2_element_3.png" class = "element_3 animate2" /> < a href = "#" class = "button animate3" >< img src = "dcodes/sliders/onebyone/images/slider2_button.png" border = "0" /></ a > </ div > <!-- slide 3 --> < div class = "oneByOne_item obo_slide3" > < a href = "#" >< img src = "dcodes/sliders/onebyone/images/slider3_element_2.png" alt = "img" border = "0" class = "element_2 animate1" /></ a > < a href = "#" >< img src = "dcodes/sliders/onebyone/images/slider3_element_3.png" alt = "img" border = "0" class = "element_3 animate2" /></ a > < a href = "#" >< img src = "dcodes/sliders/onebyone/images/slider3_element_4.png" alt = "img" border = "0" class = "element_4 animate3" /></ a > < a href = "#" >< img src = "dcodes/sliders/onebyone/images/slider3_element_5.png" alt = "img" border = "0" class = "element_5 animate4" /></ a > < span class = "slide3Txt1" >Create Transitional Layered Items</ span > </ div > <!-- slide 4 --> < div class = "oneByOne_item obo_slide4" > < img src = "dcodes/sliders/onebyone/images/slider4_element_1.png" alt = "img" class = "element_1 animate0" /> < img src = "dcodes/sliders/onebyone/images/slider4_element_2.png" alt = "img" width = "166" height = "158" class = "element_2 animate1" /> < img src = "dcodes/sliders/onebyone/images/slider4_element_3.png" alt = "img" width = "186" height = "158" class = "element_3 animate2" /> < img src = "dcodes/sliders/onebyone/images/slider4_element_4.png" alt = "img" width = "153" height = "158" class = "element_4 animate3" /> < img src = "dcodes/sliders/onebyone/images/slider4_element_5.png" alt = "img" width = "175" height = "158" class = "element_5 animate4" /> < img src = "dcodes/sliders/onebyone/images/slider4_element_6.png" alt = "img" width = "120" height = "158" class = "element_6 animate5" /> </ div > </ div > <!-- /obo_banner --> </ div > <!-- /oneByOne1 --> < script type = "text/javascript" charset = "utf-8" > $(document).ready(function() { $('#obo_banner').oneByOne({ className: 'oneByOne1', easeType: 'random', // options: random, rollIn, fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInRight, bounceIn, bounceInDown, bounceInUp, bounceInLeft, bounceInRight, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight width: 980, height: 370, slideShowDelay: 3500, slideShow: true }); }); </ script > </ div > <!-- DC OneByOne 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 | <!-- DC Nivo Slider CSS --> < link rel = "stylesheet" href = "dcodes/sliders/css/nivo-slider/default-theme/default.css" type = "text/css" media = "screen" /> < link rel = "stylesheet" href = "dcodes/sliders/css/nivo-slider/nivo-slider.css" type = "text/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) --> <!-- DC Nivo Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/js/nivo-slider/jquery.nivo.slider.pack.js" ></ script > <!-- DC Nivo Slider Settings --> < script type = "text/javascript" > $(window).load(function() { $('#slider').nivoSlider({ effect: 'random', // Effects available: 'random,fold,fade,boxRandom,sliceDown,sliceDownLeft,sliceUp,sliceUpLeft,sliceUpDown,sliceUpDownLeft,slideInRight,slideInLeft,boxRain,boxRainReverse,boxRainGrow,boxRainGrowReverse' slices: 15, // For slice animations boxCols: 8, // For box animations boxRows: 4, // For box animations animSpeed: 500, // Slide transition speed pauseTime: 3000, // How long each slide will show before next slide (3000 = 3 seconds) startSlide: 0, // Set starting Slide (0 index) directionNav: true, // Next & Prev navigation directionNavHide: true, // Only show on hover controlNav: true, // 1,2,3... navigation controlNavThumbs: false, // Use thumbnails for Control Nav controlNavThumbsFromRel:true, // Generates the thumbnail url from the “rel” attribute in your image tags pauseOnHover: true, // Stop animation while hovering manualAdvance: false, // Force manual transitions prevText: '<', // Prev directionNav text nextText: '>', // Next directionNav text randomStart: false, // Start on a random slide beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded }); }); </ script > <!-- DC Nivo Slider Start --> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (strict enforce) --> < div class = "slider-wrapper theme-default" > < div id = "slider" class = "nivoSlider" > <!-- local sample image: <img src="dcodes/sliders/images/nivo-slider/980x400-image.jpg" width="980" height="400" title="#htmlcaption" /> --> <!-- Slide 1 --> <!-- Slide 2 --> <!-- Slide 3 --> </ div > <!-- /slider --> <!-- Slide 1 Caption --> < div id = "htmlcaption1" class = "nivo-html-caption" >< strong >This</ strong > is an example of a < em >HTML</ em > caption. Supports Links: < a href = "http://www.bing.com" target = "_blank" >Bing Search</ a ></ div > <!-- Slide 2 Caption --> < div id = "htmlcaption2" class = "nivo-html-caption" >< strong >This</ strong > is example slide two.</ div > </ div > <!-- /slider-wrapper --> </ div > <!-- DC Nivo 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 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 | <!-- DC Showcase Slider CSS --> < link rel = "stylesheet" href = "dcodes/sliders/css/showcase/showcase.css" /> <!-- DC Javascript Library --> < script type = "text/javascript" src = "dcodes/jquery.min.js" ></ script > <!-- jQuery Library (do not call twice on same page) --> <!-- DC Showcase Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/js/showcase/jquery.aw-showcase.js" ></ script > <!-- DC Showcase Slider Settings --> < script type = "text/javascript" > $(document).ready(function() { $("#showcase").awShowcase( { content_width: 838, // width of slider content_height: 470, // height of slider fit_to_parent: false, auto: true, // auto play slider on load interval: 3000, // interval between slides (3000 = 3 seconds) continuous: true, loading: true, tooltip_width: 200, // tooltip width tooltip_icon_width: 32, tooltip_icon_height: 32, tooltip_offsetx: 18, tooltip_offsety: 0, arrows: true, // show side left/right arrow buttons buttons: true, // show pagination bullets below slider btn_numbers: false, // make pagination bullets numbers instead (e.g. 1,2,3,4,5) keybord_keys: true, // enable keyboard keys (left/right) mousetrace: false, /* Trace x and y coordinates for the mouse */ pauseonover: true, // pause slide on hover stoponclick: true, transition: 'vslide', /* hslide/vslide/fade */ transition_delay: 300, transition_speed: 500, show_caption: 'onhover', /* onload/onhover/show */ thumbnails: true, // show thumbnails thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */ thumbnails_direction: 'vertical', /* vertical/horizontal */ thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */ dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */ speed_change: true, /* Set to true to prevent users from swithing more then one slide at once. */ viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */ }); }); </ script > <!-- DC Showcase Slider Start --> < div id = "showcase" class = "showcase" > <!-- local sample image: <img src="dcodes/sliders/images/showcase/838x470-image.jpg" width="838" height="470" /> --> <!-- Slide 1 --> < div class = "showcase-slide" > < div class = "showcase-content" > </ div > < div class = "showcase-thumbnail" > < div class = "showcase-thumbnail-caption" >Vision</ div > < div class = "showcase-thumbnail-cover" ></ div > </ div > <!-- Showcase Tooltips --> < div class = "showcase-tooltips" > <!-- Each anchor in .showcase-tooltips represents a tooltip. The coords attribute represents the position of the tooltip. --> < a href = "http://www.templateaccess.com" coords = "470,190" target = "_blank" >Another example tooltip. Just define two coordinates!</ a > <!-- You can add multiple elements to the anchor-tag which are display in the tooltip. --> < span style = "display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;" >Tooltip example with HTML content.</ span > </ a > </ div > </ div > <!-- /showcase-slide --> <!-- Slide 2 --> < div class = "showcase-slide" > < div class = "showcase-content" > </ div > < div class = "showcase-thumbnail" > < div class = "showcase-thumbnail-caption" >Integrity</ div > < div class = "showcase-thumbnail-cover" ></ div > </ div > < div class = "showcase-caption" > < h2 >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ h2 > </ div > </ div > <!-- /showcase-slide --> <!-- Slide 3 --> < div class = "showcase-slide" > < div class = "showcase-content" > </ div > < div class = "showcase-thumbnail" > < div class = "showcase-thumbnail-caption" >Wonder</ div > < div class = "showcase-thumbnail-cover" ></ div > </ div > < div class = "showcase-caption" > < h2 >Aliquam egestas vivamus consectetuer condimentum nibh purus amet adipiscing.</ h2 > </ div > </ div > <!-- /showcase-slide --> <!-- Slide 4 --> < div class = "showcase-slide" > < div class = "showcase-content" > </ div > < div class = "showcase-thumbnail" > < div class = "showcase-thumbnail-content" >Customize< br /> < b >this text!</ b ></ div > < div class = "showcase-thumbnail-cover" ></ div > </ div > < div class = "showcase-caption" > < h2 >Nulla eget sapien neque, in commodo erat. Integer at felis tortor.</ h2 > </ div > </ div > <!-- /showcase-slide --> <!-- Slide 5 --> < div class = "showcase-slide" > < div class = "showcase-content" > </ div > < div class = "showcase-thumbnail" > < div class = "showcase-thumbnail-content" >More text examples!</ div > < div class = "showcase-thumbnail-cover" ></ div > </ div > </ div > <!-- /showcase-slide --> <!-- Slide 6 --> < div class = "showcase-slide" > < div class = "showcase-content" > </ div > < div class = "showcase-thumbnail" > < div class = "showcase-thumbnail-caption" >Focus</ div > < div class = "showcase-thumbnail-cover" ></ div > </ div > </ div > <!-- /showcase-slide --> <!-- Slide 7 --> < div class = "showcase-slide" > < div class = "showcase-content" > </ div > < div class = "showcase-thumbnail" > < div class = "showcase-thumbnail-caption" >Determined</ div > < div class = "showcase-thumbnail-cover" ></ div > </ div > </ div > <!-- /showcase-slide --> </ div > <!-- DC Showcase 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 | <!-- DC Broken Glass Slider CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/css/broken-glass/slider-brokenglass-style.css" /> <!-- DC Javascript Library --> < script type = "text/javascript" src = "dcodes/jquery.min.js" ></ script > <!-- jQuery Library (do not call twice on same page) --> <!-- DC Broken Glass Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/js/broken-glass/jquery.transform-0.9.3.min_.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/js/broken-glass/jquery.mousewheel.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/js/broken-glass/jquery.RotateImageMenu.js" ></ script > <!-- DC Broken Glass Slider Start --> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (strict enforce) --> < div id = "rm_container" class = "rm_container" > < ul > <!-- local sample image: <li data-images="rm_container_1" data-rotation="-15"><img src="dcodes/sliders/images/broken-glass/379x470-image.jpg" width="379" height="470" /> --> < li data-images = "rm_container_1" data-rotation = "-12" >< img src = "http://cdn.dcodes.net/p/379x470/ccc" width = "379" height = "470" /></ li > < li data-images = "rm_container_2" data-rotation = "-5" >< img src = "http://cdn.dcodes.net/p/379x470/999" width = "379" height = "470" /></ li > < li data-images = "rm_container_3" data-rotation = "5" >< img src = "http://cdn.dcodes.net/p/379x470/666" width = "379" height = "470" /></ li > < li data-images = "rm_container_4" data-rotation = "12" >< img src = "http://cdn.dcodes.net/p/379x470/333" width = "379" height = "470" /></ li > </ ul > <!-- shattered glass effect, remove this to show full glass: start --> < div id = "rm_mask_left" class = "rm_mask_left" ></ div > < div id = "rm_mask_right" class = "rm_mask_right" ></ div > < div id = "rm_corner_left" class = "rm_corner_left" ></ div > < div id = "rm_corner_right" class = "rm_corner_right" ></ div > <!-- shattered glass effect, remove this to show full glass: end --> <!-- Slider Caption --> < h2 >dCodes</ h2 > < div style = "display:none;" > < div id = "rm_container_1" > < img src = "http://cdn.dcodes.net/p/379x470/ccc" width = "379" height = "470" /> < img src = "http://cdn.dcodes.net/p/379x470/9CF" width = "379" height = "470" /> </ div > < div id = "rm_container_2" > < img src = "http://cdn.dcodes.net/p/379x470/999" width = "379" height = "470" /> < img src = "http://cdn.dcodes.net/p/379x470/99F" width = "379" height = "470" /> </ div > < div id = "rm_container_3" > < img src = "http://cdn.dcodes.net/p/379x470/666" width = "379" height = "470" /> < img src = "http://cdn.dcodes.net/p/379x470/FCF" width = "379" height = "470" /> </ div > < div id = "rm_container_4" > < img src = "http://cdn.dcodes.net/p/379x470/333" width = "379" height = "470" /> < img src = "http://cdn.dcodes.net/p/379x470/CCF" width = "379" height = "470" /> </ div > </ div > </ div > <!-- /rm_container --> <!-- navigation controls --> < div class = "rm_nav" > < a id = "rm_next" href = "#" class = "rm_next" ></ a > < a id = "rm_prev" href = "#" class = "rm_prev" ></ a > </ div > < div class = "rm_controls" > < a id = "rm_play" href = "#" class = "rm_play" >Play</ a > < a id = "rm_pause" href = "#" class = "rm_pause" >Pause</ a > </ div > </ div > <!-- DC Broken Glass 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 | <!-- DC Touchswipe Slider CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/touchswipe/css/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 Touchswipe Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/touchswipe/js/jquery.easing.1.3.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/touchswipe/js/jquery.cssAnimate.mini.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/touchswipe/js/jquery.waitforimages.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/touchswipe/js/jquery.touchwipe.min.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/touchswipe/js/jquery.templateaccess.touchswipe.js" ></ script > <!-- DC Touchswipe Slider Settings --> < script type = "text/javascript" > $(function() { //$.noConflict(); $('#banner-example-1').paradigm( { width:960, // slider width height:380, // slider height thumbWidth:90, // thumbnail width thumbHeight:50, // thumbnail height thumbAmount:4, // number of thumbnails to show thumbSpaces:4, thumbPadding:4, parallaxX:500, parallaxY:10, captionParallaxX:-40, captionParallaxY:2, touchenabled:'on', // enable touch swipe shadow:'true', // show slider shadows timer:5 // number of seconds to show each slide }); }); </ script > <!-- DC Touchswipe Slider Start --> < div id = "banner-example-1" class = "light" > < ul > <!-- Slide 1 --> < li data-transition = "fade" >< img src = "dcodes/sliders/images/touchswipe/slide1.jpg" data-thumb = "dcodes/sliders/images/touchswipe/thumb1.jpg" data-thumb_bw = "dcodes/sliders/images/touchswipe/thumb1_bw.jpg" /> < div class = "creative_layer" > < div class = "caption_blue fadeup" style = "top:170px;left:50px;" >Welcome to TOUCHSWIPE</ div > < div class = "caption_black smallcap faderight" style = "top:213px;left:90px" >The highly customizable touch and swipe slider</ div > </ div > </ li > <!-- Slide 2 --> < li data-transition = "slide" >< img src = "dcodes/sliders/images/touchswipe/vimeo.jpg" data-thumb = "dcodes/sliders/images/touchswipe/thumb_vimeo.jpg" data-thumb_bw = "dcodes/sliders/images/touchswipe/thumb_vimeo_bw.jpg" /> < div class = "video_pradigm" > < div class = "video_paradigm_wrap" > < iframe class = "video_clip" src = "http://player.vimeo.com/video/4749536?title=0&byline=0&portrait=0" width = "534" height = "300" frameborder = "0" webkitAllowFullScreen allowFullScreen></ iframe > < h2 >Vimeo Video Support</ h2 > < p > Click play to play 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 = "#" >Visit Website</ a > < div id = "close" ></ div > </ div > </ div > < div class = "creative_layer" > < div class = "caption_blue fadeleft" style = "top:120px;left:625px;" >Vimeo</ div > < div class = "caption_white faderight" style = "top:120px;left:722px;" >Support</ div > < div class = "caption_black smallcap fadeup" style = "top:163px;left:625px;" >Click the play button</ div > </ div > </ li > <!-- Slide 3 --> < li data-transition = "slide" >< img src = "dcodes/sliders/images/touchswipe/slide2.jpg" data-thumb = "dcodes/sliders/images/touchswipe/thumb2.jpg" data-thumb_bw = "dcodes/sliders/images/touchswipe/thumb2_bw.jpg" /> < div class = "creative_layer" > < div class = "caption_green fadedown" style = "top:80px;left:450px;" >Some of TOUCHSWIPE's Options:</ div > < div class = "caption_black smallcap fadeleft" style = "top:123px;left:450px" >Image and thumbs fully resizable</ div > < div class = "caption_black smallcap fadeleft" style = "top:157px;left:450px" >Optional parallax effect</ div > < div class = "caption_black smallcap fadeleft" style = "top:191px;left:450px" >iPhone & Android touch enabled</ div > </ div > </ li > <!-- Slide 4 --> < li data-transition = "fade" >< img src = "dcodes/sliders/images/touchswipe/slide3.jpg" data-thumb = "dcodes/sliders/images/touchswipe/thumb3.jpg" data-thumb_bw = "dcodes/sliders/images/touchswipe/thumb3_bw.jpg" /> < div class = "creative_layer" > < div class = "caption_orange fadeup" style = "top:230px;left:120px;" >Captions can be positioned freely</ div > < div class = "caption_white fadedown" style = "top:230px;left:530px;" >< a href = "http://www.bing.com" target = "_blank" >Link: Bing Search</ a ></ div > </ div > </ li > <!-- Slide 5 --> < li data-transition = "fade" >< img src = "dcodes/sliders/images/touchswipe/youtube.jpg" data-thumb = "dcodes/sliders/images/touchswipe/thumb_youtube.jpg" data-thumb_bw = "dcodes/sliders/images/touchswipe/thumb_youtube_bw.jpg" /> < div class = "video_pradigm" > < div class = "video_paradigm_wrap" > < iframe class = "video_clip" src = "http://www.youtube.com/embed/FG0fTKAqZ5g?hd=1&wmode=opaque&autohide=1&showinfo=0" height = "300" width = "534" frameborder = "0" webkitAllowFullScreen allowFullScreen></ iframe > < h2 >Youtube Video Support</ h2 > < p > Click play to watch 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 = "#" >More Info</ a > < div id = "close" ></ div > </ div > </ div > < div class = "creative_layer" > < div class = "caption_red fadeleft" style = "top:120px;left:580px;" >< a href = "#" >YouTube</ a ></ div > < div class = "caption_white faderight" style = "top:120px;left:710px;" >Support</ div > </ div > </ li > </ ul > </ div > <!-- /banner-example-1 --> <!-- DC Touchswipe 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 | <!-- DC Panel Slider CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/css/panel/panel_slider.css" /> <!-- Edit panel_slider.css to define image urls --> <!-- DC Panel Slider Start --> < section class = "cr-container" > < input id = "select-img-1" name = "radio-set-1" type = "radio" class = "cr-selector-img-1" checked/> < label for = "select-img-1" class = "cr-label-img-1" >1</ label > < input id = "select-img-2" name = "radio-set-1" type = "radio" class = "cr-selector-img-2" /> < label for = "select-img-2" class = "cr-label-img-2" >2</ label > < input id = "select-img-3" name = "radio-set-1" type = "radio" class = "cr-selector-img-3" /> < label for = "select-img-3" class = "cr-label-img-3" >3</ label > < input id = "select-img-4" name = "radio-set-1" type = "radio" class = "cr-selector-img-4" /> < label for = "select-img-4" class = "cr-label-img-4" >4</ label > < div class = "clr" ></ div > < div class = "cr-bgimg" > < div > < span >Slice 1 - Image 1</ span > < span >Slice 1 - Image 2</ span > < span >Slice 1 - Image 3</ span > < span >Slice 1 - Image 4</ span > </ div > < div > < span >Slice 2 - Image 1</ span > < span >Slice 2 - Image 2</ span > < span >Slice 2 - Image 3</ span > < span >Slice 2 - Image 4</ span > </ div > < div > < span >Slice 3 - Image 1</ span > < span >Slice 3 - Image 2</ span > < span >Slice 3 - Image 3</ span > < span >Slice 3 - Image 4</ span > </ div > < div > < span >Slice 4 - Image 1</ span > < span >Slice 4 - Image 2</ span > < span >Slice 4 - Image 3</ span > < span >Slice 4 - Image 4</ span > </ div > </ div > <!-- Slide Captions --> < div class = "cr-titles" > < h3 >< span >dCodes</ span >< span >the ultimate html framework</ span ></ h3 > < h3 >< span >Amazing</ span >< span >artwork by sakimichan</ span ></ h3 > < h3 >< span >Vision</ span >< span >future innovations found today</ span ></ h3 > < h3 >< span >TemplateAccess</ span >< span >designs by team (ta)</ span ></ h3 > </ div > </ section > <!-- DC Panel Slider End --> < div class = "dc_clear" ></ div > <!-- line break/clear line --> |
© TemplateAccess