Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum augue et diam viverra hendrerit. Nullam adipiscing, lorem vitae semper posuere, risus velit molestie magna, nec vehicula ante quam a nisi.
Read more1 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 | <!-- Must place this section in <HEAD> section:start --> <!-- DC ZoomFly Slider CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/css/zoomfly/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 ZoomFly Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/js/zoomfly/jmpress.min.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/js/zoomfly/jquery.jmslideshow.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/js/zoomfly/modernizr.js" ></ script > < noscript > < style > .step { width: 100%; position: relative; } .step:not(.active) { opacity: 1; filter: alpha(opacity=99); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; } .step:not(.active) a.jms-link{ opacity: 1; margin-top: 40px; } </ style > </ noscript > <!-- Must place this section in <HEAD> section:end --> <!-- DC ZoomFly Slider Start --> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (strict enforce) --> < section id = "jms-slideshow" class = "jms-slideshow" > <!-- Slide 1 --> < div class = "step" data-color = "color-1" data-x = "4500" data-z = "1000" data-rotate-y = "45" > < div class = "jms-content" > < div class = "zoomfly_caption" >Super Sale!</ div > < div class = "zoomfly_p" >We're having a massive sale this week! Save < strong >20%</ strong > on most products!</ div > < a class = "jms-link" href = "#" >Read more</ a > </ div > < img src = "dcodes/sliders/images/zoomfly/1.png" /> </ div > <!-- Slide 2 --> < div class = "step" data-color = "color-2" data-y = "500" data-scale = "0.4" data-rotate-x = "30" > < div class = "jms-content" > < div class = "zoomfly_caption" >Fast Shipping</ div > < div class = "zoomfly_p" >Buy today and get it shipped immediately! Free delivery on orders over $50!</ div > < a class = "jms-link" href = "#" >Read more</ a > </ div > < img src = "dcodes/sliders/images/zoomfly/2.png" /> </ div > <!-- Slide 3 --> < div class = "step" data-color = "color-3" data-x = "2000" data-z = "3000" data-rotate = "170" > < div class = "jms-content" > < div class = "zoomfly_caption" >Worldwide Delivery</ div > < div class = "zoomfly_p" >We accept orders worldwide. Credit Card, Bank Deposit, Paypal Accepted.</ div > < a class = "jms-link" href = "#" >Read more</ a > </ div > < img src = "dcodes/sliders/images/zoomfly/3.png" /> </ div > <!-- Slide 4 --> < div class = "step" data-color = "color-4" data-x = "3000" data-scale = "0.4" data-rotate-x = "30" > < div class = "jms-content" > < div class = "zoomfly_caption" >24/7 Support</ div > < div class = "zoomfly_p" >Email & phone support whenever you need it. We're here 7 days a week!</ div > < a class = "jms-link" href = "#" >Read more</ a > </ div > < img src = "dcodes/sliders/images/zoomfly/4.png" /> </ div > <!-- Slide 5 --> < div class = "step" data-color = "color-5" data-x = "4500" data-z = "1000" data-rotate-y = "45" > < div class = "jms-content" > < div class = "zoomfly_caption" >Massive Selection</ div > < div class = "zoomfly_p" >Select from over 1500 items in stock now! Start shopping now...</ div > < a class = "jms-link" href = "#" >Read more</ a > </ div > < img src = "dcodes/sliders/images/zoomfly/5.png" /> </ div > </ section > </ div > <!-- DC ZoomFly Slider Settings --> < script type = "text/javascript" > $(function() { var jmpressOpts = { animation : { transitionDuration : '0.8s' } }; $( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, { autoplay : true, // auto play slider bgColorSpeed: '0.8s', arrows : true // show arrows })); }); </ script > <!-- DC ZoomFly 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 | <!-- DC Focused Slider CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/css/focused/focused-slider.css" /> <!-- DC Javascript Library --> < script type = "text/javascript" src = "dcodes/jquery.min.js" ></ script > <!-- jQuery Library (do not call twice on same page) --> <!-- DC Focused Slider JS --> < script src = "dcodes/sliders/js/focused/focused-slider.js" ></ script > <!-- DC Focused Slider Start --> < div id = "focus-slider" style = "width:980px; margin:0 auto; position:relative;" > <!-- define slider container width (strict enforce) --> < div > < ul > <!-- Slide 1 --> < li > < div style = "left:0; top:0; width:760px; height:380px;" >< a href = "#" >< img src = "dcodes/sliders/images/focused/a01.jpg" title = "Executive Dress $390" /></ a ></ div > < div style = "right:0; top:0; width:220px; height:140px;" >< a href = "#" >< img src = "dcodes/sliders/images/focused/a02.jpg" title = "Flow Dress $170" /></ a ></ div > < div style = "right:0; top:140px; width:220px; height:140px;" >< a href = "#" >< img src = "dcodes/sliders/images/focused/a03.jpg" title = "Business Shirt $89" /></ a ></ div > < div style = "right:0; bottom:0; width:220px; height:100px;" >< a href = "#" >< img src = "dcodes/sliders/images/focused/a04.jpg" title = "Combs $15" /></ a ></ div > </ li > <!-- Slide 2 --> < li > < div style = "left:0; top:0; width:980px; height:380px;" >< a href = "#" >< img src = "dcodes/sliders/images/focused/b01.jpg" title = "30% Off Super Sale!" /></ a ></ div > </ li > <!-- Slide 3 --> < li > < div style = "left:0; top:0; width:260px; height:210px;" >< a href = "#" >< img src = "dcodes/sliders/images/focused/c01.jpg" title = "Home Wear $75" /></ a ></ div > < div style = "left:260px; top:0; width:260px; height:210px;" >< a href = "#" >< img src = "dcodes/sliders/images/focused/c02.jpg" title = "Elegant Dress $195" /></ a ></ div > < div style = "left:0; top:210px; width:520px; height:170px;" >< a href = "#" >< img src = "dcodes/sliders/images/focused/c03.jpg" title = "10% Off All Dresses!" /></ a ></ div > < div style = "right:0; top:0; width:460px; height:380px;" >< a href = "#" >< img src = "dcodes/sliders/images/focused/c04.jpg" title = "Leopard Top $199" /></ a ></ div > </ li > <!-- Slide 4 --> < li > < div style = "left:0; top:0; width:980px; height:380px;" >< a href = "#" >< img src = "dcodes/sliders/images/focused/d01.jpg" title = "Massive Sale Ends This Saturday!" /></ a ></ div > </ li > </ ul > </ div > </ div > <!-- DC Focused 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 | <!-- DC Camera Slider CSS --> < link rel = "stylesheet" id = "camera-css" href = "dcodes/sliders/css/camera/camera.css" type = "text/css" media = "all" > <!-- 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 Camera Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/js/camera/jquery.mobile.customized.min.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/js/camera/jquery.easing.1.3.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/js/camera/camera.min.js" ></ script > <!-- DC Camera Slider Settings --> < script type = "text/javascript" > jQuery(function(){ jQuery('#camera_wrap_1').camera({ thumbnails: true, height: '400px', loader: 'pie', // bar,pie pieDiameter: 38, piePosition: "rightTop", time: 1500, // ms (1500 = 1.5 seconds) pagination: true }); }); </ script > <!-- DC Camera Slider Start --> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (strict enforce) --> < div class = "camera_wrap camera_azure_skin" id = "camera_wrap_1" > <!-- Slide 1 --> <!-- sample local image: <div data-thumb="dcodes/sliders/images/camera/100x75-thumb.jpg" data-src="dcodes/sliders/images/camera/1280x800-image.jpg"> --> < div data-thumb = "http://cdn.dcodes.net/p/100x75/ccc" data-src = "http://cdn.dcodes.net/p/1280x800/ccc" > < div class = "camera_caption fadeFromBottom" > Camera is a responsive/adaptive slideshow. < em >Try to resize the browser window</ em > </ div > </ div > <!-- Slide 2 --> < div data-thumb = "http://cdn.dcodes.net/p/100x75/999" data-src = "http://cdn.dcodes.net/p/1280x800/999" > < div class = "camera_caption fadeFromBottom" > It uses a light version of jQuery mobile, < em >navigate the slides by swiping with your fingers</ em > </ div > </ div > <!-- Slide 3 --> < div data-thumb = "http://cdn.dcodes.net/p/100x75/666" data-src = "http://cdn.dcodes.net/p/1280x800/666" > < div class = "camera_caption fadeFromBottom" > Camera slideshow provides many options < em >to customize your project</ em > as more as possible </ div > </ div > <!-- Slide 4 --> < div data-thumb = "http://cdn.dcodes.net/p/100x75/333" data-src = "http://cdn.dcodes.net/p/1280x800/333" > < div class = "camera_caption fadeFromBottom" > Different color skins and layouts available, < em >fullscreen ready too</ em > </ div > < div style = "position:absolute; top:80%; right:5%; background:#333; color:#fff; padding:5px; width:35%;" class = "fadeIn camera_effected" >This is an HTML element included in the transition effect</ div > </ div > </ div > <!-- /camera_wrap --> </ div > <!-- DC Camera Slider End --> < div class = "dc_clear" ></ div > <!-- line break/clear line --> |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum augue et diam viverra hendrerit. Nullam adipiscing, lorem vitae semper posuere, risus velit molestie magna, nec vehicula ante quam a nisi.
Read more1 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 | <!-- DC Slidorion Slider CSS --> < link rel = "stylesheet" href = "dcodes/sliders/css/slidorion/slidorion.css" /> <!-- DC Javascript Library --> < script type = "text/javascript" src = "dcodes/jquery.min.js" ></ script > <!-- jQuery Library (do not call twice on same page) --> <!-- DC Slidorion Slider JS --> < script src = "dcodes/sliders/js/slidorion/jquery.slidorion.min.js" ></ script > <!-- DC Slidorion Slider Settings --> < script type = "text/javascript" > $(document).ready(function(){ $('#slidorion').slidorion(); $('.effects').hide(); $('.more-effects').click(function(e){ $('.effects').slideToggle(); e.preventDefault(); }); }); </ script > <!-- DC Slidorion Slider Start --> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (strict enforce) --> < div id = "slidorion" > < div id = "slider" > <!-- Slide 1 --> < div class = "slider-image" rel = "section1" > </ div > <!-- Slide 2 --> < div class = "slider-image" rel = "section2" > </ div > <!-- Slide 3 --> < div class = "slider-image" rel = "section3" > </ div > </ div > <!-- /slider --> < div id = "accordion" > <!-- Slide 1 --> < div class = "header" >< a class = "slider-link" rel = "section1" >Visionary</ a ></ div > < div class = "content" > < p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum augue et diam viverra hendrerit. Nullam adipiscing, lorem vitae semper posuere, risus velit molestie magna, nec vehicula ante quam a nisi.</ p > < a href = "#" >Read more</ a > </ div > <!-- Slide 2 --> < div class = "header" >< a class = "slider-link" rel = "section2" >Persistence</ a ></ div > < div class = "content" > < p >Sed rutrum cursus dui, eu porttitor augue rhoncus suscipit. Aenean eu diam pretium urna ultrices molestie. Donec faucibus eros id risus blandit congue. Quisque laoreet metus in mi aliquet a posuere felis porttitor.</ p > < a href = "#" >Read more</ a > </ div > <!-- Slide 3 --> < div class = "header" >< a class = "slider-link" rel = "section3" >Integrity</ a ></ div > < div class = "content" > < p >Duis eu faucibus justo. Donec arcu mauris, iaculis sollicitudin eleifend sed, sagittis eu elit. Sed rutrum rutrum vulputate. Nullam a nulla in elit pulvinar vulputate.</ p > < a href = "#" >Read more</ a > </ div > </ div > <!-- /accordion --> </ div > <!-- /slidorion --> </ div > <!-- DC Slidorion 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 | <!-- DC PhotoGrid CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/css/photogrid/jquery.photogrid.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 PhotoGrid JS --> < script type = "text/javascript" src = "dcodes/sliders/js/photogrid/jquery.easing.1.3.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/js/photogrid/jquery.photogrid.js" ></ script > <!-- DC PhotoGrid Start --> < div style = "width:980px; margin:0 auto; padding:10px; position:relative;" > <!-- define slider container width (strict enforce) --> < div id = "hs_container" class = "hs_container" > <!-- sample local image: <img class="hs_visible" src="dcodes/sliders/images/photogrid/471x334-thumb.jpg" width="471" height="334" /> --> <!-- Slide 1 --> < div class = "hs_area hs_area1" > </ div > <!-- Slide 2 --> < div class = "hs_area hs_area2" > </ div > <!-- Slide 3 --> < div class = "hs_area hs_area3" > </ div > <!-- Slide 4 --> < div class = "hs_area hs_area4" > </ div > <!-- Slide 5 --> < div class = "hs_area hs_area5" > </ div > </ div > <!-- /hs_container --> </ div > <!-- DC PhotoGrid End --> < div class = "dc_clear" ></ div > <!-- line break/clear line --> |
© TemplateAccess