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 | <!-- 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 class = "responsive-grid-container" > < section class = "responsive-grid-main" > < div id = "ri-grid" class = "ri-grid ri-grid-size-2" > < 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 > <!-- 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 : 3, // number of tile rows to show columns : 13, // number of tile columns to show animType : 'fadeInOut', // effects: random, fadeInOut, showHide, slideLeft, slideRight, slideTop, slideBottom, rotateLeft, rotateRight, rotateTop, rotateBottom, scale, rotate3d, rotateLeftScale, rotateTopScale animSpeed : 700, // ms seconds before next image switch (700 = 0.7 seconds) interval : 600, step : 1, w320 : { rows : 3, columns : 4 }, w240 : { rows : 3, columns : 4 } } ); }); </ script > |
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 | <!-- DC iOS Slider CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/css/ios/dc_ios.css" /> <!-- Define image urls in dc_ios.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 iOS Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/js/ios/jquery.iosslider.js" ></ script > <!-- DC iOS Slider Settings --> < script type = "text/javascript" > $(document).ready(function() { $('.iosSlider').iosSlider({ desktopClickDrag: true, snapToChildren: true, navSlideSelector: '.iossliderContainer .slideSelectors .item', onSlideComplete: slideComplete, onSliderLoaded: sliderLoaded, onSlideChange: slideChange, autoSlide: true, // auto slide on load scrollbar: true, // show thin scrollbars scrollbarContainer: '.iossliderContainer .scrollbarContainer', scrollbarMargin: '0', scrollbarBorderRadius: '0' }); }); function slideChange(args) { $('.iossliderContainer .slideSelectors .item').removeClass('selected'); $('.iossliderContainer .slideSelectors .item:eq(' + args.currentSlideNumber + ')').addClass('selected'); } function slideComplete(args) { $(args.sliderObject).find('.text1, .text2').attr('style', ''); $(args.currentSlideObject).find('.text1').animate({ right: '150px', opacity: '0.8' }, 400, 'easeOutQuint'); $(args.currentSlideObject).find('.text2').delay(200).animate({ right: '100px', opacity: '0.8' }, 400, 'easeOutQuint'); } function sliderLoaded(args) { slideComplete(args); slideChange(args); } </ script > <!-- DC iOS Slider Start --> < div style = "width:100%; margin:0 auto; padding:0px; position:relative;" > <!-- define slider container width (strict enforce) --> < div class = "fluidHeight" > < div class = "iossliderContainer" > < div class = "iosSlider" > < div class = "slider" > <!-- Slide 1 --> < div class = "item item1" > < div class = "inner" > < div class = "selectorShadow" ></ div > < div class = "text1" >< span >Touch Me.</ span ></ div > < div class = "text2" >< span >Hardware accelerated using< br />CSS3 for supported iOS,< br />Android and WebKit</ span ></ div > </ div > </ div > <!-- Slide 2 --> < div class = "item item2" > < div class = "inner" > < div class = "selectorShadow" ></ div > < div class = "text1" >< span >Responsive.</ span ></ div > < div class = "text2" >< span >Respond to change in browser< br />width and adjust automatically</ span ></ div > </ div > </ div > <!-- Slide 3 --> < div class = "item item3" > < div class = "inner" > < div class = "selectorShadow" ></ div > < div class = "text1" >< span >Flexible.</ span ></ div > < div class = "text2" >< span >Run multiple sliders on< br />the same web page</ span ></ div > </ div > </ div > <!-- Slide 4 --> < div class = "item item4" > < div class = "inner" > < div class = "selectorShadow" ></ div > < div class = "text1" >< span >Cross-platform.</ span ></ div > < div class = "text2" >< span >Support a wide variety of browsers< br />to maximize your user base</ span ></ div > </ div > </ div > <!-- Slide 5 --> < div class = "item item5" > < div class = "inner" > < div class = "selectorShadow" ></ div > < div class = "text1" >< span >Customize.</ span ></ div > < div class = "text2" >< span >Set momentum, elasticity,< br />scrollbars and more...</ span ></ div > </ div > </ div > </ div > </ div > <!-- /iosSlider --> <!-- bullet selectors --> < div class = "slideSelectors" > < div class = "item selected" ></ div > < div class = "item" ></ div > < div class = "item" ></ div > < div class = "item" ></ div > < div class = "item" ></ div > </ div > <!-- horizontal scrollbars --> < div class = "scrollbarContainer" ></ div > </ div > <!-- /iossliderContainer --> </ div > <!-- /fluidHeight --> </ div > <!-- DC iOS 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 | <!-- DC Parallax Slider CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/css/parallax/dc_parallax.css" /> <!-- DC Javascript Library --> < script type = "text/javascript" src = "dcodes/jquery.min.js" ></ script > <!-- jQuery Library (do not call twice on same page) --> <!-- DC Parallax Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/js/parallax/modernizr.custom.js" ></ script > < script type = "text/javascript" src = "dcodes/sliders/js/parallax/jquery.cslider.js" ></ script > <!-- DC Parallax Slider Settings --> < script type = "text/javascript" > $(function() { $('#da-slider').cslider({ autoplay : true, // auto play slider on load bgincrement : 450 }); }); </ script > <!-- DC Parallax Slider Start --> < div style = "width:100%; margin:0 auto; padding:0px; position:relative;" > <!-- define slider container width (strict enforce) --> < div id = "da-slider" class = "da-slider" > <!-- Slide 1 --> < div class = "da-slide" > < h2 >Super Sale!</ h2 > < p >We're having a massive sale this week! Items up to 30% off. Grab a deal while stocks last! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor interdum malesuada. In a ligula arcu, vel tempus elit. </ p > < a href = "#" class = "da-link" >Read more</ a > < div class = "da-img" >< img src = "dcodes/sliders/images/parallax/1.png" alt = "image01" /></ div > </ div > <!-- Slide 2 --> < div class = "da-slide" > < h2 >Fast Shipping</ h2 > < p >Buy today and get it shipped immediately! Free delivery on orders over $50! Mauris vehicula molestie vestibulum. Aliquam venenatis, neque vitae lacinia malesuada, ante turpis tempor metus, id egestas dolor enim in dui.</ p > < a href = "#" class = "da-link" >Read more</ a > < div class = "da-img" >< img src = "dcodes/sliders/images/parallax/2.png" alt = "image01" /></ div > </ div > <!-- Slide 3 --> < div class = "da-slide" > < h2 >Worldwide Delivery</ h2 > < p >We accept orders worldwide. Credit Card, Bank Deposit, Paypal. Accepted Morbi pulvinar aliquam urna vel facilisis. Sed sit amet lorem magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere.</ p > < a href = "#" class = "da-link" >Read more</ a > < div class = "da-img" >< img src = "dcodes/sliders/images/parallax/3.png" alt = "image01" /></ div > </ div > <!-- Slide 3 --> < div class = "da-slide" > < h2 >24/7 Support</ h2 > < p >Email & phone support whenever you need it. We're here 7 days a week! Sed ullamcorper odio commodo velit rutrum ut aliquam velit volutpat. Vestibulum hendrerit tristique ornare. Nam vitae libero sapien.</ p > < a href = "#" class = "da-link" >Read more</ a > < div class = "da-img" >< img src = "dcodes/sliders/images/parallax/4.png" alt = "image01" /></ div > </ div > <!-- Slide 4 --> <!-- navigation controls --> < nav class = "da-arrows" > < span class = "da-arrows-prev" ></ span > < span class = "da-arrows-next" ></ span > </ nav > </ div > <!-- /da-slider --> </ div > <!-- DC Parallax 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 | <!-- DC Layered Slider CSS --> < link rel = "stylesheet" type = "text/css" href = "dcodes/sliders/css/layered/layered-slider.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 Layered Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/js/layered/layered-slider.js" ></ script > <!-- DC Layered Slider Start --> < div style = "width:100%; margin:0 auto; padding:0px; position:relative;" > <!-- define slider container width (strict enforce) --> < div id = "lcontainer" class = "layered-container" > < div class = "layered-bg" > <!-- load transparent background image layers --> < div class = "bg1" ></ div > < div class = "bg2" ></ div > < div class = "bg3" ></ div > </ div > < div class = "lloading" >Loading images...</ div > < div class = "lslider_wrapper" > < ul class = "lslider" > <!-- sample local image <!-- <li><img src="dcodes/sliders/images/layered/820x410-image.jpg" width="820" height="410" /></li> --> </ ul > < div class = "navigation" > < span class = "lnext" ></ span > < span class = "lprev" ></ span > </ div > < ul class = "thumbnails" > <!-- sample local image <!-- <li><img src="dcodes/sliders/images/layered/thumbs/93x49-thumb.jpg" width="93" height="49" /></li> --> </ ul > </ div > </ div > <!-- /lcontainer --> </ div > <!-- DC Layered Slider End --> <!-- DC Layered Slider Settings --> < script type = "text/javascript" > $(function() { var $container = $('#lcontainer'); $container.parallaxSlider(); }); </ script > < 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 | <!-- DC Javascript Library --> < script type = "text/javascript" src = "dcodes/jquery.min.js" ></ script > <!-- jQuery Library (do not call twice on same page) --> <!-- DC MB Slider JS --> < script type = "text/javascript" src = "dcodes/sliders/js/mb/mb.js" charset = "utf-8" ></ script > < script type = "text/javascript" src = "dcodes/sliders/js/mb/mb-slider.js" ></ script > <!-- DC MB Slider CSS --> < link type = "text/css" href = "dcodes/sliders/css/mb/mb-slider.css" media = "screen" charset = "utf-8" rel = "stylesheet" /> <!-- PrettyPhoto Lightbox --> < link rel = "stylesheet" href = "dcodes/prettyPhoto/css/prettyPhoto.css" type = "text/css" media = "screen" title = "prettyPhoto main stylesheet" charset = "utf-8" /> < script src = "dcodes/prettyPhoto/js/jquery.prettyPhoto.js" type = "text/javascript" charset = "utf-8" ></ script > <!-- Google Fonts --> <!-- DC MB Slider Starts --> < div style = "width:100%; margin:0 auto; padding:0px; position:relative;" > <!-- define slider container width (strict enforce) --> < div id = "productshowcase-container" > <!-- Slide Items --> < div id = "slider-one" > < div > < img src = "dcodes/sliders/images/mb/img1.png" alt = "" /> < p >Blue Shirt< br /> < a href = "dcodes/sliders/images/mb/img1-detail.png" rel = "prettyPhoto[gallery1]" title = "Description (optional)" >details</ a > </ p > </ div > < div > < img src = "dcodes/sliders/images/mb/img2.png" alt = "" /> < p >Teal Shirt< br /> < a href = "dcodes/sliders/images/mb/img2-detail.png" rel = "prettyPhoto[gallery1]" title = "Description (optional)" >details</ a > </ p > </ div > < div > < img src = "dcodes/sliders/images/mb/img3.png" alt = "" /> < p >Red Shirt< br /> < a href = "dcodes/sliders/images/mb/img3-detail.png" rel = "prettyPhoto[gallery1]" title = "Description (optional)" >details</ a > </ p > </ div > < div > < img src = "dcodes/sliders/images/mb/img4.png" alt = "" /> < p >Black Shirt< br /> < a href = "dcodes/sliders/images/mb/img4-detail.png" rel = "prettyPhoto[gallery1]" title = "Description (optional)" >details</ a > </ p > </ div > < div > < img src = "dcodes/sliders/images/mb/img5.png" alt = "" /> < p >White Shirt< br /> < a href = "dcodes/sliders/images/mb/img5-detail.png" rel = "prettyPhoto[gallery1]" title = "Description (optional)" >details</ a > </ p > </ div > < div > < img src = "dcodes/sliders/images/mb/img6.png" alt = "" /> < p >Green Shirt< br /> < a href = "dcodes/sliders/images/mb/img6-detail.png" rel = "prettyPhoto[gallery1]" title = "Description (optional)" >details</ a > </ p > </ div > < div > < img src = "dcodes/sliders/images/mb/img7.png" alt = "" /> < p >Light Blue Shirt< br /> < a href = "dcodes/sliders/images/mb/img7-detail.png" rel = "prettyPhoto[gallery1]" title = "Description (optional)" >details</ a > </ p > </ div > < div > < img src = "dcodes/sliders/images/mb/img8.png" alt = "" /> < p >Yellow Shirt< br /> < a href = "dcodes/sliders/images/mb/img8-detail.png" rel = "prettyPhoto[gallery1]" title = "Description (optional)" >details</ a > </ p > </ div > < div > < img src = "dcodes/sliders/images/mb/img9.png" alt = "" /> < p >Gray Suit< br /> < a href = "dcodes/sliders/images/mb/img9-detail.png" rel = "prettyPhoto[gallery1]" title = "Description (optional)" >details</ a > </ p > </ div > < div > < img src = "dcodes/sliders/images/mb/img10.png" alt = "" /> < p >Black Suit< br /> < a href = "dcodes/sliders/images/mb/img10-detail.png" rel = "prettyPhoto[gallery1]" title = "Description (optional)" >details</ a > </ p > </ div > </ div > <!-- /Slide Items --> </ div > <!-- /mbslider-container --> </ div > <!-- DC MB Slider Ends --> <!-- required for prettyphoto lightbox --> < script type = "text/javascript" charset = "utf-8" > $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'dark_square',slideshow:8000, autoplay_slideshow: false, social_tools: false, show_title: true, allow_resize: true}); }); </ script > <!-- required for prettyphoto lightbox --> < div class = "dc_clear" ></ div > <!-- line break/clear line --> |
© TemplateAccess