|
|
| Line 1: |
Line 1: |
| - | {{Team:TP_CC-SanDiego/ContentFix}}
| |
| - | <html>
| |
| - | <head>
| |
| - | <meta charset="utf-8">
| |
| - | <title>iGEM San Diego</title>
| |
| - | <script src="http://code.jquery.com/jquery-2.1.1.min.js" type=></script>
| |
| - | <script>
| |
| - | $(function() {
| |
| - | $('a[href*=#]:not([href=#])').click(function() {
| |
| - | if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
| |
| - | var target = $(this.hash);
| |
| - | target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
| |
| - | if (target.length) {
| |
| - | $('html,body').animate({
| |
| - | scrollTop: target.offset().top
| |
| - | }, 1000);
| |
| - | return false;
| |
| - | }
| |
| - | }
| |
| - | });
| |
| - | });
| |
| - | </script>
| |
| | | | |
| - | <!--<script>
| |
| - | $(document).ready(function() {
| |
| - | var stickyNavTop = $('.nav').offset().top;
| |
| - |
| |
| - | var stickyNav = function(){
| |
| - | var scrollTop = $(window).scrollTop();
| |
| - |
| |
| - | if (scrollTop > stickyNavTop) {
| |
| - | $('.nav').addClass('sticky');
| |
| - | } else {
| |
| - | $('.nav').removeClass('sticky');
| |
| - | }
| |
| - | };
| |
| - |
| |
| - | stickyNav();
| |
| - |
| |
| - | $(window).scroll(function() {
| |
| - | stickyNav();
| |
| - | });
| |
| - | });
| |
| - | </script>-->
| |
| - | <style>
| |
| - | #content{
| |
| - | width: 100%;
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | background-color:transparent;
| |
| - | border: none;
| |
| - | }
| |
| - |
| |
| - | body{
| |
| - | width: 100%;
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | background-color:none;
| |
| - | border: none;
| |
| - | }
| |
| - | #globalwrapper{
| |
| - | width: 100%;
| |
| - | height: 100%;
| |
| - | background: none;
| |
| - | }
| |
| - |
| |
| - | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
| |
| - | display:none;}
| |
| - | #top-section {
| |
| - | border: none;
| |
| - | height: 0px;}
| |
| - | #content {
| |
| - | border: none;}
| |
| - | /* Removes "teams" from the menubar */
| |
| - | #menubar > ul > li:last-child {
| |
| - | display: none;}
| |
| - | /* Resizes the menubar to fik the links (default is 400px) */
| |
| - | #menubar {
| |
| - | width: auto;}
| |
| - | body {
| |
| - | margin: 10px 0 0 0;
| |
| - | padding: 0;}
| |
| - | #top-section {
| |
| - | width: 965px;
| |
| - | height: 0;
| |
| - | margin: 0 auto;
| |
| - | padding: 0;
| |
| - | border: none;}
| |
| - | #menubar {
| |
| - | font-size: 65%;
| |
| - | top: -14px;}
| |
| - | .left-menu:hover {
| |
| - | background-color: transparent;}
| |
| - | #menubar li a {
| |
| - | background-color: transparent;}
| |
| - | #menubar:hover {
| |
| - | color: white;}
| |
| - | #menubar li a {
| |
| - | color: transparent;}
| |
| - | #menubar:hover li a {
| |
| - | color: white;}
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | /* General Demo Style */
| |
| - | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
| |
| - |
| |
| - | @font-face {
| |
| - | font-family: 'AnimalsNormal';
| |
| - | src: url('fonts/animals-webfont.eot');
| |
| - | src: url('fonts/animals-webfont.eot?#iefix') format('embedded-opentype'),
| |
| - | url('fonts/animals-webfont.woff') format('woff'),
| |
| - | url('fonts/animals-webfont.ttf') format('truetype'),
| |
| - | url('fonts/animals-webfont.svg#AnimalsNormal') format('svg');
| |
| - | font-weight: normal;
| |
| - | font-style: normal;
| |
| - | }
| |
| - |
| |
| - | html { height: 100%; }
| |
| - |
| |
| - | *,
| |
| - | *:after,
| |
| - | *:before {
| |
| - | -webkit-box-sizing: border-box;
| |
| - | -moz-box-sizing: border-box;
| |
| - | box-sizing: border-box;
| |
| - | padding: 0;
| |
| - | margin: 0;
| |
| - | }
| |
| - |
| |
| - | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
| |
| - | .clearfix:after {
| |
| - | content: "";
| |
| - | display: table;
| |
| - | clear: both;
| |
| - | }
| |
| - |
| |
| - | body {
| |
| - | font-family: 'Lato', Calibri, Arial, sans-serif;
| |
| - | background: #fff;
| |
| - | font-weight: 300;
| |
| - | font-size: 15px;
| |
| - | color: #333;
| |
| - | -webkit-font-smoothing: antialiased;
| |
| - | }
| |
| - |
| |
| - | a {
| |
| - | color: #555;
| |
| - | text-decoration: none;
| |
| - | }
| |
| - |
| |
| - | .container {
| |
| - | width: 100%;
| |
| - | position: relative;
| |
| - | }
| |
| - |
| |
| - | .container.demo-1 {
| |
| - | height: 100%;
| |
| - | position: absolute;
| |
| - | }
| |
| - |
| |
| - | .clr {
| |
| - | clear: both;
| |
| - | padding: 0;
| |
| - | height: 0;
| |
| - | margin: 0;
| |
| - | }
| |
| - |
| |
| - | .main {
| |
| - | width: 90%;
| |
| - | margin: 0 auto;
| |
| - | position: relative;
| |
| - | }
| |
| - |
| |
| - | .container > header,
| |
| - | .content-wrapper {
| |
| - | padding: 30px;
| |
| - | width: 80%;
| |
| - | max-width: 960px;
| |
| - | margin: 0 auto;
| |
| - | }
| |
| - |
| |
| - | .content-wrapper p{
| |
| - | padding-top: 30px;
| |
| - | line-height: 26px;
| |
| - | }
| |
| - |
| |
| - | .container > header h1 {
| |
| - | font-size: 34px;
| |
| - | line-height: 38px;
| |
| - | margin: 0;
| |
| - | font-weight: 700;
| |
| - | color: #333;
| |
| - | float: left;
| |
| - | }
| |
| - |
| |
| - | .container > header h1 span {
| |
| - | display: block;
| |
| - | font-size: 20px;
| |
| - | font-weight: 300;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* Header Style */
| |
| - | .codrops-top {
| |
| - | line-height: 24px;
| |
| - | font-size: 11px;
| |
| - | background: #fff;
| |
| - | background: rgba(255, 255, 255, 0.8);
| |
| - | text-transform: uppercase;
| |
| - | z-index: 9999;
| |
| - | position: relative;
| |
| - | font-family: Cambria, Georgia, serif;
| |
| - | box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
| |
| - | }
| |
| - |
| |
| - | .codrops-top a {
| |
| - | padding: 0px 10px;
| |
| - | letter-spacing: 1px;
| |
| - | color: #333;
| |
| - | display: inline-block;
| |
| - | }
| |
| - |
| |
| - | .codrops-top a:hover {
| |
| - | background: rgba(255,255,255,0.6);
| |
| - | }
| |
| - |
| |
| - | .codrops-top span.right {
| |
| - | float: right;
| |
| - | }
| |
| - |
| |
| - | .codrops-top span.right a {
| |
| - | float: left;
| |
| - | display: block;
| |
| - | }
| |
| - |
| |
| - | /* Demo Buttons Style */
| |
| - | .codrops-demos {
| |
| - | float: right;
| |
| - | padding-top: 10px;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .codrops-demos {
| |
| - | position: absolute;
| |
| - | z-index: 2000;
| |
| - | top: 30px;
| |
| - | left: 30px;
| |
| - | }
| |
| - |
| |
| - | .codrops-demos a {
| |
| - | display: inline-block;
| |
| - | margin: 10px;
| |
| - | color: #333;
| |
| - | font-weight: 700;
| |
| - | line-height: 30px;
| |
| - | border-bottom: 4px solid transparent;
| |
| - | }
| |
| - |
| |
| - | .codrops-demos a:hover {
| |
| - | color: #883d59;
| |
| - | border-color: #883d59;
| |
| - | }
| |
| - |
| |
| - | .codrops-demos a.current-demo,
| |
| - | .codrops-demos a.current-demo:hover {
| |
| - | color: #aaa;
| |
| - | border-color: #aaa;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | .sl-slider-wrapper {
| |
| - | width: 800px;
| |
| - | height: 400px;
| |
| - | margin: 0 auto;
| |
| - | position: relative;
| |
| - | overflow: hidden;
| |
| - | }
| |
| - |
| |
| - | .sl-slider {
| |
| - | position: absolute;
| |
| - | top: 0;
| |
| - | left: 0;
| |
| - | }
| |
| - |
| |
| - | /* Slide wrapper and slides */
| |
| - |
| |
| - | .sl-slide,
| |
| - | .sl-slides-wrapper,
| |
| - | .sl-slide-inner {
| |
| - | position: absolute;
| |
| - | width: 100%;
| |
| - | height: 100%;
| |
| - | top: 0;
| |
| - | left: 0;
| |
| - | }
| |
| - |
| |
| - | .sl-slide {
| |
| - | z-index: 1;
| |
| - | }
| |
| - |
| |
| - | /* The duplicate parts/slices */
| |
| - |
| |
| - | .sl-content-slice {
| |
| - | overflow: hidden;
| |
| - | position: absolute;
| |
| - | -webkit-box-sizing: content-box;
| |
| - | -moz-box-sizing: content-box;
| |
| - | box-sizing: content-box;
| |
| - | background: #fff;
| |
| - | -webkit-backface-visibility: hidden;
| |
| - | -moz-backface-visibility: hidden;
| |
| - | -o-backface-visibility: hidden;
| |
| - | -ms-backface-visibility: hidden;
| |
| - | backface-visibility: hidden;
| |
| - | opacity : 1;
| |
| - | }
| |
| - |
| |
| - | /* Horizontal slice */
| |
| - |
| |
| - | .sl-slide-horizontal .sl-content-slice {
| |
| - | width: 100%;
| |
| - | height: 50%;
| |
| - | left: -200px;
| |
| - | -webkit-transform: translateY(0%) scale(1);
| |
| - | -moz-transform: translateY(0%) scale(1);
| |
| - | -o-transform: translateY(0%) scale(1);
| |
| - | -ms-transform: translateY(0%) scale(1);
| |
| - | transform: translateY(0%) scale(1);
| |
| - | }
| |
| - |
| |
| - | .sl-slide-horizontal .sl-content-slice:first-child {
| |
| - | top: -200px;
| |
| - | padding: 200px 200px 0px 200px;
| |
| - | }
| |
| - |
| |
| - | .sl-slide-horizontal .sl-content-slice:nth-child(2) {
| |
| - | top: 50%;
| |
| - | padding: 0px 200px 200px 200px;
| |
| - | }
| |
| - |
| |
| - | /* Vertical slice */
| |
| - |
| |
| - | .sl-slide-vertical .sl-content-slice {
| |
| - | width: 50%;
| |
| - | height: 100%;
| |
| - | top: -200px;
| |
| - | -webkit-transform: translateX(0%) scale(1);
| |
| - | -moz-transform: translateX(0%) scale(1);
| |
| - | -o-transform: translateX(0%) scale(1);
| |
| - | -ms-transform: translateX(0%) scale(1);
| |
| - | transform: translateX(0%) scale(1);
| |
| - | }
| |
| - |
| |
| - | .sl-slide-vertical .sl-content-slice:first-child {
| |
| - | left: -200px;
| |
| - | padding: 200px 0px 200px 200px;
| |
| - | }
| |
| - |
| |
| - | .sl-slide-vertical .sl-content-slice:nth-child(2) {
| |
| - | left: 50%;
| |
| - | padding: 200px 200px 200px 0px;
| |
| - | }
| |
| - |
| |
| - | /* Content wrapper */
| |
| - | /* Width and height is set dynamically */
| |
| - | .sl-content-wrapper {
| |
| - | position: absolute;
| |
| - | }
| |
| - |
| |
| - | .sl-content {
| |
| - | width: 100%;
| |
| - | height: 100%;
| |
| - | background: #fff;
| |
| - | }
| |
| - |
| |
| - | /* Default styles for background colors */
| |
| - | .sl-slide-horizontal .sl-slide-inner {
| |
| - | background: #ddd;
| |
| - | }
| |
| - |
| |
| - | .sl-slide-vertical .sl-slide-inner {
| |
| - | background: #ccc;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .sl-slider-wrapper {
| |
| - | position: absolute;
| |
| - | width: 100%;
| |
| - | height: 100%;
| |
| - | top: 0;
| |
| - | left: 0;
| |
| - | }
| |
| - |
| |
| - | .demo-2 .sl-slider-wrapper {
| |
| - | width: 100%;
| |
| - | height: 600px;
| |
| - | overflow: hidden;
| |
| - | position: relative;
| |
| - | }
| |
| - |
| |
| - | .demo-2 .sl-slider h2,
| |
| - | .demo-2 .sl-slider blockquote {
| |
| - | padding: 100px 30px 10px 30px;
| |
| - | width: 80%;
| |
| - | max-width: 960px;
| |
| - | color: #fff;
| |
| - | margin: 0 auto;
| |
| - | position: relative;
| |
| - | z-index: 100;
| |
| - | }
| |
| - |
| |
| - | .demo-2 .sl-slider h2 {
| |
| - | font-size: 100px;
| |
| - | text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
| |
| - | }
| |
| - |
| |
| - | .demo-2 .sl-slider blockquote {
| |
| - | font-size: 28px;
| |
| - | padding-top: 10px;
| |
| - | font-weight: 300;
| |
| - | text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
| |
| - | }
| |
| - |
| |
| - | .demo-2 .sl-slider blockquote cite {
| |
| - | font-size: 16px;
| |
| - | font-weight: 700;
| |
| - | font-style: normal;
| |
| - | text-transform: uppercase;
| |
| - | letter-spacing: 5px;
| |
| - | padding-top: 30px;
| |
| - | display: inline-block;
| |
| - | }
| |
| - |
| |
| - | .demo-2 .bg-img {
| |
| - | padding: 200px;
| |
| - | -webkit-box-sizing: content-box;
| |
| - | -moz-box-sizing: content-box;
| |
| - | box-sizing: content-box;
| |
| - | position: absolute;
| |
| - | top: -200px;
| |
| - | left: -200px;
| |
| - | width: 100%;
| |
| - | height: 100%;
| |
| - | -webkit-background-size: cover;
| |
| - | -moz-background-size: cover;
| |
| - | background-size: cover;
| |
| - | background-position: center center;
| |
| - | }
| |
| - |
| |
| - | /* Custom navigation arrows */
| |
| - |
| |
| - | .nav-arrows span {
| |
| - | position: absolute;
| |
| - | z-index: 2000;
| |
| - | top: 50%;
| |
| - | width: 40px;
| |
| - | height: 40px;
| |
| - | border: 8px solid #ddd;
| |
| - | border: 8px solid rgba(150,150,150,0.4);
| |
| - | text-indent: -90000px;
| |
| - | margin-top: -40px;
| |
| - | cursor: pointer;
| |
| - |
| |
| - | -webkit-transform: rotate(45deg);
| |
| - | -moz-transform: rotate(45deg);
| |
| - | -o-transform: rotate(45deg);
| |
| - | -ms-transform: rotate(45deg);
| |
| - | transform: rotate(45deg);
| |
| - | }
| |
| - |
| |
| - | .nav-arrows span:hover {
| |
| - | border-color: rgba(150,150,150,0.9);
| |
| - | }
| |
| - |
| |
| - | .nav-arrows span.nav-arrow-prev {
| |
| - | left: 5%;
| |
| - | border-right: none;
| |
| - | border-top: none;
| |
| - | }
| |
| - |
| |
| - | .nav-arrows span.nav-arrow-next {
| |
| - | right: 5%;
| |
| - | border-left: none;
| |
| - | border-bottom: none;
| |
| - | }
| |
| - |
| |
| - | /* Custom navigation dots */
| |
| - |
| |
| - | .nav-dots {
| |
| - | text-align: center;
| |
| - | position: absolute;
| |
| - | bottom: 2%;
| |
| - | height: 30px;
| |
| - | width: 100%;
| |
| - | left: 0;
| |
| - | z-index: 1000;
| |
| - | }
| |
| - |
| |
| - | .nav-dots span {
| |
| - | display: inline-block;
| |
| - | position: relative;
| |
| - | width: 16px;
| |
| - | height: 16px;
| |
| - | border-radius: 50%;
| |
| - | margin: 3px;
| |
| - | background: #ddd;
| |
| - | background: rgba(150,150,150,0.4);
| |
| - | cursor: pointer;
| |
| - | box-shadow:
| |
| - | 0 1px 1px rgba(255,255,255,0.4),
| |
| - | inset 0 1px 1px rgba(0,0,0,0.1);
| |
| - | }
| |
| - |
| |
| - | .demo-2 .nav-dots span {
| |
| - | background: rgba(150,150,150,0.1);
| |
| - | margin: 6px;
| |
| - | -webkit-transition: all 0.2s;
| |
| - | -moz-transition: all 0.2s;
| |
| - | -ms-transition: all 0.2s;
| |
| - | -o-transition: all 0.2s;
| |
| - | transition: all 0.2s;
| |
| - | box-shadow:
| |
| - | 0 1px 1px rgba(255,255,255,0.4),
| |
| - | inset 0 1px 1px rgba(0,0,0,0.1),
| |
| - | 0 0 0 2px rgba(255,255,255,0.5);
| |
| - | }
| |
| - |
| |
| - | .demo-2 .nav-dots span.nav-dot-current,
| |
| - | .demo-2 .nav-dots span:hover {
| |
| - | box-shadow:
| |
| - | 0 1px 1px rgba(255,255,255,0.4),
| |
| - | inset 0 1px 1px rgba(0,0,0,0.1),
| |
| - | 0 0 0 5px rgba(255,255,255,0.5);
| |
| - | }
| |
| - |
| |
| - | .nav-dots span.nav-dot-current:after {
| |
| - | content: "";
| |
| - | position: absolute;
| |
| - | width: 10px;
| |
| - | height: 10px;
| |
| - | top: 3px;
| |
| - | left: 3px;
| |
| - | border-radius: 50%;
| |
| - | background: rgba(255,255,255,0.8);
| |
| - | }
| |
| - |
| |
| - | /* Content elements */
| |
| - |
| |
| - | .demo-1 .deco {
| |
| - | width: 260px;
| |
| - | height: 260px;
| |
| - | border: 2px dashed #ddd;
| |
| - | border: 2px dashed rgba(150,150,150,0.4);
| |
| - | border-radius: 50%;
| |
| - | position: absolute;
| |
| - | bottom: 50%;
| |
| - | left: 50%;
| |
| - | margin: 0 0 0 -130px;
| |
| - | }
| |
| - |
| |
| - | .demo-1 [data-icon]:after {
| |
| - | content: attr(data-icon);
| |
| - | font-family: 'AnimalsNormal';
| |
| - | color: #999;
| |
| - | text-shadow: 0 0 1px #999;
| |
| - | position: absolute;
| |
| - | width: 220px;
| |
| - | height: 220px;
| |
| - | line-height: 220px;
| |
| - | text-align: center;
| |
| - | font-size: 100px;
| |
| - | top: 50%;
| |
| - | left: 50%;
| |
| - | margin: -110px 0 0 -110px;
| |
| - | box-shadow: inset 0 0 0 10px #f7f7f7;
| |
| - | border-radius: 50%;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .sl-slide h2 {
| |
| - | color: #000;
| |
| - | text-shadow: 0 0 1px #000;
| |
| - | padding: 20px;
| |
| - | position: absolute;
| |
| - | font-size: 34px;
| |
| - | font-weight: 700;
| |
| - | letter-spacing: 13px;
| |
| - | text-transform: uppercase;
| |
| - | width: 80%;
| |
| - | left: 10%;
| |
| - | text-align: center;
| |
| - | line-height: 50px;
| |
| - | bottom: 50%;
| |
| - | margin: 0 0 -120px 0;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .sl-slide blockquote {
| |
| - | position: absolute;
| |
| - | width: 100%;
| |
| - | text-align: center;
| |
| - | left: 0;
| |
| - | font-weight: 400;
| |
| - | font-size: 14px;
| |
| - | line-height: 20px;
| |
| - | height: 70px;
| |
| - | color: #8b8b8b;
| |
| - | z-index: 2;
| |
| - | bottom: 50%;
| |
| - | margin: 0 0 -200px 0;
| |
| - | padding: 0;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .sl-slide blockquote p{
| |
| - | margin: 0 auto;
| |
| - | width: 60%;
| |
| - | max-width: 400px;
| |
| - | position: relative;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .sl-slide blockquote p:before {
| |
| - | color: #f0f0f0;
| |
| - | color: rgba(244,244,244,0.65);
| |
| - | font-family: "Bookman Old Style", Bookman, Garamond, serif;
| |
| - | position: absolute;
| |
| - | line-height: 60px;
| |
| - | width: 75px;
| |
| - | height: 75px;
| |
| - | font-size: 200px;
| |
| - | z-index: -1;
| |
| - | left: -80px;
| |
| - | top: 35px;
| |
| - | content: '\201C';
| |
| - | }
| |
| - |
| |
| - | .demo-1 .sl-slide blockquote cite {
| |
| - | font-size: 10px;
| |
| - | padding-top: 10px;
| |
| - | display: inline-block;
| |
| - | font-style: normal;
| |
| - | text-transform: uppercase;
| |
| - | letter-spacing: 4px;
| |
| - | }
| |
| - |
| |
| - | /* Custom background colors for slides in first demo */
| |
| - |
| |
| - | /* First Slide */
| |
| - | .demo-1 .bg-1 .sl-slide-inner,
| |
| - | .demo-1 .bg-1 .sl-content-slice {
| |
| - | background: #fff;
| |
| - | }
| |
| - |
| |
| - | /* Second Slide */
| |
| - | .demo-1 .bg-2 .sl-slide-inner,
| |
| - | .demo-1 .bg-2 .sl-content-slice {
| |
| - | background: #000;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .bg-2 [data-icon]:after,
| |
| - | .demo-1 .bg-2 h2 {
| |
| - | color: #fff;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .bg-2 blockquote:before {
| |
| - | color: #222;
| |
| - | }
| |
| - |
| |
| - | /* Third Slide */
| |
| - | .demo-1 .bg-3 .sl-slide-inner,
| |
| - | .demo-1 .bg-3 .sl-content-slice {
| |
| - | background: #db84ad;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .bg-3 .deco {
| |
| - | border-color: #fff;
| |
| - | border-color: rgba(255,255,255,0.5);
| |
| - | }
| |
| - |
| |
| - | .demo-1 .bg-3 [data-icon]:after {
| |
| - | color: #fff;
| |
| - | text-shadow: 0 0 1px #fff;
| |
| - | box-shadow: inset 0 0 0 10px #b55381;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .bg-3 h2,
| |
| - | .demo-1 .bg-3 blockquote{
| |
| - | color: #fff;
| |
| - | text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
| |
| - | }
| |
| - |
| |
| - | .demo-1 .bg-3 blockquote:before {
| |
| - | color: #c46c96;
| |
| - | }
| |
| - |
| |
| - | /* Forth Slide */
| |
| - | .demo-1 .bg-4 .sl-slide-inner,
| |
| - | .demo-1 .bg-4 .sl-content-slice {
| |
| - | background: #5bc2ce;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .bg-4 .deco {
| |
| - | border-color: #379eaa;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .bg-4 [data-icon]:after {
| |
| - | text-shadow: 0 0 1px #277d87;
| |
| - | color: #277d87;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .bg-4 h2,
| |
| - | .demo-1 .bg-4 blockquote{
| |
| - | color: #fff;
| |
| - | text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
| |
| - | }
| |
| - |
| |
| - | .demo-1 .bg-4 blockquote:before {
| |
| - | color: #379eaa;
| |
| - | }
| |
| - |
| |
| - | /* Fifth Slide */
| |
| - | .demo-1 .bg-5 .sl-slide-inner,
| |
| - | .demo-1 .bg-5 .sl-content-slice {
| |
| - | background: #ffeb41;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .bg-5 .deco {
| |
| - | border-color: #ECD82C;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .bg-5 .deco:after {
| |
| - | color: #000;
| |
| - | text-shadow: 0 0 1px #000;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .bg-5 h2,
| |
| - | .demo-1 .bg-5 blockquote{
| |
| - | color: #000;
| |
| - | text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
| |
| - | }
| |
| - |
| |
| - | .demo-1 .bg-5 blockquote:before {
| |
| - | color: #ecd82c;
| |
| - | }
| |
| - |
| |
| - | .demo-2 .bg-img-1 {
| |
| - | background-image: url(../images/1.jpg);
| |
| - | }
| |
| - | .demo-2 .bg-img-2 {
| |
| - | background-image: url(../images/2.jpg);
| |
| - | }
| |
| - | .demo-2 .bg-img-3 {
| |
| - | background-image: url(../images/3.jpg);
| |
| - | }
| |
| - | .demo-2 .bg-img-4 {
| |
| - | background-image: url(../images/4.jpg);
| |
| - | }
| |
| - | .demo-2 .bg-img-5 {
| |
| - | background-image: url(../images/5.jpg);
| |
| - | }
| |
| - |
| |
| - | /* Animations for content elements */
| |
| - |
| |
| - | .sl-trans-elems .deco{
| |
| - | -webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
| |
| - | -moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
| |
| - | -o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
| |
| - | -ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
| |
| - | animation: roll 1s ease-out both, fadeIn 1s ease-out both;
| |
| - | }
| |
| - | .sl-trans-elems h2{
| |
| - | -webkit-animation: moveUp 1s ease-in-out both;
| |
| - | -moz-animation: moveUp 1s ease-in-out both;
| |
| - | -o-animation: moveUp 1s ease-in-out both;
| |
| - | -ms-animation: moveUp 1s ease-in-out both;
| |
| - | animation: moveUp 1s ease-in-out both;
| |
| - | }
| |
| - | .sl-trans-elems blockquote{
| |
| - | -webkit-animation: fadeIn 0.5s linear 0.5s both;
| |
| - | -moz-animation: fadeIn 0.5s linear 0.5s both;
| |
| - | -o-animation: fadeIn 0.5s linear 0.5s both;
| |
| - | -ms-animation: fadeIn 0.5s linear 0.5s both;
| |
| - | animation: fadeIn 0.5s linear 0.5s both;
| |
| - | }
| |
| - | .sl-trans-back-elems .deco{
| |
| - | -webkit-animation: scaleDown 1s ease-in-out both;
| |
| - | -moz-animation: scaleDown 1s ease-in-out both;
| |
| - | -o-animation: scaleDown 1s ease-in-out both;
| |
| - | -ms-animation: scaleDown 1s ease-in-out both;
| |
| - | animation: scaleDown 1s ease-in-out both;
| |
| - | }
| |
| - | .sl-trans-back-elems h2{
| |
| - | -webkit-animation: fadeOut 1s ease-in-out both;
| |
| - | -moz-animation: fadeOut 1s ease-in-out both;
| |
| - | -o-animation: fadeOut 1s ease-in-out both;
| |
| - | -ms-animation: fadeOut 1s ease-in-out both;
| |
| - | animation: fadeOut 1s ease-in-out both;
| |
| - | }
| |
| - | .sl-trans-back-elems blockquote{
| |
| - | -webkit-animation: fadeOut 1s linear both;
| |
| - | -moz-animation: fadeOut 1s linear both;
| |
| - | -o-animation: fadeOut 1s linear both;
| |
| - | -ms-animation: fadeOut 1s linear both;
| |
| - | animation: fadeOut 1s linear both;
| |
| - | }
| |
| - | @-webkit-keyframes roll{
| |
| - | 0% {-webkit-transform: translateX(500px) rotate(360deg);}
| |
| - | 100% {-webkit-transform: translateX(0px) rotate(0deg);}
| |
| - | }
| |
| - | @-moz-keyframes roll{
| |
| - | 0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;}
| |
| - | 100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
| |
| - | }
| |
| - | @-o-keyframes roll{
| |
| - | 0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;}
| |
| - | 100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
| |
| - | }
| |
| - | @-ms-keyframes roll{
| |
| - | 0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;}
| |
| - | 100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
| |
| - | }
| |
| - | @keyframes roll{
| |
| - | 0% {transform: translateX(500px) rotate(360deg); opacity: 0;}
| |
| - | 100% {transform: translateX(0px) rotate(0deg); opacity: 1;}
| |
| - | }
| |
| - | @-webkit-keyframes moveUp{
| |
| - | 0% {-webkit-transform: translateY(40px);}
| |
| - | 100% {-webkit-transform: translateY(0px);}
| |
| - | }
| |
| - | @-moz-keyframes moveUp{
| |
| - | 0% {-moz-transform: translateY(40px);}
| |
| - | 100% {-moz-transform: translateY(0px);}
| |
| - | }
| |
| - | @-o-keyframes moveUp{
| |
| - | 0% {-o-transform: translateY(40px);}
| |
| - | 100% {-o-transform: translateY(0px);}
| |
| - | }
| |
| - | @-ms-keyframes moveUp{
| |
| - | 0% {-ms-transform: translateY(40px);}
| |
| - | 100% {-ms-transform: translateY(0px);}
| |
| - | }
| |
| - | @keyframes moveUp{
| |
| - | 0% {transform: translateY(40px);}
| |
| - | 100% {transform: translateY(0px);}
| |
| - | }
| |
| - | @-webkit-keyframes fadeIn{
| |
| - | 0% {opacity: 0;}
| |
| - | 100% {opacity: 1;}
| |
| - | }
| |
| - | @-moz-keyframes fadeIn{
| |
| - | 0% {opacity: 0;}
| |
| - | 100% {opacity: 1;}
| |
| - | }
| |
| - | @-o-keyframes fadeIn{
| |
| - | 0% {opacity: 0;}
| |
| - | 100% {opacity: 1;}
| |
| - | }
| |
| - | @-ms-keyframes fadeIn{
| |
| - | 0% {opacity: 0;}
| |
| - | 100% {opacity: 1;}
| |
| - | }
| |
| - | @keyframes fadeIn{
| |
| - | 0% {opacity: 0;}
| |
| - | 100% {opacity: 1;}
| |
| - | }
| |
| - | @-webkit-keyframes scaleDown{
| |
| - | 0% {-webkit-transform: scale(1);}
| |
| - | 100% {-webkit-transform: scale(0.5);}
| |
| - | }
| |
| - | @-moz-keyframes scaleDown{
| |
| - | 0% {-moz-transform: scale(1);}
| |
| - | 100% {-moz-transform: scale(0.5);}
| |
| - | }
| |
| - | @-o-keyframes scaleDown{
| |
| - | 0% {-o-transform: scale(1);}
| |
| - | 100% {-o-transform: scale(0.5);}
| |
| - | }
| |
| - | @-ms-keyframes scaleDown{
| |
| - | 0% {-ms-transform: scale(1);}
| |
| - | 100% {-ms-transform: scale(0.5);}
| |
| - | }
| |
| - | @keyframes scaleDown{
| |
| - | 0% {transform: scale(1);}
| |
| - | 100% {transform: scale(0.5);}
| |
| - | }
| |
| - | @-webkit-keyframes fadeOut{
| |
| - | 0% {opacity: 1;}
| |
| - | 100% {opacity: 0;}
| |
| - | }
| |
| - | @-moz-keyframes fadeOut{
| |
| - | 0% {opacity: 1;}
| |
| - | 100% {opacity: 0;}
| |
| - | }
| |
| - | @-o-keyframes fadeOut{
| |
| - | 0% {opacity: 1;}
| |
| - | 100% {opacity: 0;}
| |
| - | }
| |
| - | @-ms-keyframes fadeOut{
| |
| - | 0% {opacity: 1;}
| |
| - | 100% {opacity: 0;}
| |
| - | }
| |
| - | @keyframes fadeOut{
| |
| - | 0% {opacity: 1;}
| |
| - | 100% {opacity: 0;}
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* Media Queries for custom slider */
| |
| - |
| |
| - | @media screen and (max-width: 660px) {
| |
| - | .demo-1 .deco {
| |
| - | width: 130px;
| |
| - | height: 130px;
| |
| - | margin-left: -65px;
| |
| - | margin-bottom: 50px;
| |
| - | }
| |
| - |
| |
| - | .demo-1 [data-icon]:after {
| |
| - | width: 110px;
| |
| - | height: 110px;
| |
| - | line-height: 110px;
| |
| - | font-size: 40px;
| |
| - | margin: -55px 0 0 -55px;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .sl-slide blockquote {
| |
| - | margin-bottom: -120px;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .sl-slide h2 {
| |
| - | line-height: 22px;
| |
| - | font-size: 18px;
| |
| - | margin-bottom: -40px;
| |
| - | letter-spacing: 8px;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .sl-slide blockquote p:before {
| |
| - | line-height: 10px;
| |
| - | width: 40px;
| |
| - | height: 40px;
| |
| - | font-size: 120px;
| |
| - | left: -45px;
| |
| - | }
| |
| - |
| |
| - | .demo-2 .sl-slider-wrapper {
| |
| - | height: 500px;
| |
| - | }
| |
| - |
| |
| - | .demo-2 .sl-slider h2 {
| |
| - | font-size: 36px;
| |
| - | }
| |
| - |
| |
| - | .demo-2 .sl-slider blockquote {
| |
| - | font-size: 16px;
| |
| - | }
| |
| - |
| |
| - | }
| |
| - |
| |
| - | .sl-slider-wrapper {
| |
| - | overflow: visible !important;
| |
| - | margin: 0 auto;
| |
| - | }
| |
| - |
| |
| - | /* Slide wrapper and slides */
| |
| - |
| |
| - | .sl-slider,
| |
| - | .sl-slide,
| |
| - | .sl-slides-wrapper,
| |
| - | .sl-slide-inner {
| |
| - | position: relative;
| |
| - | width: 100%;
| |
| - | height: 100%;
| |
| - | background: #fff;
| |
| - | }
| |
| - |
| |
| - | .demo-1 .sl-slide blockquote {
| |
| - | width: 50%;
| |
| - | left: 25%;
| |
| - | }
| |
| - |
| |
| - | .demo-2 .bg-img {
| |
| - | padding: 0;
| |
| - | top: 0;
| |
| - | left: 0;
| |
| - | }
| |
| - |
| |
| - | .nav-arrows,
| |
| - | .nav-dots {
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | </style>
| |
| - |
| |
| - | <script>
| |
| - | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
| |
| - | * Build: http://modernizr.com/download/#-csstransforms3d-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load
| |
| - | */
| |
| - | ;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:w(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
| |
| - | </script>
| |
| - |
| |
| - | <script>
| |
| - | /*
| |
| - | * cond - v0.1 - 6/10/2009
| |
| - | * http://benalman.com/projects/jquery-cond-plugin/
| |
| - | *
| |
| - | * Copyright (c) 2009 "Cowboy" Ben Alman
| |
| - | * Licensed under the MIT license
| |
| - | * http://benalman.com/about/license/
| |
| - | *
| |
| - | * Based on suggestions and sample code by Stephen Band and DBJDBJ in the
| |
| - | * jquery-dev Google group: http://bit.ly/jqba1
| |
| - | */
| |
| - | (function($){$.fn.cond=function(){var e,a=arguments,b=0,f,d,c;while(!f&&b<a.length){f=a[b++];d=a[b++];f=$.isFunction(f)?f.call(this):f;c=!d?f:f?d.call(this,f):e}return c!==e?c:this}})(jQuery);
| |
| - | </script>
| |
| - |
| |
| - | <script>
| |
| - | /**
| |
| - | * jquery.slitslider.js v1.1.0
| |
| - | * http://www.codrops.com
| |
| - | *
| |
| - | * Licensed under the MIT license.
| |
| - | * http://www.opensource.org/licenses/mit-license.php
| |
| - | *
| |
| - | * Copyright 2012, Codrops
| |
| - | * http://www.codrops.com
| |
| - | */
| |
| - |
| |
| - | ;( function( $, window, undefined ) {
| |
| - |
| |
| - | 'use strict';
| |
| - |
| |
| - | /*
| |
| - | * debouncedresize: special jQuery event that happens once after a window resize
| |
| - | *
| |
| - | * latest version and complete README available on Github:
| |
| - | * https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js
| |
| - | *
| |
| - | * Copyright 2011 @louis_remi
| |
| - | * Licensed under the MIT license.
| |
| - | */
| |
| - | var $event = $.event,
| |
| - | $special,
| |
| - | resizeTimeout;
| |
| - |
| |
| - | $special = $event.special.debouncedresize = {
| |
| - | setup: function() {
| |
| - | $( this ).on( "resize", $special.handler );
| |
| - | },
| |
| - | teardown: function() {
| |
| - | $( this ).off( "resize", $special.handler );
| |
| - | },
| |
| - | handler: function( event, execAsap ) {
| |
| - | // Save the context
| |
| - | var context = this,
| |
| - | args = arguments,
| |
| - | dispatch = function() {
| |
| - | // set correct event type
| |
| - | event.type = "debouncedresize";
| |
| - | $event.dispatch.apply( context, args );
| |
| - | };
| |
| - |
| |
| - | if ( resizeTimeout ) {
| |
| - | clearTimeout( resizeTimeout );
| |
| - | }
| |
| - |
| |
| - | execAsap ?
| |
| - | dispatch() :
| |
| - | resizeTimeout = setTimeout( dispatch, $special.threshold );
| |
| - | },
| |
| - | threshold: 20
| |
| - | };
| |
| - |
| |
| - | // global
| |
| - | var $window = $( window ),
| |
| - | $document = $( document ),
| |
| - | Modernizr = window.Modernizr;
| |
| - |
| |
| - | $.Slitslider = function( options, element ) {
| |
| - |
| |
| - | this.$elWrapper = $( element );
| |
| - | this._init( options );
| |
| - |
| |
| - | };
| |
| - |
| |
| - | $.Slitslider.defaults = {
| |
| - | // transitions speed
| |
| - | speed : 800,
| |
| - | // if true the item's slices will also animate the opacity value
| |
| - | optOpacity : false,
| |
| - | // amount (%) to translate both slices - adjust as necessary
| |
| - | translateFactor : 230,
| |
| - | // maximum possible angle
| |
| - | maxAngle : 25,
| |
| - | // maximum possible scale
| |
| - | maxScale : 2,
| |
| - | // slideshow on / off
| |
| - | autoplay : false,
| |
| - | // keyboard navigation
| |
| - | keyboard : true,
| |
| - | // time between transitions
| |
| - | interval : 4000,
| |
| - | // callbacks
| |
| - | onBeforeChange : function( slide, idx ) { return false; },
| |
| - | onAfterChange : function( slide, idx ) { return false; }
| |
| - | };
| |
| - |
| |
| - | $.Slitslider.prototype = {
| |
| - |
| |
| - | _init : function( options ) {
| |
| - |
| |
| - | // options
| |
| - | this.options = $.extend( true, {}, $.Slitslider.defaults, options );
| |
| - |
| |
| - | // https://github.com/twitter/bootstrap/issues/2870
| |
| - | this.transEndEventNames = {
| |
| - | 'WebkitTransition' : 'webkitTransitionEnd',
| |
| - | 'MozTransition' : 'transitionend',
| |
| - | 'OTransition' : 'oTransitionEnd',
| |
| - | 'msTransition' : 'MSTransitionEnd',
| |
| - | 'transition' : 'transitionend'
| |
| - | };
| |
| - | this.transEndEventName = this.transEndEventNames[ Modernizr.prefixed( 'transition' ) ];
| |
| - | // suport for css 3d transforms and css transitions
| |
| - | this.support = Modernizr.csstransitions && Modernizr.csstransforms3d;
| |
| - | // the slider
| |
| - | this.$el = this.$elWrapper.children( '.sl-slider' );
| |
| - | // the slides
| |
| - | this.$slides = this.$el.children( '.sl-slide' ).hide();
| |
| - | // total slides
| |
| - | this.slidesCount = this.$slides.length;
| |
| - | // current slide
| |
| - | this.current = 0;
| |
| - | // control if it's animating
| |
| - | this.isAnimating = false;
| |
| - | // get container size
| |
| - | this._getSize();
| |
| - | // layout
| |
| - | this._layout();
| |
| - | // load some events
| |
| - | this._loadEvents();
| |
| - | // slideshow
| |
| - | if( this.options.autoplay ) {
| |
| - |
| |
| - | this._startSlideshow();
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | // gets the current container width & height
| |
| - | _getSize : function() {
| |
| - |
| |
| - | this.size = {
| |
| - | width : this.$elWrapper.outerWidth( true ),
| |
| - | height : this.$elWrapper.outerHeight( true )
| |
| - | };
| |
| - |
| |
| - | },
| |
| - | _layout : function() {
| |
| - |
| |
| - | this.$slideWrapper = $( '<div class="sl-slides-wrapper" />' );
| |
| - |
| |
| - | // wrap the slides
| |
| - | this.$slides.wrapAll( this.$slideWrapper ).each( function( i ) {
| |
| - |
| |
| - | var $slide = $( this ),
| |
| - | // vertical || horizontal
| |
| - | orientation = $slide.data( 'orientation' );
| |
| - |
| |
| - | $slide.addClass( 'sl-slide-' + orientation )
| |
| - | .children()
| |
| - | .wrapAll( '<div class="sl-content-wrapper" />' )
| |
| - | .wrapAll( '<div class="sl-content" />' );
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | // set the right size of the slider/slides for the current window size
| |
| - | this._setSize();
| |
| - | // show first slide
| |
| - | this.$slides.eq( this.current ).show();
| |
| - |
| |
| - | },
| |
| - | _navigate : function( dir, pos ) {
| |
| - |
| |
| - | if( this.isAnimating || this.slidesCount < 2 ) {
| |
| - |
| |
| - | return false;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | this.isAnimating = true;
| |
| - |
| |
| - | var self = this,
| |
| - | $currentSlide = this.$slides.eq( this.current );
| |
| - |
| |
| - | // if position is passed
| |
| - | if( pos !== undefined ) {
| |
| - |
| |
| - | this.current = pos;
| |
| - |
| |
| - | }
| |
| - | // if not check the boundaries
| |
| - | else if( dir === 'next' ) {
| |
| - |
| |
| - | this.current = this.current < this.slidesCount - 1 ? ++this.current : 0;
| |
| - |
| |
| - | }
| |
| - | else if( dir === 'prev' ) {
| |
| - |
| |
| - | this.current = this.current > 0 ? --this.current : this.slidesCount - 1;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | this.options.onBeforeChange( $currentSlide, this.current );
| |
| - |
| |
| - | // next slide to be shown
| |
| - | var $nextSlide = this.$slides.eq( this.current ),
| |
| - | // the slide we want to cut and animate
| |
| - | $movingSlide = ( dir === 'next' ) ? $currentSlide : $nextSlide,
| |
| - |
| |
| - | // the following are the data attrs set for each slide
| |
| - | configData = $movingSlide.data(),
| |
| - | config = {};
| |
| - |
| |
| - | config.orientation = configData.orientation || 'horizontal',
| |
| - | config.slice1angle = configData.slice1Rotation || 0,
| |
| - | config.slice1scale = configData.slice1Scale || 1,
| |
| - | config.slice2angle = configData.slice2Rotation || 0,
| |
| - | config.slice2scale = configData.slice2Scale || 1;
| |
| - |
| |
| - | this._validateValues( config );
| |
| - |
| |
| - | var cssStyle = config.orientation === 'horizontal' ? {
| |
| - | marginTop : -this.size.height / 2
| |
| - | } : {
| |
| - | marginLeft : -this.size.width / 2
| |
| - | },
| |
| - | // default slide's slices style
| |
| - | resetStyle = {
| |
| - | 'transform' : 'translate(0%,0%) rotate(0deg) scale(1)',
| |
| - | opacity : 1
| |
| - | },
| |
| - | // slice1 style
| |
| - | slice1Style = config.orientation === 'horizontal' ? {
| |
| - | 'transform' : 'translateY(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
| |
| - | } : {
| |
| - | 'transform' : 'translateX(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
| |
| - | },
| |
| - | // slice2 style
| |
| - | slice2Style = config.orientation === 'horizontal' ? {
| |
| - | 'transform' : 'translateY(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
| |
| - | } : {
| |
| - | 'transform' : 'translateX(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
| |
| - | };
| |
| - |
| |
| - | if( this.options.optOpacity ) {
| |
| - |
| |
| - | slice1Style.opacity = 0;
| |
| - | slice2Style.opacity = 0;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | // we are adding the classes sl-trans-elems and sl-trans-back-elems to the slide that is either coming "next"
| |
| - | // or going "prev" according to the direction.
| |
| - | // the idea is to make it more interesting by giving some animations to the respective slide's elements
| |
| - | //( dir === 'next' ) ? $nextSlide.addClass( 'sl-trans-elems' ) : $currentSlide.addClass( 'sl-trans-back-elems' );
| |
| - |
| |
| - | $currentSlide.removeClass( 'sl-trans-elems' );
| |
| - |
| |
| - | var transitionProp = {
| |
| - | 'transition' : 'all ' + this.options.speed + 'ms ease-in-out'
| |
| - | };
| |
| - |
| |
| - | // add the 2 slices and animate them
| |
| - | $movingSlide.css( 'z-index', this.slidesCount )
| |
| - | .find( 'div.sl-content-wrapper' )
| |
| - | .wrap( $( '<div class="sl-content-slice" />' ).css( transitionProp ) )
| |
| - | .parent()
| |
| - | .cond(
| |
| - | dir === 'prev',
| |
| - | function() {
| |
| - |
| |
| - | var slice = this;
| |
| - | this.css( slice1Style );
| |
| - | setTimeout( function() {
| |
| - |
| |
| - | slice.css( resetStyle );
| |
| - |
| |
| - | }, 50 );
| |
| - |
| |
| - | },
| |
| - | function() {
| |
| - |
| |
| - | var slice = this;
| |
| - | setTimeout( function() {
| |
| - |
| |
| - | slice.css( slice1Style );
| |
| - |
| |
| - | }, 50 );
| |
| - |
| |
| - | }
| |
| - | )
| |
| - | .clone()
| |
| - | .appendTo( $movingSlide )
| |
| - | .cond(
| |
| - | dir === 'prev',
| |
| - | function() {
| |
| - |
| |
| - | var slice = this;
| |
| - | this.css( slice2Style );
| |
| - | setTimeout( function() {
| |
| - |
| |
| - | $currentSlide.addClass( 'sl-trans-back-elems' );
| |
| - |
| |
| - | if( self.support ) {
| |
| - |
| |
| - | slice.css( resetStyle ).on( self.transEndEventName, function() {
| |
| - |
| |
| - | self._onEndNavigate( slice, $currentSlide, dir );
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | }
| |
| - | else {
| |
| - |
| |
| - | self._onEndNavigate( slice, $currentSlide, dir );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | }, 50 );
| |
| - |
| |
| - | },
| |
| - | function() {
| |
| - |
| |
| - | var slice = this;
| |
| - | setTimeout( function() {
| |
| - |
| |
| - | $nextSlide.addClass( 'sl-trans-elems' );
| |
| - |
| |
| - | if( self.support ) {
| |
| - |
| |
| - | slice.css( slice2Style ).on( self.transEndEventName, function() {
| |
| - |
| |
| - | self._onEndNavigate( slice, $currentSlide, dir );
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | }
| |
| - | else {
| |
| - |
| |
| - | self._onEndNavigate( slice, $currentSlide, dir );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | }, 50 );
| |
| - |
| |
| - | }
| |
| - | )
| |
| - | .find( 'div.sl-content-wrapper' )
| |
| - | .css( cssStyle );
| |
| - |
| |
| - | $nextSlide.show();
| |
| - |
| |
| - | },
| |
| - | _validateValues : function( config ) {
| |
| - |
| |
| - | // OK, so we are restricting the angles and scale values here.
| |
| - | // This is to avoid the slices wrong sides to be shown.
| |
| - | // you can adjust these values as you wish but make sure you also ajust the
| |
| - | // paddings of the slides and also the options.translateFactor value and scale data attrs
| |
| - | if( config.slice1angle > this.options.maxAngle || config.slice1angle < -this.options.maxAngle ) {
| |
| - |
| |
| - | config.slice1angle = this.options.maxAngle;
| |
| - |
| |
| - | }
| |
| - | if( config.slice2angle > this.options.maxAngle || config.slice2angle < -this.options.maxAngle ) {
| |
| - |
| |
| - | config.slice2angle = this.options.maxAngle;
| |
| - |
| |
| - | }
| |
| - | if( config.slice1scale > this.options.maxScale || config.slice1scale <= 0 ) {
| |
| - |
| |
| - | config.slice1scale = this.options.maxScale;
| |
| - |
| |
| - | }
| |
| - | if( config.slice2scale > this.options.maxScale || config.slice2scale <= 0 ) {
| |
| - |
| |
| - | config.slice2scale = this.options.maxScale;
| |
| - |
| |
| - | }
| |
| - | if( config.orientation !== 'vertical' && config.orientation !== 'horizontal' ) {
| |
| - |
| |
| - | config.orientation = 'horizontal'
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | _onEndNavigate : function( $slice, $oldSlide, dir ) {
| |
| - |
| |
| - | // reset previous slide's style after next slide is shown
| |
| - | var $slide = $slice.parent(),
| |
| - | removeClasses = 'sl-trans-elems sl-trans-back-elems';
| |
| - |
| |
| - | // remove second slide's slice
| |
| - | $slice.remove();
| |
| - | // unwrap..
| |
| - | $slide.css( 'z-index', 1 )
| |
| - | .find( 'div.sl-content-wrapper' )
| |
| - | .unwrap();
| |
| - |
| |
| - | // hide previous current slide
| |
| - | $oldSlide.hide().removeClass( removeClasses );
| |
| - | $slide.removeClass( removeClasses );
| |
| - | // now we can navigate again..
| |
| - | this.isAnimating = false;
| |
| - | this.options.onAfterChange( $slide, this.current );
| |
| - |
| |
| - | },
| |
| - | _setSize : function() {
| |
| - |
| |
| - | // the slider and content wrappers will have the window's width and height
| |
| - | var cssStyle = {
| |
| - | width : this.size.width,
| |
| - | height : this.size.height
| |
| - | };
| |
| - |
| |
| - | this.$el.css( cssStyle ).find( 'div.sl-content-wrapper' ).css( cssStyle );
| |
| - |
| |
| - | },
| |
| - | _loadEvents : function() {
| |
| - |
| |
| - | var self = this;
| |
| - |
| |
| - | $window.on( 'debouncedresize.slitslider', function( event ) {
| |
| - |
| |
| - | // update size values
| |
| - | self._getSize();
| |
| - | // set the sizes again
| |
| - | self._setSize();
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | if ( this.options.keyboard ) {
| |
| - |
| |
| - | $document.on( 'keydown.slitslider', function(e) {
| |
| - |
| |
| - | var keyCode = e.keyCode || e.which,
| |
| - | arrow = {
| |
| - | left: 37,
| |
| - | up: 38,
| |
| - | right: 39,
| |
| - | down: 40
| |
| - | };
| |
| - |
| |
| - | switch (keyCode) {
| |
| - |
| |
| - | case arrow.left :
| |
| - |
| |
| - | self._stopSlideshow();
| |
| - | self._navigate( 'prev' );
| |
| - | break;
| |
| - |
| |
| - | case arrow.right :
| |
| - |
| |
| - | self._stopSlideshow();
| |
| - | self._navigate( 'next' );
| |
| - | break;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | _startSlideshow: function() {
| |
| - |
| |
| - | var self = this;
| |
| - |
| |
| - | this.slideshow = setTimeout( function() {
| |
| - |
| |
| - | self._navigate( 'next' );
| |
| - |
| |
| - | if ( self.options.autoplay ) {
| |
| - |
| |
| - | self._startSlideshow();
| |
| - |
| |
| - | }
| |
| - |
| |
| - | }, this.options.interval );
| |
| - |
| |
| - | },
| |
| - | _stopSlideshow: function() {
| |
| - |
| |
| - | if ( this.options.autoplay ) {
| |
| - |
| |
| - | clearTimeout( this.slideshow );
| |
| - | this.isPlaying = false;
| |
| - | this.options.autoplay = false;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | _destroy : function( callback ) {
| |
| - |
| |
| - | this.$el.off( '.slitslider' ).removeData( 'slitslider' );
| |
| - | $window.off( '.slitslider' );
| |
| - | $document.off( '.slitslider' );
| |
| - | this.$slides.each( function( i ) {
| |
| - |
| |
| - | var $slide = $( this ),
| |
| - | $content = $slide.find( 'div.sl-content' ).children();
| |
| - |
| |
| - | $content.appendTo( $slide );
| |
| - | $slide.children( 'div.sl-content-wrapper' ).remove();
| |
| - |
| |
| - | } );
| |
| - | this.$slides.unwrap( this.$slideWrapper ).hide();
| |
| - | this.$slides.eq( 0 ).show();
| |
| - | if( callback ) {
| |
| - |
| |
| - | callback.call();
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | // public methos: adds more slides to the slider
| |
| - | add : function( $slides, callback ) {
| |
| - |
| |
| - | this.$slides = this.$slides.add( $slides );
| |
| - |
| |
| - | var self = this;
| |
| - |
| |
| - |
| |
| - | $slides.each( function( i ) {
| |
| - |
| |
| - | var $slide = $( this ),
| |
| - | // vertical || horizontal
| |
| - | orientation = $slide.data( 'orientation' );
| |
| - |
| |
| - | $slide.hide().addClass( 'sl-slide-' + orientation )
| |
| - | .children()
| |
| - | .wrapAll( '<div class="sl-content-wrapper" />' )
| |
| - | .wrapAll( '<div class="sl-content" />' )
| |
| - | .end()
| |
| - | .appendTo( self.$el.find( 'div.sl-slides-wrapper' ) );
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | this._setSize();
| |
| - |
| |
| - | this.slidesCount = this.$slides.length;
| |
| - |
| |
| - | if ( callback ) {
| |
| - |
| |
| - | callback.call( $items );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | // public method: shows next slide
| |
| - | next : function() {
| |
| - |
| |
| - | this._stopSlideshow();
| |
| - | this._navigate( 'next' );
| |
| - |
| |
| - | },
| |
| - | // public method: shows previous slide
| |
| - | previous : function() {
| |
| - |
| |
| - | this._stopSlideshow();
| |
| - | this._navigate( 'prev' );
| |
| - |
| |
| - | },
| |
| - | // public method: goes to a specific slide
| |
| - | jump : function( pos ) {
| |
| - |
| |
| - | pos -= 1;
| |
| - |
| |
| - | if( pos === this.current || pos >= this.slidesCount || pos < 0 ) {
| |
| - |
| |
| - | return false;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | this._stopSlideshow();
| |
| - | this._navigate( pos > this.current ? 'next' : 'prev', pos );
| |
| - |
| |
| - | },
| |
| - | // public method: starts the slideshow
| |
| - | // any call to next(), previous() or jump() will stop the slideshow
| |
| - | play : function() {
| |
| - |
| |
| - | if( !this.isPlaying ) {
| |
| - |
| |
| - | this.isPlaying = true;
| |
| - |
| |
| - | this._navigate( 'next' );
| |
| - | this.options.autoplay = true;
| |
| - | this._startSlideshow();
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | // public method: pauses the slideshow
| |
| - | pause : function() {
| |
| - |
| |
| - | if( this.isPlaying ) {
| |
| - |
| |
| - | this._stopSlideshow();
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | // public method: check if isAnimating is true
| |
| - | isActive : function() {
| |
| - |
| |
| - | return this.isAnimating;
| |
| - |
| |
| - | },
| |
| - | // publicc methos: destroys the slicebox instance
| |
| - | destroy : function( callback ) {
| |
| - |
| |
| - | this._destroy( callback );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | };
| |
| - |
| |
| - | var logError = function( message ) {
| |
| - |
| |
| - | if ( window.console ) {
| |
| - |
| |
| - | window.console.error( message );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | };
| |
| - |
| |
| - | $.fn.slitslider = function( options ) {
| |
| - |
| |
| - | var self = $.data( this, 'slitslider' );
| |
| - |
| |
| - | if ( typeof options === 'string' ) {
| |
| - |
| |
| - | var args = Array.prototype.slice.call( arguments, 1 );
| |
| - |
| |
| - | this.each(function() {
| |
| - |
| |
| - | if ( !self ) {
| |
| - |
| |
| - | logError( "cannot call methods on slitslider prior to initialization; " +
| |
| - | "attempted to call method '" + options + "'" );
| |
| - | return;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | if ( !$.isFunction( self[options] ) || options.charAt(0) === "_" ) {
| |
| - |
| |
| - | logError( "no such method '" + options + "' for slitslider self" );
| |
| - | return;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | self[ options ].apply( self, args );
| |
| - |
| |
| - | });
| |
| - |
| |
| - | }
| |
| - | else {
| |
| - |
| |
| - | this.each(function() {
| |
| - |
| |
| - | if ( self ) {
| |
| - |
| |
| - | self._init();
| |
| - |
| |
| - | }
| |
| - | else {
| |
| - |
| |
| - | self = $.data( this, 'slitslider', new $.Slitslider( options, this ) );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | });
| |
| - |
| |
| - | }
| |
| - |
| |
| - | return self;
| |
| - |
| |
| - | };
| |
| - |
| |
| - | } )( jQuery, window );
| |
| - | </script>
| |
| - |
| |
| - | <!--<link href="style.css" rel="stylesheet" type="text/css">-->
| |
| - | <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
| |
| - | <link href="https://e65ae602ef428322892bf5f667f9d51420f9cd4d.googledrive.com/host/0B21Mp8HDTzNfV3llTVVETkdxSjA/style.css" rel="stylesheet" type="text/css">
| |
| - | </head>
| |
| - |
| |
| - | <div id="globalwrapper">
| |
| - | <body>
| |
| - | <div id="navbar-wrapper" class="nav">
| |
| - | <div id="inside-wrapper">
| |
| - | <div id="logo-holder">
| |
| - | Logo Will Go Here
| |
| - | </div>
| |
| - | <nav id="navbar">
| |
| - | <a style="padding-left: 0;" href="https://2014hs.igem.org/Team:TP_CC-SanDiego">Home</a>
| |
| - | <a href="/Team:TP_CC-SanDiego/Project.html">Project</a>
| |
| - | <a href="/Team:TP_CC-SanDiego/Results.html">Results</a>
| |
| - | <a style="border-bottom: 1px solid #e8e8e8;" href="/Team:TP_CC-SanDiego/TheTeam.html">The Team</a>
| |
| - | <a href="/Team:TP_CC-SanDiego/Journal.html">Journal</a>
| |
| - | <a href="/Team:TP_CC-SanDiego/Outreach.html">Outreach</a>
| |
| - | <a href="/Team:TP_CC-SanDiego/Safety.html">Safety</a>
| |
| - | <a href="igem.org" style="padding-right: 0;">iGEM</a>
| |
| - | </nav>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div id="phase-wrapper" style="background:url(https://static.igem.org/mediawiki/2014/2/2b/B1.png); background-size: 100%;">
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | <!--START-->
| |
| - |
| |
| - |
| |
| - | <meta charset="UTF-8" />
| |
| - | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
| |
| - | <title>Fullscreen Slit Slider with CSS3 and jQuery</title>
| |
| - | <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| - | <meta name="description" content="Fullscreen Slit Slider with CSS3 and jQuery" />
| |
| - | <meta name="keywords" content="slit slider, plugin, css3, transitions, jquery, fullscreen, autoplay" />
| |
| - | <meta name="author" content="Codrops" />
| |
| - | <link rel="shortcut icon" href="../favicon.ico">
| |
| - | <link rel="stylesheet" type="text/css" href="css/demo.css" />
| |
| - | <link rel="stylesheet" type="text/css" href="css/style.css" />
| |
| - | <link rel="stylesheet" type="text/css" href="css/custom.css" />
| |
| - | <script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
| |
| - | <noscript>
| |
| - | <link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
| |
| - | </noscript>
| |
| - | </head>
| |
| - | <body>
| |
| - |
| |
| - | <div class="container demo-1">
| |
| - |
| |
| - | <div id="slider" class="sl-slider-wrapper">
| |
| - |
| |
| - | <div class="sl-slider">
| |
| - |
| |
| - | <div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
| |
| - | <div class="sl-slide-inner">
| |
| - | <div class="deco" data-icon="H"></div>
| |
| - | <h2>A bene placito</h2>
| |
| - | <blockquote><p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite></blockquote>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
| |
| - | <div class="sl-slide-inner">
| |
| - | <div class="deco" data-icon="q"></div>
| |
| - | <h2>Regula aurea</h2>
| |
| - | <blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
| |
| - | <div class="sl-slide-inner">
| |
| - | <div class="deco" data-icon="O"></div>
| |
| - | <h2>Dum spiro, spero</h2>
| |
| - | <blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
| |
| - | <div class="sl-slide-inner">
| |
| - | <div class="deco" data-icon="I"></div>
| |
| - | <h2>Donna nobis pacem</h2>
| |
| - | <blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
| |
| - | <div class="sl-slide-inner">
| |
| - | <div class="deco" data-icon="t"></div>
| |
| - | <h2>Acta Non Verba</h2>
| |
| - | <blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div><!-- /sl-slider -->
| |
| - |
| |
| - | <nav id="nav-arrows" class="nav-arrows">
| |
| - | <span class="nav-arrow-prev">Previous</span>
| |
| - | <span class="nav-arrow-next">Next</span>
| |
| - | </nav>
| |
| - |
| |
| - | <nav id="nav-dots" class="nav-dots">
| |
| - | <span class="nav-dot-current"></span>
| |
| - | <span></span>
| |
| - | <span></span>
| |
| - | <span></span>
| |
| - | <span></span>
| |
| - | </nav>
| |
| - |
| |
| - | </div><!-- /slider-wrapper -->
| |
| - |
| |
| - | </div>
| |
| - | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
| |
| - | <script>
| |
| - | /*
| |
| - | * cond - v0.1 - 6/10/2009
| |
| - | * http://benalman.com/projects/jquery-cond-plugin/
| |
| - | *
| |
| - | * Copyright (c) 2009 "Cowboy" Ben Alman
| |
| - | * Licensed under the MIT license
| |
| - | * http://benalman.com/about/license/
| |
| - | *
| |
| - | * Based on suggestions and sample code by Stephen Band and DBJDBJ in the
| |
| - | * jquery-dev Google group: http://bit.ly/jqba1
| |
| - | */
| |
| - | (function($){$.fn.cond=function(){var e,a=arguments,b=0,f,d,c;while(!f&&b<a.length){f=a[b++];d=a[b++];f=$.isFunction(f)?f.call(this):f;c=!d?f:f?d.call(this,f):e}return c!==e?c:this}})(jQuery);</script>
| |
| - | <script>
| |
| - | /**
| |
| - | * jquery.slitslider.js v1.1.0
| |
| - | * http://www.codrops.com
| |
| - | *
| |
| - | * Licensed under the MIT license.
| |
| - | * http://www.opensource.org/licenses/mit-license.php
| |
| - | *
| |
| - | * Copyright 2012, Codrops
| |
| - | * http://www.codrops.com
| |
| - | */
| |
| - |
| |
| - | ;( function( $, window, undefined ) {
| |
| - |
| |
| - | 'use strict';
| |
| - |
| |
| - | /*
| |
| - | * debouncedresize: special jQuery event that happens once after a window resize
| |
| - | *
| |
| - | * latest version and complete README available on Github:
| |
| - | * https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js
| |
| - | *
| |
| - | * Copyright 2011 @louis_remi
| |
| - | * Licensed under the MIT license.
| |
| - | */
| |
| - | var $event = $.event,
| |
| - | $special,
| |
| - | resizeTimeout;
| |
| - |
| |
| - | $special = $event.special.debouncedresize = {
| |
| - | setup: function() {
| |
| - | $( this ).on( "resize", $special.handler );
| |
| - | },
| |
| - | teardown: function() {
| |
| - | $( this ).off( "resize", $special.handler );
| |
| - | },
| |
| - | handler: function( event, execAsap ) {
| |
| - | // Save the context
| |
| - | var context = this,
| |
| - | args = arguments,
| |
| - | dispatch = function() {
| |
| - | // set correct event type
| |
| - | event.type = "debouncedresize";
| |
| - | $event.dispatch.apply( context, args );
| |
| - | };
| |
| - |
| |
| - | if ( resizeTimeout ) {
| |
| - | clearTimeout( resizeTimeout );
| |
| - | }
| |
| - |
| |
| - | execAsap ?
| |
| - | dispatch() :
| |
| - | resizeTimeout = setTimeout( dispatch, $special.threshold );
| |
| - | },
| |
| - | threshold: 20
| |
| - | };
| |
| - |
| |
| - | // global
| |
| - | var $window = $( window ),
| |
| - | $document = $( document ),
| |
| - | Modernizr = window.Modernizr;
| |
| - |
| |
| - | $.Slitslider = function( options, element ) {
| |
| - |
| |
| - | this.$elWrapper = $( element );
| |
| - | this._init( options );
| |
| - |
| |
| - | };
| |
| - |
| |
| - | $.Slitslider.defaults = {
| |
| - | // transitions speed
| |
| - | speed : 800,
| |
| - | // if true the item's slices will also animate the opacity value
| |
| - | optOpacity : false,
| |
| - | // amount (%) to translate both slices - adjust as necessary
| |
| - | translateFactor : 230,
| |
| - | // maximum possible angle
| |
| - | maxAngle : 25,
| |
| - | // maximum possible scale
| |
| - | maxScale : 2,
| |
| - | // slideshow on / off
| |
| - | autoplay : false,
| |
| - | // keyboard navigation
| |
| - | keyboard : true,
| |
| - | // time between transitions
| |
| - | interval : 4000,
| |
| - | // callbacks
| |
| - | onBeforeChange : function( slide, idx ) { return false; },
| |
| - | onAfterChange : function( slide, idx ) { return false; }
| |
| - | };
| |
| - |
| |
| - | $.Slitslider.prototype = {
| |
| - |
| |
| - | _init : function( options ) {
| |
| - |
| |
| - | // options
| |
| - | this.options = $.extend( true, {}, $.Slitslider.defaults, options );
| |
| - |
| |
| - | // https://github.com/twitter/bootstrap/issues/2870
| |
| - | this.transEndEventNames = {
| |
| - | 'WebkitTransition' : 'webkitTransitionEnd',
| |
| - | 'MozTransition' : 'transitionend',
| |
| - | 'OTransition' : 'oTransitionEnd',
| |
| - | 'msTransition' : 'MSTransitionEnd',
| |
| - | 'transition' : 'transitionend'
| |
| - | };
| |
| - | this.transEndEventName = this.transEndEventNames[ Modernizr.prefixed( 'transition' ) ];
| |
| - | // suport for css 3d transforms and css transitions
| |
| - | this.support = Modernizr.csstransitions && Modernizr.csstransforms3d;
| |
| - | // the slider
| |
| - | this.$el = this.$elWrapper.children( '.sl-slider' );
| |
| - | // the slides
| |
| - | this.$slides = this.$el.children( '.sl-slide' ).hide();
| |
| - | // total slides
| |
| - | this.slidesCount = this.$slides.length;
| |
| - | // current slide
| |
| - | this.current = 0;
| |
| - | // control if it's animating
| |
| - | this.isAnimating = false;
| |
| - | // get container size
| |
| - | this._getSize();
| |
| - | // layout
| |
| - | this._layout();
| |
| - | // load some events
| |
| - | this._loadEvents();
| |
| - | // slideshow
| |
| - | if( this.options.autoplay ) {
| |
| - |
| |
| - | this._startSlideshow();
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | // gets the current container width & height
| |
| - | _getSize : function() {
| |
| - |
| |
| - | this.size = {
| |
| - | width : this.$elWrapper.outerWidth( true ),
| |
| - | height : this.$elWrapper.outerHeight( true )
| |
| - | };
| |
| - |
| |
| - | },
| |
| - | _layout : function() {
| |
| - |
| |
| - | this.$slideWrapper = $( '<div class="sl-slides-wrapper" />' );
| |
| - |
| |
| - | // wrap the slides
| |
| - | this.$slides.wrapAll( this.$slideWrapper ).each( function( i ) {
| |
| - |
| |
| - | var $slide = $( this ),
| |
| - | // vertical || horizontal
| |
| - | orientation = $slide.data( 'orientation' );
| |
| - |
| |
| - | $slide.addClass( 'sl-slide-' + orientation )
| |
| - | .children()
| |
| - | .wrapAll( '<div class="sl-content-wrapper" />' )
| |
| - | .wrapAll( '<div class="sl-content" />' );
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | // set the right size of the slider/slides for the current window size
| |
| - | this._setSize();
| |
| - | // show first slide
| |
| - | this.$slides.eq( this.current ).show();
| |
| - |
| |
| - | },
| |
| - | _navigate : function( dir, pos ) {
| |
| - |
| |
| - | if( this.isAnimating || this.slidesCount < 2 ) {
| |
| - |
| |
| - | return false;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | this.isAnimating = true;
| |
| - |
| |
| - | var self = this,
| |
| - | $currentSlide = this.$slides.eq( this.current );
| |
| - |
| |
| - | // if position is passed
| |
| - | if( pos !== undefined ) {
| |
| - |
| |
| - | this.current = pos;
| |
| - |
| |
| - | }
| |
| - | // if not check the boundaries
| |
| - | else if( dir === 'next' ) {
| |
| - |
| |
| - | this.current = this.current < this.slidesCount - 1 ? ++this.current : 0;
| |
| - |
| |
| - | }
| |
| - | else if( dir === 'prev' ) {
| |
| - |
| |
| - | this.current = this.current > 0 ? --this.current : this.slidesCount - 1;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | this.options.onBeforeChange( $currentSlide, this.current );
| |
| - |
| |
| - | // next slide to be shown
| |
| - | var $nextSlide = this.$slides.eq( this.current ),
| |
| - | // the slide we want to cut and animate
| |
| - | $movingSlide = ( dir === 'next' ) ? $currentSlide : $nextSlide,
| |
| - |
| |
| - | // the following are the data attrs set for each slide
| |
| - | configData = $movingSlide.data(),
| |
| - | config = {};
| |
| - |
| |
| - | config.orientation = configData.orientation || 'horizontal',
| |
| - | config.slice1angle = configData.slice1Rotation || 0,
| |
| - | config.slice1scale = configData.slice1Scale || 1,
| |
| - | config.slice2angle = configData.slice2Rotation || 0,
| |
| - | config.slice2scale = configData.slice2Scale || 1;
| |
| - |
| |
| - | this._validateValues( config );
| |
| - |
| |
| - | var cssStyle = config.orientation === 'horizontal' ? {
| |
| - | marginTop : -this.size.height / 2
| |
| - | } : {
| |
| - | marginLeft : -this.size.width / 2
| |
| - | },
| |
| - | // default slide's slices style
| |
| - | resetStyle = {
| |
| - | 'transform' : 'translate(0%,0%) rotate(0deg) scale(1)',
| |
| - | opacity : 1
| |
| - | },
| |
| - | // slice1 style
| |
| - | slice1Style = config.orientation === 'horizontal' ? {
| |
| - | 'transform' : 'translateY(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
| |
| - | } : {
| |
| - | 'transform' : 'translateX(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
| |
| - | },
| |
| - | // slice2 style
| |
| - | slice2Style = config.orientation === 'horizontal' ? {
| |
| - | 'transform' : 'translateY(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
| |
| - | } : {
| |
| - | 'transform' : 'translateX(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
| |
| - | };
| |
| - |
| |
| - | if( this.options.optOpacity ) {
| |
| - |
| |
| - | slice1Style.opacity = 0;
| |
| - | slice2Style.opacity = 0;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | // we are adding the classes sl-trans-elems and sl-trans-back-elems to the slide that is either coming "next"
| |
| - | // or going "prev" according to the direction.
| |
| - | // the idea is to make it more interesting by giving some animations to the respective slide's elements
| |
| - | //( dir === 'next' ) ? $nextSlide.addClass( 'sl-trans-elems' ) : $currentSlide.addClass( 'sl-trans-back-elems' );
| |
| - |
| |
| - | $currentSlide.removeClass( 'sl-trans-elems' );
| |
| - |
| |
| - | var transitionProp = {
| |
| - | 'transition' : 'all ' + this.options.speed + 'ms ease-in-out'
| |
| - | };
| |
| - |
| |
| - | // add the 2 slices and animate them
| |
| - | $movingSlide.css( 'z-index', this.slidesCount )
| |
| - | .find( 'div.sl-content-wrapper' )
| |
| - | .wrap( $( '<div class="sl-content-slice" />' ).css( transitionProp ) )
| |
| - | .parent()
| |
| - | .cond(
| |
| - | dir === 'prev',
| |
| - | function() {
| |
| - |
| |
| - | var slice = this;
| |
| - | this.css( slice1Style );
| |
| - | setTimeout( function() {
| |
| - |
| |
| - | slice.css( resetStyle );
| |
| - |
| |
| - | }, 50 );
| |
| - |
| |
| - | },
| |
| - | function() {
| |
| - |
| |
| - | var slice = this;
| |
| - | setTimeout( function() {
| |
| - |
| |
| - | slice.css( slice1Style );
| |
| - |
| |
| - | }, 50 );
| |
| - |
| |
| - | }
| |
| - | )
| |
| - | .clone()
| |
| - | .appendTo( $movingSlide )
| |
| - | .cond(
| |
| - | dir === 'prev',
| |
| - | function() {
| |
| - |
| |
| - | var slice = this;
| |
| - | this.css( slice2Style );
| |
| - | setTimeout( function() {
| |
| - |
| |
| - | $currentSlide.addClass( 'sl-trans-back-elems' );
| |
| - |
| |
| - | if( self.support ) {
| |
| - |
| |
| - | slice.css( resetStyle ).on( self.transEndEventName, function() {
| |
| - |
| |
| - | self._onEndNavigate( slice, $currentSlide, dir );
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | }
| |
| - | else {
| |
| - |
| |
| - | self._onEndNavigate( slice, $currentSlide, dir );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | }, 50 );
| |
| - |
| |
| - | },
| |
| - | function() {
| |
| - |
| |
| - | var slice = this;
| |
| - | setTimeout( function() {
| |
| - |
| |
| - | $nextSlide.addClass( 'sl-trans-elems' );
| |
| - |
| |
| - | if( self.support ) {
| |
| - |
| |
| - | slice.css( slice2Style ).on( self.transEndEventName, function() {
| |
| - |
| |
| - | self._onEndNavigate( slice, $currentSlide, dir );
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | }
| |
| - | else {
| |
| - |
| |
| - | self._onEndNavigate( slice, $currentSlide, dir );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | }, 50 );
| |
| - |
| |
| - | }
| |
| - | )
| |
| - | .find( 'div.sl-content-wrapper' )
| |
| - | .css( cssStyle );
| |
| - |
| |
| - | $nextSlide.show();
| |
| - |
| |
| - | },
| |
| - | _validateValues : function( config ) {
| |
| - |
| |
| - | // OK, so we are restricting the angles and scale values here.
| |
| - | // This is to avoid the slices wrong sides to be shown.
| |
| - | // you can adjust these values as you wish but make sure you also ajust the
| |
| - | // paddings of the slides and also the options.translateFactor value and scale data attrs
| |
| - | if( config.slice1angle > this.options.maxAngle || config.slice1angle < -this.options.maxAngle ) {
| |
| - |
| |
| - | config.slice1angle = this.options.maxAngle;
| |
| - |
| |
| - | }
| |
| - | if( config.slice2angle > this.options.maxAngle || config.slice2angle < -this.options.maxAngle ) {
| |
| - |
| |
| - | config.slice2angle = this.options.maxAngle;
| |
| - |
| |
| - | }
| |
| - | if( config.slice1scale > this.options.maxScale || config.slice1scale <= 0 ) {
| |
| - |
| |
| - | config.slice1scale = this.options.maxScale;
| |
| - |
| |
| - | }
| |
| - | if( config.slice2scale > this.options.maxScale || config.slice2scale <= 0 ) {
| |
| - |
| |
| - | config.slice2scale = this.options.maxScale;
| |
| - |
| |
| - | }
| |
| - | if( config.orientation !== 'vertical' && config.orientation !== 'horizontal' ) {
| |
| - |
| |
| - | config.orientation = 'horizontal'
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | _onEndNavigate : function( $slice, $oldSlide, dir ) {
| |
| - |
| |
| - | // reset previous slide's style after next slide is shown
| |
| - | var $slide = $slice.parent(),
| |
| - | removeClasses = 'sl-trans-elems sl-trans-back-elems';
| |
| - |
| |
| - | // remove second slide's slice
| |
| - | $slice.remove();
| |
| - | // unwrap..
| |
| - | $slide.css( 'z-index', 1 )
| |
| - | .find( 'div.sl-content-wrapper' )
| |
| - | .unwrap();
| |
| - |
| |
| - | // hide previous current slide
| |
| - | $oldSlide.hide().removeClass( removeClasses );
| |
| - | $slide.removeClass( removeClasses );
| |
| - | // now we can navigate again..
| |
| - | this.isAnimating = false;
| |
| - | this.options.onAfterChange( $slide, this.current );
| |
| - |
| |
| - | },
| |
| - | _setSize : function() {
| |
| - |
| |
| - | // the slider and content wrappers will have the window's width and height
| |
| - | var cssStyle = {
| |
| - | width : this.size.width,
| |
| - | height : this.size.height
| |
| - | };
| |
| - |
| |
| - | this.$el.css( cssStyle ).find( 'div.sl-content-wrapper' ).css( cssStyle );
| |
| - |
| |
| - | },
| |
| - | _loadEvents : function() {
| |
| - |
| |
| - | var self = this;
| |
| - |
| |
| - | $window.on( 'debouncedresize.slitslider', function( event ) {
| |
| - |
| |
| - | // update size values
| |
| - | self._getSize();
| |
| - | // set the sizes again
| |
| - | self._setSize();
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | if ( this.options.keyboard ) {
| |
| - |
| |
| - | $document.on( 'keydown.slitslider', function(e) {
| |
| - |
| |
| - | var keyCode = e.keyCode || e.which,
| |
| - | arrow = {
| |
| - | left: 37,
| |
| - | up: 38,
| |
| - | right: 39,
| |
| - | down: 40
| |
| - | };
| |
| - |
| |
| - | switch (keyCode) {
| |
| - |
| |
| - | case arrow.left :
| |
| - |
| |
| - | self._stopSlideshow();
| |
| - | self._navigate( 'prev' );
| |
| - | break;
| |
| - |
| |
| - | case arrow.right :
| |
| - |
| |
| - | self._stopSlideshow();
| |
| - | self._navigate( 'next' );
| |
| - | break;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | _startSlideshow: function() {
| |
| - |
| |
| - | var self = this;
| |
| - |
| |
| - | this.slideshow = setTimeout( function() {
| |
| - |
| |
| - | self._navigate( 'next' );
| |
| - |
| |
| - | if ( self.options.autoplay ) {
| |
| - |
| |
| - | self._startSlideshow();
| |
| - |
| |
| - | }
| |
| - |
| |
| - | }, this.options.interval );
| |
| - |
| |
| - | },
| |
| - | _stopSlideshow: function() {
| |
| - |
| |
| - | if ( this.options.autoplay ) {
| |
| - |
| |
| - | clearTimeout( this.slideshow );
| |
| - | this.isPlaying = false;
| |
| - | this.options.autoplay = false;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | _destroy : function( callback ) {
| |
| - |
| |
| - | this.$el.off( '.slitslider' ).removeData( 'slitslider' );
| |
| - | $window.off( '.slitslider' );
| |
| - | $document.off( '.slitslider' );
| |
| - | this.$slides.each( function( i ) {
| |
| - |
| |
| - | var $slide = $( this ),
| |
| - | $content = $slide.find( 'div.sl-content' ).children();
| |
| - |
| |
| - | $content.appendTo( $slide );
| |
| - | $slide.children( 'div.sl-content-wrapper' ).remove();
| |
| - |
| |
| - | } );
| |
| - | this.$slides.unwrap( this.$slideWrapper ).hide();
| |
| - | this.$slides.eq( 0 ).show();
| |
| - | if( callback ) {
| |
| - |
| |
| - | callback.call();
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | // public methos: adds more slides to the slider
| |
| - | add : function( $slides, callback ) {
| |
| - |
| |
| - | this.$slides = this.$slides.add( $slides );
| |
| - |
| |
| - | var self = this;
| |
| - |
| |
| - |
| |
| - | $slides.each( function( i ) {
| |
| - |
| |
| - | var $slide = $( this ),
| |
| - | // vertical || horizontal
| |
| - | orientation = $slide.data( 'orientation' );
| |
| - |
| |
| - | $slide.hide().addClass( 'sl-slide-' + orientation )
| |
| - | .children()
| |
| - | .wrapAll( '<div class="sl-content-wrapper" />' )
| |
| - | .wrapAll( '<div class="sl-content" />' )
| |
| - | .end()
| |
| - | .appendTo( self.$el.find( 'div.sl-slides-wrapper' ) );
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | this._setSize();
| |
| - |
| |
| - | this.slidesCount = this.$slides.length;
| |
| - |
| |
| - | if ( callback ) {
| |
| - |
| |
| - | callback.call( $items );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | // public method: shows next slide
| |
| - | next : function() {
| |
| - |
| |
| - | this._stopSlideshow();
| |
| - | this._navigate( 'next' );
| |
| - |
| |
| - | },
| |
| - | // public method: shows previous slide
| |
| - | previous : function() {
| |
| - |
| |
| - | this._stopSlideshow();
| |
| - | this._navigate( 'prev' );
| |
| - |
| |
| - | },
| |
| - | // public method: goes to a specific slide
| |
| - | jump : function( pos ) {
| |
| - |
| |
| - | pos -= 1;
| |
| - |
| |
| - | if( pos === this.current || pos >= this.slidesCount || pos < 0 ) {
| |
| - |
| |
| - | return false;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | this._stopSlideshow();
| |
| - | this._navigate( pos > this.current ? 'next' : 'prev', pos );
| |
| - |
| |
| - | },
| |
| - | // public method: starts the slideshow
| |
| - | // any call to next(), previous() or jump() will stop the slideshow
| |
| - | play : function() {
| |
| - |
| |
| - | if( !this.isPlaying ) {
| |
| - |
| |
| - | this.isPlaying = true;
| |
| - |
| |
| - | this._navigate( 'next' );
| |
| - | this.options.autoplay = true;
| |
| - | this._startSlideshow();
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | // public method: pauses the slideshow
| |
| - | pause : function() {
| |
| - |
| |
| - | if( this.isPlaying ) {
| |
| - |
| |
| - | this._stopSlideshow();
| |
| - |
| |
| - | }
| |
| - |
| |
| - | },
| |
| - | // public method: check if isAnimating is true
| |
| - | isActive : function() {
| |
| - |
| |
| - | return this.isAnimating;
| |
| - |
| |
| - | },
| |
| - | // publicc methos: destroys the slicebox instance
| |
| - | destroy : function( callback ) {
| |
| - |
| |
| - | this._destroy( callback );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | };
| |
| - |
| |
| - | var logError = function( message ) {
| |
| - |
| |
| - | if ( window.console ) {
| |
| - |
| |
| - | window.console.error( message );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | };
| |
| - |
| |
| - | $.fn.slitslider = function( options ) {
| |
| - |
| |
| - | var self = $.data( this, 'slitslider' );
| |
| - |
| |
| - | if ( typeof options === 'string' ) {
| |
| - |
| |
| - | var args = Array.prototype.slice.call( arguments, 1 );
| |
| - |
| |
| - | this.each(function() {
| |
| - |
| |
| - | if ( !self ) {
| |
| - |
| |
| - | logError( "cannot call methods on slitslider prior to initialization; " +
| |
| - | "attempted to call method '" + options + "'" );
| |
| - | return;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | if ( !$.isFunction( self[options] ) || options.charAt(0) === "_" ) {
| |
| - |
| |
| - | logError( "no such method '" + options + "' for slitslider self" );
| |
| - | return;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | self[ options ].apply( self, args );
| |
| - |
| |
| - | });
| |
| - |
| |
| - | }
| |
| - | else {
| |
| - |
| |
| - | this.each(function() {
| |
| - |
| |
| - | if ( self ) {
| |
| - |
| |
| - | self._init();
| |
| - |
| |
| - | }
| |
| - | else {
| |
| - |
| |
| - | self = $.data( this, 'slitslider', new $.Slitslider( options, this ) );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | });
| |
| - |
| |
| - | }
| |
| - |
| |
| - | return self;
| |
| - |
| |
| - | };
| |
| - |
| |
| - | } )( jQuery, window );
| |
| - | </script>
| |
| - | <script type="text/javascript">
| |
| - | $(function() {
| |
| - |
| |
| - | var Page = (function() {
| |
| - |
| |
| - | var $navArrows = $( '#nav-arrows' ),
| |
| - | $nav = $( '#nav-dots > span' ),
| |
| - | slitslider = $( '#slider' ).slitslider( {
| |
| - | onBeforeChange : function( slide, pos ) {
| |
| - |
| |
| - | $nav.removeClass( 'nav-dot-current' );
| |
| - | $nav.eq( pos ).addClass( 'nav-dot-current' );
| |
| - |
| |
| - | }
| |
| - | } ),
| |
| - |
| |
| - | init = function() {
| |
| - |
| |
| - | initEvents();
| |
| - |
| |
| - | },
| |
| - | initEvents = function() {
| |
| - |
| |
| - | // add navigation events
| |
| - | $navArrows.children( ':last' ).on( 'click', function() {
| |
| - |
| |
| - | slitslider.next();
| |
| - | return false;
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | $navArrows.children( ':first' ).on( 'click', function() {
| |
| - |
| |
| - | slitslider.previous();
| |
| - | return false;
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | $nav.each( function( i ) {
| |
| - |
| |
| - | $( this ).on( 'click', function( event ) {
| |
| - |
| |
| - | var $dot = $( this );
| |
| - |
| |
| - | if( !slitslider.isActive() ) {
| |
| - |
| |
| - | $nav.removeClass( 'nav-dot-current' );
| |
| - | $dot.addClass( 'nav-dot-current' );
| |
| - |
| |
| - | }
| |
| - |
| |
| - | slitslider.jump( i + 1 );
| |
| - | return false;
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | } );
| |
| - |
| |
| - | };
| |
| - |
| |
| - | return { init : init };
| |
| - |
| |
| - | })();
| |
| - |
| |
| - | Page.init();
| |
| - |
| |
| - | /**
| |
| - | * Notes:
| |
| - | *
| |
| - | * example how to add items:
| |
| - | */
| |
| - |
| |
| - | /*
| |
| - |
| |
| - | var $items = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
| |
| - |
| |
| - | // call the plugin's add method
| |
| - | ss.add($items);
| |
| - |
| |
| - | */
| |
| - |
| |
| - | });
| |
| - | </script>
| |
| - |
| |
| - |
| |
| - | <!--END-->
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | </div>
| |
| - |
| |
| - | </body>
| |
| - | </div>
| |
| - | </html>
| |
"
