|
|
| (3 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| | {{Ecuador}} | | {{Ecuador}} |
| | + | {{Ecuador/slide_script}} |
| | <html> | | <html> |
| | + | |
| | <head> | | <head> |
| | <meta charset="utf-8"> | | <meta charset="utf-8"> |
| Line 9: |
Line 11: |
| | .ec--modeling--container{ | | .ec--modeling--container{ |
| | padding-top: 100px; | | padding-top: 100px; |
| − | padding-right: 300px; | + | padding-right: 14%; |
| | padding-bottom: 100px; | | padding-bottom: 100px; |
| − | padding-left: 300px; | + | padding-left: 38%; |
| | } | | } |
| | .ec--main--title{ | | .ec--main--title{ |
| Line 28: |
Line 30: |
| | } | | } |
| | .ec--modeling--items{ | | .ec--modeling--items{ |
| | + | width: 270px; |
| | display: block; | | display: block; |
| | position: fixed; | | position: fixed; |
| − | float: right; | + | float: left; |
| − | right: 64px; | + | top: 250px; /*position: -webkit-sticky; |
| − | top: 200px; | + | position: sticky; |
| | + | padding-bottom: 0px; |
| | + | margin-top: 11.4em;*/ |
| | + | left: 14%; |
| | + | line-height: 1.3; |
| | + | text-indent: inherit; |
| | + | } |
| | + | ul.circle { |
| | + | list-style-type: circle; |
| | } | | } |
| | .ec--biob--cont{ | | .ec--biob--cont{ |
| Line 77: |
Line 88: |
| | } | | } |
| | #leftBox { | | #leftBox { |
| − | float:left;
| + | float: left; |
| − | height:300px;
| + | height: 300px; |
| − | width: 390px;
| + | width: 390px; |
| − | margin:0;
| + | margin: 0; |
| | } | | } |
| | #rightBox { | | #rightBox { |
| Line 93: |
Line 104: |
| | padding-left: 25px; | | padding-left: 25px; |
| | } | | } |
| − | | + | .ec--h2{ |
| − | </style>
| + | font-size: 25px; |
| − | | + | font-weight: bolder; |
| − | <style> | + | display: block; |
| − | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
| + | margin-top: 15px; |
| − | | + | margin-bottom: 15px; |
| − | /**
| + | clear: both; |
| − | * 1. Set default font family to sans-serif.
| + | padding-top: 20px; |
| − | * 2. Prevent iOS text size adjust after orientation change, without disabling
| + | padding-bottom: 20px; |
| − | * user zoom.
| + | color: black; |
| − | */
| + | line-height: 40px; |
| − | | + | |
| − | html {
| + | |
| − | font-family: sans-serif; /* 1 */
| + | |
| − | -ms-text-size-adjust: 100%; /* 2 */
| + | |
| − | -webkit-text-size-adjust: 100%; /* 2 */
| + | |
| | } | | } |
| − | | + | .ec--p{ |
| − | /**
| + | display: block; |
| − | * Remove default margin.
| + | line-height: 2; |
| − | */
| + | text-align: justify; |
| − | | + | font-size: 16px; |
| − | body {
| + | |
| − | margin: 0;
| + | |
| | } | | } |
| − | | + | .ec--coll--video{ |
| − | /* HTML5 display definitions
| + | display: block; |
| − | ========================================================================== */
| + | clear: both; |
| − | | + | text-align: center; |
| − | /**
| + | padding-top: 30px; |
| − | * Correct `block` display not defined for any HTML5 element in IE 8/9.
| + | padding-bottom: 30px; |
| − | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
| + | |
| − | * Correct `block` display not defined for `main` in IE 11.
| + | |
| − | */
| + | |
| − | | + | |
| − | article,
| + | |
| − | aside,
| + | |
| − | details,
| + | |
| − | figcaption,
| + | |
| − | figure,
| + | |
| − | footer,
| + | |
| − | header,
| + | |
| − | hgroup,
| + | |
| − | main,
| + | |
| − | nav,
| + | |
| − | section,
| + | |
| − | summary {
| + | |
| − | display: block;
| + | |
| | } | | } |
| − | | + | .ec--coll--letter{ |
| − | /**
| + | text-align: justify; |
| − | * 1. Correct `inline-block` display not defined in IE 8/9.
| + | display: block; |
| − | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
| + | margin-left: 20px; |
| − | */
| + | margin-right: 20px; |
| − | | + | margin-top: 20px; |
| − | audio,
| + | margin-bottom: 20px; |
| − | canvas,
| + | width: 900px; |
| − | progress,
| + | |
| − | video {
| + | |
| − | display: inline-block; /* 1 */
| + | |
| − | vertical-align: baseline; /* 2 */
| + | |
| | } | | } |
| − | | + | .ec--img--surv{ |
| − | /**
| + | top: 0; |
| − | * Prevent modern browsers from displaying `audio` without controls.
| + | |
| − | * Remove excess height in iOS 5 devices.
| + | |
| − | */
| + | |
| − | | + | |
| − | audio:not([controls]) {
| + | |
| − | display: none;
| + | |
| − | height: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Address `[hidden]` styling not present in IE 8/9/10.
| + | |
| − | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
| + | |
| − | */
| + | |
| − | | + | |
| − | [hidden],
| + | |
| − | template {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Links
| + | |
| − | ========================================================================== */
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Remove the gray background color from active links in IE 10.
| + | |
| − | */
| + | |
| − | | + | |
| − | a {
| + | |
| − | background: transparent;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Improve readability when focused and also mouse hovered in all browsers.
| + | |
| − | */
| + | |
| − | | + | |
| − | a:active,
| + | |
| − | a:hover {
| + | |
| − | outline: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Text-level semantics
| + | |
| − | ========================================================================== */
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
| + | |
| − | */
| + | |
| − | | + | |
| − | abbr[title] {
| + | |
| − | border-bottom: 1px dotted;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
| + | |
| − | */
| + | |
| − | | + | |
| − | b,
| + | |
| − | strong {
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Address styling not present in Safari and Chrome.
| + | |
| − | */
| + | |
| − | | + | |
| − | dfn {
| + | |
| − | font-style: italic;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Address variable `h1` font-size and margin within `section` and `article`
| + | |
| − | * contexts in Firefox 4+, Safari, and Chrome.
| + | |
| − | */
| + | |
| − | | + | |
| − | h1 {
| + | |
| − | font-size: 2em;
| + | |
| − | margin: 0.67em 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Address styling not present in IE 8/9.
| + | |
| − | */
| + | |
| − | | + | |
| − | mark {
| + | |
| − | background: #ff0;
| + | |
| − | color: #000;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Address inconsistent and variable font size in all browsers.
| + | |
| − | */
| + | |
| − | | + | |
| − | small {
| + | |
| − | font-size: 80%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
| + | |
| − | */
| + | |
| − | | + | |
| − | sub,
| + | |
| − | sup {
| + | |
| − | font-size: 75%;
| + | |
| − | line-height: 0;
| + | |
| − | position: relative;
| + | |
| − | vertical-align: baseline;
| + | |
| − | }
| + | |
| − | | + | |
| − | sup {
| + | |
| − | top: -0.5em;
| + | |
| − | }
| + | |
| − | | + | |
| − | sub {
| + | |
| − | bottom: -0.25em;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Embedded content
| + | |
| − | ========================================================================== */
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Remove border when inside `a` element in IE 8/9/10.
| + | |
| − | */
| + | |
| − | | + | |
| − | img {
| + | |
| − | border: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Correct overflow not hidden in IE 9/10/11.
| + | |
| − | */
| + | |
| − | | + | |
| − | svg:not(:root) {
| + | |
| − | overflow: hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Grouping content
| + | |
| − | ========================================================================== */
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Address margin not present in IE 8/9 and Safari.
| + | |
| − | */
| + | |
| − | | + | |
| − | figure {
| + | |
| − | margin: 1em 40px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Address differences between Firefox and other browsers.
| + | |
| − | */
| + | |
| − | | + | |
| − | hr {
| + | |
| − | -moz-box-sizing: content-box;
| + | |
| − | box-sizing: content-box;
| + | |
| − | height: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Contain overflow in all browsers.
| + | |
| − | */
| + | |
| − | | + | |
| − | pre {
| + | |
| − | overflow: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Address odd `em`-unit font size rendering in all browsers.
| + | |
| − | */
| + | |
| − | | + | |
| − | code,
| + | |
| − | kbd,
| + | |
| − | pre,
| + | |
| − | samp {
| + | |
| − | font-family: monospace, monospace;
| + | |
| − | font-size: 1em;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Forms
| + | |
| − | ========================================================================== */
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Known limitation: by default, Chrome and Safari on OS X allow very limited
| + | |
| − | * styling of `select`, unless a `border` property is set.
| + | |
| − | */
| + | |
| − | | + | |
| − | /**
| + | |
| − | * 1. Correct color not being inherited.
| + | |
| − | * Known issue: affects color of disabled elements.
| + | |
| − | * 2. Correct font properties not being inherited.
| + | |
| − | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
| + | |
| − | */
| + | |
| − | | + | |
| − | button,
| + | |
| − | input,
| + | |
| − | optgroup,
| + | |
| − | select,
| + | |
| − | textarea {
| + | |
| − | color: inherit; /* 1 */
| + | |
| − | font: inherit; /* 2 */
| + | |
| − | margin: 0; /* 3 */
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Address `overflow` set to `hidden` in IE 8/9/10/11.
| + | |
| − | */
| + | |
| − | | + | |
| − | button {
| + | |
| − | overflow: visible;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Address inconsistent `text-transform` inheritance for `button` and `select`.
| + | |
| − | * All other form control elements do not inherit `text-transform` values.
| + | |
| − | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
| + | |
| − | * Correct `select` style inheritance in Firefox.
| + | |
| − | */
| + | |
| − | | + | |
| − | button,
| + | |
| − | select {
| + | |
| − | text-transform: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
| + | |
| − | * and `video` controls.
| + | |
| − | * 2. Correct inability to style clickable `input` types in iOS.
| + | |
| − | * 3. Improve usability and consistency of cursor style between image-type
| + | |
| − | * `input` and others.
| + | |
| − | */
| + | |
| − | | + | |
| − | button,
| + | |
| − | html input[type="button"], /* 1 */
| + | |
| − | input[type="reset"],
| + | |
| − | input[type="submit"] {
| + | |
| − | -webkit-appearance: button; /* 2 */
| + | |
| − | cursor: pointer; /* 3 */
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Re-set default cursor for disabled elements.
| + | |
| − | */
| + | |
| − | | + | |
| − | button[disabled],
| + | |
| − | html input[disabled] {
| + | |
| − | cursor: default;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Remove inner padding and border in Firefox 4+.
| + | |
| − | */
| + | |
| − | | + | |
| − | button::-moz-focus-inner,
| + | |
| − | input::-moz-focus-inner {
| + | |
| − | border: 0;
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
| + | |
| − | * the UA stylesheet.
| + | |
| − | */
| + | |
| − | | + | |
| − | input {
| + | |
| − | line-height: normal;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * It's recommended that you don't attempt to style these elements.
| + | |
| − | * Firefox's implementation doesn't respect box-sizing, padding, or width.
| + | |
| − | *
| + | |
| − | * 1. Address box sizing set to `content-box` in IE 8/9/10.
| + | |
| − | * 2. Remove excess padding in IE 8/9/10.
| + | |
| − | */
| + | |
| − | | + | |
| − | input[type="checkbox"],
| + | |
| − | input[type="radio"] {
| + | |
| − | box-sizing: border-box; /* 1 */
| + | |
| − | padding: 0; /* 2 */
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Fix the cursor style for Chrome's increment/decrement buttons. For certain
| + | |
| − | * `font-size` values of the `input`, it causes the cursor style of the
| + | |
| − | * decrement button to change from `default` to `text`.
| + | |
| − | */
| + | |
| − | | + | |
| − | input[type="number"]::-webkit-inner-spin-button,
| + | |
| − | input[type="number"]::-webkit-outer-spin-button {
| + | |
| − | height: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
| + | |
| − | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
| + | |
| − | * (include `-moz` to future-proof).
| + | |
| − | */
| + | |
| − | | + | |
| − | input[type="search"] {
| + | |
| − | -webkit-appearance: textfield; /* 1 */
| + | |
| − | -moz-box-sizing: content-box;
| + | |
| − | -webkit-box-sizing: content-box; /* 2 */
| + | |
| − | box-sizing: content-box;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Remove inner padding and search cancel button in Safari and Chrome on OS X.
| + | |
| − | * Safari (but not Chrome) clips the cancel button when the search input has
| + | |
| − | * padding (and `textfield` appearance).
| + | |
| − | */
| + | |
| − | | + | |
| − | input[type="search"]::-webkit-search-cancel-button,
| + | |
| − | input[type="search"]::-webkit-search-decoration {
| + | |
| − | -webkit-appearance: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Define consistent border, margin, and padding.
| + | |
| − | */
| + | |
| − | | + | |
| − | fieldset {
| + | |
| − | border: 1px solid #c0c0c0;
| + | |
| − | margin: 0 2px;
| + | |
| − | padding: 0.35em 0.625em 0.75em;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * 1. Correct `color` not being inherited in IE 8/9/10/11.
| + | |
| − | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
| + | |
| − | */
| + | |
| − | | + | |
| − | legend {
| + | |
| − | border: 0; /* 1 */
| + | |
| − | padding: 0; /* 2 */
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Remove default vertical scrollbar in IE 8/9/10/11.
| + | |
| − | */
| + | |
| − | | + | |
| − | textarea {
| + | |
| − | overflow: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Don't inherit the `font-weight` (applied by a rule above).
| + | |
| − | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
| + | |
| − | */
| + | |
| − | | + | |
| − | optgroup {
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Tables
| + | |
| − | ========================================================================== */
| + | |
| − | | + | |
| − | /**
| + | |
| − | * Remove most spacing between table cells.
| + | |
| − | */
| + | |
| − | | + | |
| − | table {
| + | |
| − | border-collapse: collapse;
| + | |
| − | border-spacing: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | td,
| + | |
| − | th {
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | </style>
| + | |
| − | <style>
| + | |
| − | /*
| + | |
| − | * Ideal Image Slider v1.5.1
| + | |
| − | *
| + | |
| − | * By Gilbert Pellegrom
| + | |
| − | * http://gilbert.pellegrom.me
| + | |
| − | *
| + | |
| − | * Copyright (C) 2014 Dev7studios
| + | |
| − | * https://raw.githubusercontent.com/gilbitron/Ideal-Image-Slider/master/LICENSE
| + | |
| − | */
| + | |
| − | | + | |
| − | .ideal-image-slider {
| + | |
| − | position: relative;
| + | |
| − | overflow: hidden;
| + | |
| − | }
| + | |
| − | .iis-slide {
| + | |
| − | display: block;
| + | |
| | bottom: 0; | | bottom: 0; |
| − | text-decoration: none;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| | left: 0; | | left: 0; |
| − | width: 100%; | + | right: 0; |
| − | height: 100%; | + | margin: auto; |
| − | background-repeat: no-repeat; | + | padding-top: 20px; |
| − | background-position: 50% 50%; | + | padding-bottom: 20px; |
| − | background-size: cover;
| + | |
| − | text-indent: -9999px;
| + | |
| | } | | } |
| | + | .anchorOffset{ |
| | | | |
| − | /* Slide effect */
| + | display: block !important; |
| − | .iis-effect-slide .iis-slide {
| + | position: relative !important; |
| − | opacity: 0;
| + | top: -135px !important; |
| − | -webkit-transition-property: -webkit-transform;
| + | visibility: hidden !important; |
| − | -moz-transition-property: -moz-transform;
| + | |
| − | -o-transition-property: -o-transform;
| + | |
| − | transition-property: transform;
| + | |
| − | -webkit-transition-timing-function: ease-out;
| + | |
| − | -moz-transition-timing-function: ease-out;
| + | |
| − | -o-transition-timing-function: ease-out;
| + | |
| − | transition-timing-function: ease-out;
| + | |
| − | -webkit-transform: translateX(0%);
| + | |
| − | -ms-transform: translateX(0%);
| + | |
| − | transform: translateX(0%);
| + | |
| − | }
| + | |
| − | .iis-effect-slide .iis-current-slide {
| + | |
| − | opacity: 1;
| + | |
| − | z-index: 1;
| + | |
| − | }
| + | |
| − | .iis-effect-slide .iis-previous-slide {
| + | |
| − | -webkit-transform: translateX(-100%);
| + | |
| − | -ms-transform: translateX(-100%);
| + | |
| − | transform: translateX(-100%);
| + | |
| − | }
| + | |
| − | .iis-effect-slide .iis-next-slide {
| + | |
| − | -webkit-transform: translateX(100%);
| + | |
| − | -ms-transform: translateX(100%);
| + | |
| − | transform: translateX(100%);
| + | |
| − | }
| + | |
| − | .iis-effect-slide.iis-direction-next .iis-previous-slide,
| + | |
| − | .iis-effect-slide.iis-direction-previous .iis-next-slide { opacity: 1; }
| + | |
| | | | |
| − | /* Touch styles */
| |
| − | .iis-touch-enabled .iis-slide { z-index: 1; }
| |
| − | .iis-touch-enabled .iis-current-slide { z-index: 2; }
| |
| − | .iis-touch-enabled.iis-is-touching .iis-previous-slide,
| |
| − | .iis-touch-enabled.iis-is-touching .iis-next-slide { opacity: 1; }
| |
| − |
| |
| − | /* Fade effect */
| |
| − | .iis-effect-fade .iis-slide {
| |
| − | -webkit-transition-property: opacity;
| |
| − | -moz-transition-property: opacity;
| |
| − | -o-transition-property: opacity;
| |
| − | transition-property: opacity;
| |
| − | -webkit-transition-timing-function: ease-in;
| |
| − | -moz-transition-timing-function: ease-in;
| |
| − | -o-transition-timing-function: ease-in;
| |
| − | transition-timing-function: ease-in;
| |
| − | opacity: 0;
| |
| | } | | } |
| − | .iis-effect-fade .iis-current-slide { | + | a.lateral{ |
| − | opacity: 1;
| + | color: black; |
| − | z-index: 1;
| + | text-decoration: inherit; |
| | + | opacity: 1; |
| | + | color: gray; |
| | + | font-weight: 500; |
| | + | font-size: 16px; |
| | } | | } |
| − | | + | a.inner-link--active { |
| − | </style>
| + | opacity: 1; |
| − | <style>
| + | animation: bulge .5s ease; |
| − | /*
| + | -webkit-animation: bulge .5s ease; |
| − | * Ideal Image Slider v1.5.1
| + | |
| − | *
| + | |
| − | * By Gilbert Pellegrom
| + | |
| − | * http://gilbert.pellegrom.me
| + | |
| − | *
| + | |
| − | * Copyright (C) 2014 Dev7studios
| + | |
| − | * https://raw.githubusercontent.com/gilbitron/Ideal-Image-Slider/master/LICENSE
| + | |
| − | */
| + | |
| − | | + | |
| − | .ideal-image-slider {
| + | |
| − | position: relative;
| + | |
| − | overflow: hidden;
| + | |
| | } | | } |
| − | .iis-slide { | + | .ec--h3{ |
| | + | font-size: 22px; |
| | + | font-weight: bolder; |
| | display: block; | | display: block; |
| − | bottom: 0; | + | margin-top: 15px; |
| − | text-decoration: none;
| + | margin-bottom: 15px; |
| − | position: absolute;
| + | clear: both; |
| − | top: 0;
| + | padding-top: 20px; |
| − | left: 0; | + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | background-position: 50% 50%; | + | |
| − | background-size: cover; | + | |
| − | text-indent: -9999px; | + | |
| | } | | } |
| − | | + | #ec--box--img--stat{ |
| − | /* Slide effect */
| + | width: 800px; |
| − | .iis-effect-slide .iis-slide {
| + | margin-top: 20px; |
| − | opacity: 0;
| + | margin-bottom: 20px; |
| − | -webkit-transition-property: -webkit-transform; | + | display: block; |
| − | -moz-transition-property: -moz-transform;
| + | clear: both; |
| − | -o-transition-property: -o-transform;
| + | height: 300px; |
| − | transition-property: transform;
| + | |
| − | -webkit-transition-timing-function: ease-out; | + | |
| − | -moz-transition-timing-function: ease-out;
| + | |
| − | -o-transition-timing-function: ease-out;
| + | |
| − | transition-timing-function: ease-out;
| + | |
| − | -webkit-transform: translateX(0%); | + | |
| − | -ms-transform: translateX(0%);
| + | |
| − | transform: translateX(0%);
| + | |
| | } | | } |
| − | .iis-effect-slide .iis-current-slide {
| + | #leftBox { |
| − | opacity: 1; | + | float: left; |
| − | z-index: 1; | + | height: 300px; |
| | + | width: 390px; |
| | } | | } |
| − | .iis-effect-slide .iis-previous-slide {
| + | #rightBox { |
| − | -webkit-transform: translateX(-100%); | + | float: right; |
| − | -ms-transform: translateX(-100%);
| + | height: 300px; |
| − | transform: translateX(-100%);
| + | width: 390px; |
| − | }
| + | |
| − | .iis-effect-slide .iis-next-slide {
| + | |
| − | -webkit-transform: translateX(100%); | + | |
| − | -ms-transform: translateX(100%);
| + | |
| − | transform: translateX(100%);
| + | |
| | } | | } |
| − | .iis-effect-slide.iis-direction-next .iis-previous-slide,
| |
| − | .iis-effect-slide.iis-direction-previous .iis-next-slide { opacity: 1; }
| |
| | | | |
| − | /* Touch styles */
| |
| − | .iis-touch-enabled .iis-slide { z-index: 1; }
| |
| − | .iis-touch-enabled .iis-current-slide { z-index: 2; }
| |
| − | .iis-touch-enabled.iis-is-touching .iis-previous-slide,
| |
| − | .iis-touch-enabled.iis-is-touching .iis-next-slide { opacity: 1; }
| |
| | | | |
| − | /* Fade effect */
| |
| − | .iis-effect-fade .iis-slide {
| |
| − | -webkit-transition-property: opacity;
| |
| − | -moz-transition-property: opacity;
| |
| − | -o-transition-property: opacity;
| |
| − | transition-property: opacity;
| |
| − | -webkit-transition-timing-function: ease-in;
| |
| − | -moz-transition-timing-function: ease-in;
| |
| − | -o-transition-timing-function: ease-in;
| |
| − | transition-timing-function: ease-in;
| |
| − | opacity: 0;
| |
| − | }
| |
| − | .iis-effect-fade .iis-current-slide {
| |
| − | opacity: 1;
| |
| − | z-index: 1;
| |
| − | }
| |
| | </style> | | </style> |
| | + | |
| | </head> | | </head> |
| | | | |
| | <body> | | <body> |
| − | <div class="ec--modeling--container"> | + | <div class="ec--modeling--container"> |
| | <div class="ec--first--section"> | | <div class="ec--first--section"> |
| | <div class="ec--main--title"> | | <div class="ec--main--title"> |
| − | <a name="MOD" style="text-decoration: none;"> | + | <a name="l1" style="text-decoration: none;"></a> |
| − | <h1>Best Integrated Human Practices</h1></a>
| + | <h1> |
| | + | Best Integrated Human Practices |
| | + | </h1> |
| | </div> | | </div> |
| | <div class="ec--modeling--items"> | | <div class="ec--modeling--items"> |
| − | <ul> | + | < h3><a href="# l1" style="color:black; text-decoration: none"> Index</a></ h3> |
| − | <li><a href="# MOD"> Modeling</a></ li> | + | <ul class="circle"> |
| − | <li><a href="#WWD">Massive diffusion</a></li>
| + | <li><a href="#l1" style="color:black; text-decoration: none">Public Engagement</a></li> |
| − | <li><a href="#HWD">Dissemination in educational centers</a></li> | + | <li><a href="# l2" style="color:black; text-decoration: none"> Participation in laws</a></li> |
| − | <li><a href="# RES"> Dissemination through courses</a></li> | + | <li><a href="# l3" style="color:black; text-decoration: none"> Socialization of the project in the industry</a></li> |
| − | <li><a href="# EXP"> Conclusions</a></li> | + | |
| | </ul> | | </ul> |
| | </div> | | </div> |
| − | <div class="ec--img--home--slider"><p><center><img width="588" height="420" src="https://static.igem.org/mediawiki/2018/d/d6/T--ECUADOR--Modeling.jpeg"></center></p></div> | + | |
| | </div> | | </div> |
| | | | |
| | <div class="ec--nau--content"> | | <div class="ec--nau--content"> |
| − | <div class="ec--sect--title"> | + | <div class="ec--sect--title"> |
| − | <a name="WWD" style="text-decoration: none;"> | + | <a name="l2" style="text-decoration: none;"></a> |
| − | <h2>Participation in laws</h2></a> | + | <h2>Participation in laws</h2> |
| − | <p>In this section of human practices we focus on the development of a proposal to improve laws that require clarification or correction of concept. For this we work together with members of the Ministry of the Environment of Ecuador, participating in this way in the formation of the criterion on synthetic biology and digital information of sequences of genetic resources in Ecuador.</p> | + | <p>In this section of human practices we focus on the development of a proposal to improve laws that require clarification or correction of concept. For this we work together with members of the Ministry of the Environment of Ecuador, participating in this way in the formation of the criterion on synthetic biology and digital information of sequences of genetic resources in Ecuador. |
| − | <p>slide 1</p>
| + | </p> |
| − | https://static.igem.org/mediawiki/2018/a/a0/T--Ecuador--pl--slide1.jpg
| + | <div id="slider_Part_Law_1"> |
| − | https://static.igem.org/mediawiki/2018/1/17/T--Ecuador--pl--slide2.jpg
| + | <img src="https://static.igem.org/mediawiki/2018/a/a0/T--Ecuador--pl--slide1.jpg" data-src-2x="https://static.igem.org/mediawiki/2018/a/a0/T--Ecuador--pl--slide1.jpg" title="Liga Highschool" alt="Reunion" /> |
| − | https://static.igem.org/mediawiki/2018/c/c0/T--Ecuador--pl--slide3.jpg
| + | <img data-src="https://static.igem.org/mediawiki/2018/1/17/T--Ecuador--pl--slide2.jpg" data-src-2x="https://static.igem.org/mediawiki/2018/1/17/T--Ecuador--pl--slide2.jpg" src="" title="Liceo Policial Highschool" alt="From Ecuador" /> |
| − | | + | <img data-src="https://static.igem.org/mediawiki/2018/c/c0/T--Ecuador--pl--slide3.jpg" data-src-2x="https://static.igem.org/mediawiki/2018/c/c0/T--Ecuador--pl--slide3.jpg" src="" alt="Emile Jaque Dalcroze Highschool" data-caption="Reunion" /> |
| − | <p>slide 2</p>
| + | </div> |
| − | https://static.igem.org/mediawiki/2018/2/22/T--Ecuador--pl--slideministerio.jpg
| + | |
| − | https://static.igem.org/mediawiki/2018/f/f9/T--Ecuador--pl--slideministerio2.jpg
| + | |
| − | | + | <div id="slider_Part_Law_2"> |
| | + | <img src="https://static.igem.org/mediawiki/2018/2/22/T--Ecuador--pl--slideministerio.jpg" data-src-2x="https://static.igem.org/mediawiki/2018/2/22/T--Ecuador--pl--slideministerio.jpg" title="Liga Highschool" alt="Reunion" /> |
| | + | <img data-src="https://static.igem.org/mediawiki/2018/f/f9/T--Ecuador--pl--slideministerio2.jpg" data-src-2x="https://static.igem.org/mediawiki/2018/f/f9/T--Ecuador--pl--slideministerio2.jpg" src="" title="Liceo Policial Highschool" alt="From Ecuador" /> |
| | + | <img data-src="https://static.igem.org/mediawiki/2018/2/22/T--Ecuador--pl--slideministerio.jpg" data-src-2x="https://static.igem.org/mediawiki/2018/2/22/T--Ecuador--pl--slideministerio.jpg" src="" alt="Emile Jaque Dalcroze Highschool" data-caption="Reunion" /> |
| | + | <img data-src="https://static.igem.org/mediawiki/2018/f/f9/T--Ecuador--pl--slideministerio2.jpg" data-src-2x="https://static.igem.org/mediawiki/2018/f/f9/T--Ecuador--pl--slideministerio2.jpg" src="" title="Liceo Policial Highschool" alt="From Ecuador" /> |
| | + | </div> |
| | + | |
| | In addition, a document was formulated with the proposed amendments to the law, which was delivered to the Ministry of the Environment of Ecuador for analysis by the corresponding Minister. | | In addition, a document was formulated with the proposed amendments to the law, which was delivered to the Ministry of the Environment of Ecuador for analysis by the corresponding Minister. |
| − | | + | |
| | <p>In the process of this part we were able to have conversations with the Association of Biotechnologists of Ecuador who communicated their support in correcting the document presented to the Ministry. We have managed to participate in the formation of the criterion on synthetic biology with the experience of being the first project carried out in the country of this nature, giving it valuable information, in addition a document that is under evaluation to improve the conditions for the realization of synthetic biology was provided in the country. </p> | | <p>In the process of this part we were able to have conversations with the Association of Biotechnologists of Ecuador who communicated their support in correcting the document presented to the Ministry. We have managed to participate in the formation of the criterion on synthetic biology with the experience of being the first project carried out in the country of this nature, giving it valuable information, in addition a document that is under evaluation to improve the conditions for the realization of synthetic biology was provided in the country. </p> |
| − | <h2>Socialization of the project in the industry</h2> | + | <a name="l3" style="text-decoration: none;"></a> |
| − | <p>slide 3</p>
| + | <h2>Socialization of the project in the industry </h2> |
| − |
| + | <p>The participants of the course realized an exercise that had as objective to see what would be the probable applications that they would give from their field of work or expertise of the work area. The main ideas found were:</p> |
| − |
| + | |
| − | <p>The participants of the course realized an exercise that had as objective to see what would be the probable applications that they would give from their field of work or expertise of the work area. The main ideas found were:</p> | + | |
| | <ul> | | <ul> |
| | <li>Cellulose linked to proteins capable of capturing heavy metals</li> | | <li>Cellulose linked to proteins capable of capturing heavy metals</li> |
| Line 749: |
Line 259: |
| | </li> | | </li> |
| | </ul> | | </ul> |
| − | <p>Fotos de dibujos</p>
| + | |
| | <p>In addition, we also talked with doctors belonging to the Hospital to verify if the product would be applicable in the bone regeneration and for a possible collaboration in the future for the preclinical and clinical phases, to which they were very enthusiastic with the project and are looking forward to the finalization in the future to begin collaboration. </p> | | <p>In addition, we also talked with doctors belonging to the Hospital to verify if the product would be applicable in the bone regeneration and for a possible collaboration in the future for the preclinical and clinical phases, to which they were very enthusiastic with the project and are looking forward to the finalization in the future to begin collaboration. </p> |
| − | <p> </p>
| + | <center> |
| − | <img src="https://static.igem.org/mediawiki/2018/f/fe/T--Ecuador--si--lf.jpg" width="620" height="877" alt=""/></div> | + | <img src="https://static.igem.org/mediawiki/2018/f/fe/T--Ecuador--si--lf.jpg" width="620" height="877" alt=""/> |
| | + | </center> |
| | + | <p> </p> |
| | + | </div> |
| | <div class="ec--sect--text"></div> | | <div class="ec--sect--text"></div> |
| | </div> | | </div> |
| | </div> | | </div> |
| − | | + | <div class="ec--hump--section"> |
| − | <script> | + | <div class="ec--hump--content"> |
| − | /*
| + | </div> |
| − | * Ideal Image Slider v1.5.1
| + | </div> |
| − | *
| + | </div> |
| − | * By Gilbert Pellegrom
| + | </div> |
| − | * http://gilbert.pellegrom.me
| + | |
| − | *
| + | |
| − | * Copyright (C) 2014 Dev7studios
| + | |
| − | * https://raw.githubusercontent.com/gilbitron/Ideal-Image-Slider/master/LICENSE
| + | |
| − | */
| + | |
| | | | |
| − | var IdealImageSlider = (function() {
| + | </body> |
| − | "use strict";
| + | |
| | | | |
| − | /*
| |
| − | * requestAnimationFrame polyfill
| |
| − | */
| |
| − | var _requestAnimationFrame = function(win, t) {
| |
| − | return win["r" + t] || win["webkitR" + t] || win["mozR" + t] || win["msR" + t] || function(fn) {
| |
| − | setTimeout(fn, 1000 / 60);
| |
| − | };
| |
| − | }(window, 'equestAnimationFrame');
| |
| | | | |
| − | /**
| |
| − | * Behaves the same as setTimeout except uses requestAnimationFrame() where possible for better performance
| |
| − | * @param {function} fn The callback function
| |
| − | * @param {int} delay The delay in milliseconds
| |
| − | */
| |
| − | var _requestTimeout = function(fn, delay) {
| |
| − | var start = new Date().getTime(),
| |
| − | handle = {};
| |
| − |
| |
| − | function loop() {
| |
| − | var current = new Date().getTime(),
| |
| − | delta = current - start;
| |
| − |
| |
| − | if (delta >= delay) {
| |
| − | fn.call();
| |
| − | } else {
| |
| − | handle.value = _requestAnimationFrame(loop);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | handle.value = _requestAnimationFrame(loop);
| |
| − | return handle;
| |
| − | };
| |
| − |
| |
| − | /*
| |
| − | * Helper functions
| |
| − | */
| |
| − | var _isType = function(type, obj) {
| |
| − | var _class = Object.prototype.toString.call(obj).slice(8, -1);
| |
| − | return obj !== undefined && obj !== null && _class === type;
| |
| − | };
| |
| − |
| |
| − | var _isInteger = function(x) {
| |
| − | return Math.round(x) === x;
| |
| − | };
| |
| − |
| |
| − | var _deepExtend = function(out) {
| |
| − | out = out || {};
| |
| − | for (var i = 1; i < arguments.length; i++) {
| |
| − | var obj = arguments[i];
| |
| − | if (!obj)
| |
| − | continue;
| |
| − | for (var key in obj) {
| |
| − | if (obj.hasOwnProperty(key)) {
| |
| − | if (_isType('Object', obj[key]) && obj[key] !== null)
| |
| − | _deepExtend(out[key], obj[key]);
| |
| − | else
| |
| − | out[key] = obj[key];
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | return out;
| |
| − | };
| |
| − |
| |
| − | var _hasClass = function(el, className) {
| |
| − | if (!className) return false;
| |
| − | if (el.classList) {
| |
| − | return el.classList.contains(className);
| |
| − | } else {
| |
| − | return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | var _addClass = function(el, className) {
| |
| − | if (!className) return;
| |
| − | if (el.classList) {
| |
| − | el.classList.add(className);
| |
| − | } else {
| |
| − | el.className += ' ' + className;
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | var _removeClass = function(el, className) {
| |
| − | if (!className) return;
| |
| − | if (el.classList) {
| |
| − | el.classList.remove(className);
| |
| − | } else {
| |
| − | el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | var _toArray = function(obj) {
| |
| − | return Array.prototype.slice.call(obj);
| |
| − | };
| |
| − |
| |
| − | var _arrayRemove = function(array, from, to) {
| |
| − | var rest = array.slice((to || from) + 1 || array.length);
| |
| − | array.length = from < 0 ? array.length + from : from;
| |
| − | return array.push.apply(array, rest);
| |
| − | };
| |
| − |
| |
| − | var _addEvent = function(object, type, callback) {
| |
| − | if (object === null || typeof(object) === 'undefined') return;
| |
| − |
| |
| − | if (object.addEventListener) {
| |
| − | object.addEventListener(type, callback, false);
| |
| − | } else if (object.attachEvent) {
| |
| − | object.attachEvent("on" + type, callback);
| |
| − | } else {
| |
| − | object["on" + type] = callback;
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | var _loadImg = function(slide, callback) {
| |
| − | if (!slide.style.backgroundImage) {
| |
| − | var img = new Image();
| |
| − | img.setAttribute('src', slide.getAttribute('data-src'));
| |
| − | img.onload = function() {
| |
| − | slide.style.backgroundImage = 'url(' + slide.getAttribute('data-src') + ')';
| |
| − | slide.setAttribute('data-actual-width', this.naturalWidth);
| |
| − | slide.setAttribute('data-actual-height', this.naturalHeight);
| |
| − | if (typeof(callback) === 'function') callback(this);
| |
| − | };
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | var _isHighDPI = function() {
| |
| − | var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),(min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(min-resolution: 1.5dppx)";
| |
| − | if (window.devicePixelRatio > 1)
| |
| − | return true;
| |
| − | if (window.matchMedia && window.matchMedia(mediaQuery).matches)
| |
| − | return true;
| |
| − | return false;
| |
| − | };
| |
| − |
| |
| − | var _translate = function(slide, dist, speed) {
| |
| − | slide.style.webkitTransitionDuration =
| |
| − | slide.style.MozTransitionDuration =
| |
| − | slide.style.msTransitionDuration =
| |
| − | slide.style.OTransitionDuration =
| |
| − | slide.style.transitionDuration = speed + 'ms';
| |
| − |
| |
| − | slide.style.webkitTransform =
| |
| − | slide.style.MozTransform =
| |
| − | slide.style.msTransform =
| |
| − | slide.style.OTransform = 'translateX(' + dist + 'px)';
| |
| − | };
| |
| − |
| |
| − | var _unTranslate = function(slide) {
| |
| − | slide.style.removeProperty('-webkit-transition-duration');
| |
| − | slide.style.removeProperty('transition-duration');
| |
| − |
| |
| − | slide.style.removeProperty('-webkit-transform');
| |
| − | slide.style.removeProperty('-ms-transform');
| |
| − | slide.style.removeProperty('transform');
| |
| − | };
| |
| − |
| |
| − | var _animate = function(item) {
| |
| − | var duration = item.time,
| |
| − | end = +new Date() + duration;
| |
| − |
| |
| − | var step = function() {
| |
| − | var current = +new Date(),
| |
| − | remaining = end - current;
| |
| − |
| |
| − | if (remaining < 60) {
| |
| − | item.run(1); //1 = progress is at 100%
| |
| − | return;
| |
| − | } else {
| |
| − | var progress = 1 - remaining / duration;
| |
| − | item.run(progress);
| |
| − | }
| |
| − |
| |
| − | _requestAnimationFrame(step);
| |
| − | };
| |
| − | step();
| |
| − | };
| |
| − |
| |
| − | var _setContainerHeight = function(slider, shouldAnimate) {
| |
| − | if (typeof shouldAnimate === 'undefined') {
| |
| − | shouldAnimate = true;
| |
| − | }
| |
| − |
| |
| − | // If it's a fixed height then don't change the height
| |
| − | if (_isInteger(slider.settings.height)) {
| |
| − | return;
| |
| − | }
| |
| − |
| |
| − | var currentHeight = Math.round(slider._attributes.container.offsetHeight),
| |
| − | newHeight = currentHeight;
| |
| − |
| |
| − | if (slider._attributes.aspectWidth && slider._attributes.aspectHeight) {
| |
| − | // Aspect ratio
| |
| − | newHeight = (slider._attributes.aspectHeight / slider._attributes.aspectWidth) * slider._attributes.container.offsetWidth;
| |
| − | } else {
| |
| − | // Auto
| |
| − | var width = slider._attributes.currentSlide.getAttribute('data-actual-width');
| |
| − | var height = slider._attributes.currentSlide.getAttribute('data-actual-height');
| |
| − |
| |
| − | if (width && height) {
| |
| − | newHeight = (height / width) * slider._attributes.container.offsetWidth;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var maxHeight = parseInt(slider.settings.maxHeight, 10);
| |
| − | if (maxHeight && newHeight > maxHeight) {
| |
| − | newHeight = maxHeight;
| |
| − | }
| |
| − |
| |
| − | newHeight = Math.round(newHeight);
| |
| − | if (newHeight === currentHeight) {
| |
| − | return;
| |
| − | }
| |
| − |
| |
| − | if (shouldAnimate) {
| |
| − | _animate({
| |
| − | time: slider.settings.transitionDuration,
| |
| − | run: function(progress) {
| |
| − | slider._attributes.container.style.height = Math.round(progress * (newHeight - currentHeight) + currentHeight) + 'px';
| |
| − | }
| |
| − | });
| |
| − | } else {
| |
| − | slider._attributes.container.style.height = newHeight + 'px';
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | var _touch = {
| |
| − |
| |
| − | vars: {
| |
| − | start: {},
| |
| − | delta: {},
| |
| − | isScrolling: undefined,
| |
| − | direction: null
| |
| − | },
| |
| − |
| |
| − | start: function(event) {
| |
| − | if (_hasClass(this._attributes.container, this.settings.classes.animating)) return;
| |
| − |
| |
| − | var touches = event.touches[0];
| |
| − | _touch.vars.start = {
| |
| − | x: touches.pageX,
| |
| − | y: touches.pageY,
| |
| − | time: +new Date()
| |
| − | };
| |
| − | _touch.vars.delta = {};
| |
| − | _touch.vars.isScrolling = undefined;
| |
| − | _touch.vars.direction = null;
| |
| − |
| |
| − | this.stop(); // Stop slider
| |
| − |
| |
| − | this.settings.beforeChange.apply(this);
| |
| − | _addClass(this._attributes.container, this.settings.classes.touching);
| |
| − | },
| |
| − |
| |
| − | move: function(event) {
| |
| − | if (_hasClass(this._attributes.container, this.settings.classes.animating)) return;
| |
| − | // Ensure swiping with one touch and not pinching
| |
| − | if (event.touches.length > 1 || event.scale && event.scale !== 1) return;
| |
| − |
| |
| − | var touches = event.touches[0];
| |
| − | _touch.vars.delta = {
| |
| − | x: touches.pageX - _touch.vars.start.x,
| |
| − | y: touches.pageY - _touch.vars.start.y
| |
| − | };
| |
| − |
| |
| − | if (typeof _touch.vars.isScrolling == 'undefined') {
| |
| − | _touch.vars.isScrolling = !!(_touch.vars.isScrolling || Math.abs(_touch.vars.delta.x) < Math.abs(_touch.vars.delta.y));
| |
| − | }
| |
| − |
| |
| − | // If user is not trying to scroll vertically
| |
| − | if (!_touch.vars.isScrolling) {
| |
| − | event.preventDefault(); // Prevent native scrolling
| |
| − |
| |
| − | _translate(this._attributes.previousSlide, _touch.vars.delta.x - this._attributes.previousSlide.offsetWidth, 0);
| |
| − | _translate(this._attributes.currentSlide, _touch.vars.delta.x, 0);
| |
| − | _translate(this._attributes.nextSlide, _touch.vars.delta.x + this._attributes.currentSlide.offsetWidth, 0);
| |
| − | }
| |
| − | },
| |
| − |
| |
| − | end: function(event) {
| |
| − | if (_hasClass(this._attributes.container, this.settings.classes.animating)) return;
| |
| − |
| |
| − | var duration = +new Date() - _touch.vars.start.time;
| |
| − |
| |
| − | // Determine if slide attempt triggers next/prev slide
| |
| − | var isChangeSlide = Number(duration) < 250 && Math.abs(_touch.vars.delta.x) > 20 || Math.abs(_touch.vars.delta.x) > this._attributes.currentSlide.offsetWidth / 2;
| |
| − |
| |
| − | var direction = _touch.vars.delta.x < 0 ? 'next' : 'previous';
| |
| − | var speed = this.settings.transitionDuration ? this.settings.transitionDuration / 2 : 0;
| |
| − |
| |
| − | // If not scrolling vertically
| |
| − | if (!_touch.vars.isScrolling) {
| |
| − | if (isChangeSlide) {
| |
| − | _touch.vars.direction = direction;
| |
| − |
| |
| − | if (_touch.vars.direction == 'next') {
| |
| − | _translate(this._attributes.currentSlide, -this._attributes.currentSlide.offsetWidth, speed);
| |
| − | _translate(this._attributes.nextSlide, 0, speed);
| |
| − | } else {
| |
| − | _translate(this._attributes.previousSlide, 0, speed);
| |
| − | _translate(this._attributes.currentSlide, this._attributes.currentSlide.offsetWidth, speed);
| |
| − | }
| |
| − |
| |
| − | _requestTimeout(_touch.transitionEnd.bind(this), speed);
| |
| − | } else {
| |
| − | // Slides return to original position
| |
| − | if (direction == 'next') {
| |
| − | _translate(this._attributes.currentSlide, 0, speed);
| |
| − | _translate(this._attributes.nextSlide, this._attributes.currentSlide.offsetWidth, speed);
| |
| − | } else {
| |
| − | _translate(this._attributes.previousSlide, -this._attributes.previousSlide.offsetWidth, speed);
| |
| − | _translate(this._attributes.currentSlide, 0, speed);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | if (speed) {
| |
| − | _addClass(this._attributes.container, this.settings.classes.animating);
| |
| − | _requestTimeout(function() {
| |
| − | _removeClass(this._attributes.container, this.settings.classes.animating);
| |
| − | }.bind(this), speed);
| |
| − | }
| |
| − | }
| |
| − | },
| |
| − |
| |
| − | transitionEnd: function(event) {
| |
| − | if (_touch.vars.direction) {
| |
| − | _unTranslate(this._attributes.previousSlide);
| |
| − | _unTranslate(this._attributes.currentSlide);
| |
| − | _unTranslate(this._attributes.nextSlide);
| |
| − | _removeClass(this._attributes.container, this.settings.classes.touching);
| |
| − |
| |
| − | _removeClass(this._attributes.previousSlide, this.settings.classes.previousSlide);
| |
| − | _removeClass(this._attributes.currentSlide, this.settings.classes.currentSlide);
| |
| − | _removeClass(this._attributes.nextSlide, this.settings.classes.nextSlide);
| |
| − | this._attributes.currentSlide.setAttribute('aria-hidden', 'true');
| |
| − |
| |
| − | var slides = this._attributes.slides,
| |
| − | index = slides.indexOf(this._attributes.currentSlide);
| |
| − |
| |
| − | if (_touch.vars.direction == 'next') {
| |
| − | this._attributes.previousSlide = this._attributes.currentSlide;
| |
| − | this._attributes.currentSlide = slides[index + 1];
| |
| − | this._attributes.nextSlide = slides[index + 2];
| |
| − | if (typeof this._attributes.currentSlide === 'undefined' &&
| |
| − | typeof this._attributes.nextSlide === 'undefined') {
| |
| − | this._attributes.currentSlide = slides[0];
| |
| − | this._attributes.nextSlide = slides[1];
| |
| − | } else {
| |
| − | if (typeof this._attributes.nextSlide === 'undefined') {
| |
| − | this._attributes.nextSlide = slides[0];
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | _loadImg(this._attributes.nextSlide);
| |
| − | } else {
| |
| − | this._attributes.nextSlide = this._attributes.currentSlide;
| |
| − | this._attributes.previousSlide = slides[index - 2];
| |
| − | this._attributes.currentSlide = slides[index - 1];
| |
| − | if (typeof this._attributes.currentSlide === 'undefined' &&
| |
| − | typeof this._attributes.previousSlide === 'undefined') {
| |
| − | this._attributes.currentSlide = slides[slides.length - 1];
| |
| − | this._attributes.previousSlide = slides[slides.length - 2];
| |
| − | } else {
| |
| − | if (typeof this._attributes.previousSlide === 'undefined') {
| |
| − | this._attributes.previousSlide = slides[slides.length - 1];
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | _loadImg(this._attributes.previousSlide);
| |
| − | }
| |
| − |
| |
| − | _addClass(this._attributes.previousSlide, this.settings.classes.previousSlide);
| |
| − | _addClass(this._attributes.currentSlide, this.settings.classes.currentSlide);
| |
| − | _addClass(this._attributes.nextSlide, this.settings.classes.nextSlide);
| |
| − | this._attributes.currentSlide.setAttribute('aria-hidden', 'false');
| |
| − |
| |
| − | _setContainerHeight(this);
| |
| − | this.settings.afterChange.apply(this);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | };
| |
| − |
| |
| − | /*
| |
| − | * Slider class
| |
| − | */
| |
| − | var Slider = function(args) {
| |
| − | // Defaults
| |
| − | this.settings = {
| |
| − | selector: '',
| |
| − | height: 'auto', // "auto" | px value (e.g. 400) | aspect ratio (e.g. "16:9")
| |
| − | initialHeight: 400, // for "auto" and aspect ratio
| |
| − | maxHeight: null, // for "auto" and aspect ratio
| |
| − | interval: 4000,
| |
| − | transitionDuration: 700,
| |
| − | effect: 'slide',
| |
| − | disableNav: false,
| |
| − | keyboardNav: true,
| |
| − | previousNavSelector: '',
| |
| − | nextNavSelector: '',
| |
| − | classes: {
| |
| − | container: 'ideal-image-slider',
| |
| − | slide: 'iis-slide',
| |
| − | previousSlide: 'iis-previous-slide',
| |
| − | currentSlide: 'iis-current-slide',
| |
| − | nextSlide: 'iis-next-slide',
| |
| − | previousNav: 'iis-previous-nav',
| |
| − | nextNav: 'iis-next-nav',
| |
| − | animating: 'iis-is-animating',
| |
| − | touchEnabled: 'iis-touch-enabled',
| |
| − | touching: 'iis-is-touching',
| |
| − | directionPrevious: 'iis-direction-previous',
| |
| − | directionNext: 'iis-direction-next'
| |
| − | },
| |
| − | onInit: function() {},
| |
| − | onStart: function() {},
| |
| − | onStop: function() {},
| |
| − | onDestroy: function() {},
| |
| − | beforeChange: function() {},
| |
| − | afterChange: function() {}
| |
| − | };
| |
| − |
| |
| − | // Parse args
| |
| − | if (typeof args === 'string') {
| |
| − | this.settings.selector = args;
| |
| − | } else if (typeof args === 'object') {
| |
| − | _deepExtend(this.settings, args);
| |
| − | }
| |
| − |
| |
| − | // Slider (container) element
| |
| − | var sliderEl = document.querySelector(this.settings.selector);
| |
| − | if (!sliderEl) return null;
| |
| − |
| |
| − | // Slides
| |
| − | var origChildren = _toArray(sliderEl.children),
| |
| − | validSlides = [];
| |
| − | sliderEl.innerHTML = '';
| |
| − | Array.prototype.forEach.call(origChildren, function(slide, i) {
| |
| − | if (slide instanceof HTMLImageElement || slide instanceof HTMLAnchorElement) {
| |
| − | var slideEl = document.createElement('a'),
| |
| − | href = '',
| |
| − | target = '';
| |
| − |
| |
| − | if (slide instanceof HTMLAnchorElement) {
| |
| − | href = slide.getAttribute('href');
| |
| − | target = slide.getAttribute('target');
| |
| − |
| |
| − | var img = slide.querySelector('img');
| |
| − | if (img !== null) {
| |
| − | slide = img;
| |
| − | } else {
| |
| − | return;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | if (typeof slide.dataset !== 'undefined') {
| |
| − | _deepExtend(slideEl.dataset, slide.dataset);
| |
| − | if (slide.dataset.src) {
| |
| − | // Use data-src for on-demand loading
| |
| − | slideEl.dataset.src = slide.dataset.src;
| |
| − | } else {
| |
| − | slideEl.dataset.src = slide.src;
| |
| − | }
| |
| − |
| |
| − | // HiDPI support
| |
| − | if (_isHighDPI() && slide.dataset['src-2x']) {
| |
| − | slideEl.dataset.src = slide.dataset['src-2x'];
| |
| − | }
| |
| − | } else {
| |
| − | // IE
| |
| − | if (slide.getAttribute('data-src')) {
| |
| − | slideEl.setAttribute('data-src', slide.getAttribute('data-src'));
| |
| − | } else {
| |
| − | slideEl.setAttribute('data-src', slide.getAttribute('src'));
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | if (href) slideEl.setAttribute('href', href);
| |
| − | if (target) slideEl.setAttribute('target', target);
| |
| − | if (slide.getAttribute('className')) _addClass(slideEl, slide.getAttribute('className'));
| |
| − | if (slide.getAttribute('id')) slideEl.setAttribute('id', slide.getAttribute('id'));
| |
| − | if (slide.getAttribute('title')) slideEl.setAttribute('title', slide.getAttribute('title'));
| |
| − | if (slide.getAttribute('alt')) slideEl.innerHTML = slide.getAttribute('alt');
| |
| − | slideEl.setAttribute('role', 'tabpanel');
| |
| − | slideEl.setAttribute('aria-hidden', 'true');
| |
| − |
| |
| − | slideEl.style.cssText += '-webkit-transition-duration:' + this.settings.transitionDuration + 'ms;-moz-transition-duration:' + this.settings.transitionDuration + 'ms;-o-transition-duration:' + this.settings.transitionDuration + 'ms;transition-duration:' + this.settings.transitionDuration + 'ms;';
| |
| − |
| |
| − | sliderEl.appendChild(slideEl);
| |
| − | validSlides.push(slideEl);
| |
| − | }
| |
| − | }.bind(this));
| |
| − |
| |
| − | var slides = validSlides;
| |
| − | if (slides.length <= 1) {
| |
| − | sliderEl.innerHTML = '';
| |
| − | Array.prototype.forEach.call(origChildren, function(child, i) {
| |
| − | sliderEl.appendChild(child);
| |
| − | });
| |
| − | return null;
| |
| − | }
| |
| − |
| |
| − | // Create navigation
| |
| − | if (!this.settings.disableNav) {
| |
| − | var previousNav, nextNav;
| |
| − | if (this.settings.previousNavSelector) {
| |
| − | previousNav = document.querySelector(this.settings.previousNavSelector);
| |
| − | } else {
| |
| − | previousNav = document.createElement('a');
| |
| − | sliderEl.appendChild(previousNav);
| |
| − | }
| |
| − | if (this.settings.nextNavSelector) {
| |
| − | nextNav = document.querySelector(this.settings.nextNavSelector);
| |
| − | } else {
| |
| − | nextNav = document.createElement('a');
| |
| − | sliderEl.appendChild(nextNav);
| |
| − | }
| |
| − |
| |
| − | _addClass(previousNav, this.settings.classes.previousNav);
| |
| − | _addClass(nextNav, this.settings.classes.nextNav);
| |
| − | _addEvent(previousNav, 'click', function() {
| |
| − | if (_hasClass(this._attributes.container, this.settings.classes.animating)) return false;
| |
| − | this.stop();
| |
| − | this.previousSlide();
| |
| − | }.bind(this));
| |
| − | _addEvent(nextNav, 'click', function() {
| |
| − | if (_hasClass(this._attributes.container, this.settings.classes.animating)) return false;
| |
| − | this.stop();
| |
| − | this.nextSlide();
| |
| − | }.bind(this));
| |
| − |
| |
| − | // Touch Navigation
| |
| − | if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
| |
| − | this.settings.effect = 'slide';
| |
| − | previousNav.style.display = 'none';
| |
| − | nextNav.style.display = 'none';
| |
| − | _addClass(sliderEl, this.settings.classes.touchEnabled);
| |
| − |
| |
| − | _addEvent(sliderEl, 'touchstart', _touch.start.bind(this), false);
| |
| − | _addEvent(sliderEl, 'touchmove', _touch.move.bind(this), false);
| |
| − | _addEvent(sliderEl, 'touchend', _touch.end.bind(this), false);
| |
| − | }
| |
| − |
| |
| − | // Keyboard Navigation
| |
| − | if (this.settings.keyboardNav) {
| |
| − | _addEvent(document, 'keyup', function(e) {
| |
| − | e = e || window.event;
| |
| − | var button = (typeof e.which == 'number') ? e.which : e.keyCode;
| |
| − | if (button == 37) {
| |
| − | if (_hasClass(this._attributes.container, this.settings.classes.animating)) return false;
| |
| − | this.stop();
| |
| − | this.previousSlide();
| |
| − | } else if (button == 39) {
| |
| − | if (_hasClass(this._attributes.container, this.settings.classes.animating)) return false;
| |
| − | this.stop();
| |
| − | this.nextSlide();
| |
| − | }
| |
| − | }.bind(this));
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // Create internal attributes
| |
| − | this._attributes = {
| |
| − | container: sliderEl,
| |
| − | slides: slides,
| |
| − | previousSlide: typeof slides[slides.length - 1] !== 'undefined' ? slides[slides.length - 1] : slides[0],
| |
| − | currentSlide: slides[0],
| |
| − | nextSlide: typeof slides[1] !== 'undefined' ? slides[1] : slides[0],
| |
| − | timerId: 0,
| |
| − | origChildren: origChildren, // Used in destroy()
| |
| − | aspectWidth: 0,
| |
| − | aspectHeight: 0
| |
| − | };
| |
| − |
| |
| − | // Set height
| |
| − | if (_isInteger(this.settings.height)) {
| |
| − | this._attributes.container.style.height = this.settings.height + 'px';
| |
| − | } else {
| |
| − | if (_isInteger(this.settings.initialHeight)) {
| |
| − | this._attributes.container.style.height = this.settings.initialHeight + 'px';
| |
| − | }
| |
| − |
| |
| − | // If aspect ratio parse and store
| |
| − | if (this.settings.height.indexOf(':') > -1) {
| |
| − | var aspectRatioParts = this.settings.height.split(':');
| |
| − | if (aspectRatioParts.length == 2 && _isInteger(parseInt(aspectRatioParts[0], 10)) && _isInteger(parseInt(aspectRatioParts[1], 10))) {
| |
| − | this._attributes.aspectWidth = parseInt(aspectRatioParts[0], 10);
| |
| − | this._attributes.aspectHeight = parseInt(aspectRatioParts[1], 10);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | _addEvent(window, 'resize', function() {
| |
| − | _setContainerHeight(this, false);
| |
| − | }.bind(this));
| |
| − | }
| |
| − |
| |
| − | // Add classes
| |
| − | _addClass(sliderEl, this.settings.classes.container);
| |
| − | _addClass(sliderEl, 'iis-effect-' + this.settings.effect);
| |
| − | Array.prototype.forEach.call(this._attributes.slides, function(slide, i) {
| |
| − | _addClass(slide, this.settings.classes.slide);
| |
| − | }.bind(this));
| |
| − | _addClass(this._attributes.previousSlide, this.settings.classes.previousSlide);
| |
| − | _addClass(this._attributes.currentSlide, this.settings.classes.currentSlide);
| |
| − | _addClass(this._attributes.nextSlide, this.settings.classes.nextSlide);
| |
| − |
| |
| − | // ARIA
| |
| − | this._attributes.currentSlide.setAttribute('aria-hidden', 'false');
| |
| − |
| |
| − | // Load first image
| |
| − | _loadImg(this._attributes.currentSlide, (function() {
| |
| − | this.settings.onInit.apply(this);
| |
| − | _setContainerHeight(this, false);
| |
| − | }).bind(this));
| |
| − | // Preload next images
| |
| − | _loadImg(this._attributes.previousSlide);
| |
| − | _loadImg(this._attributes.nextSlide);
| |
| − | };
| |
| − |
| |
| − | Slider.prototype.get = function(attribute) {
| |
| − | if (!this._attributes) return null;
| |
| − | if (this._attributes.hasOwnProperty(attribute)) {
| |
| − | return this._attributes[attribute];
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | Slider.prototype.set = function(attribute, value) {
| |
| − | if (!this._attributes) return null;
| |
| − | return (this._attributes[attribute] = value);
| |
| − | };
| |
| − |
| |
| − | Slider.prototype.start = function() {
| |
| − | if (!this._attributes) return;
| |
| − | this._attributes.timerId = setInterval(this.nextSlide.bind(this), this.settings.interval);
| |
| − | this.settings.onStart.apply(this);
| |
| − |
| |
| − | // Stop if window blur
| |
| − | window.onblur = function() {
| |
| − | this.stop();
| |
| − | }.bind(this);
| |
| − | };
| |
| − |
| |
| − | Slider.prototype.stop = function() {
| |
| − | if (!this._attributes) return;
| |
| − | clearInterval(this._attributes.timerId);
| |
| − | this._attributes.timerId = 0;
| |
| − | this.settings.onStop.apply(this);
| |
| − | };
| |
| − |
| |
| − | Slider.prototype.previousSlide = function() {
| |
| − | this.settings.beforeChange.apply(this);
| |
| − | _removeClass(this._attributes.previousSlide, this.settings.classes.previousSlide);
| |
| − | _removeClass(this._attributes.currentSlide, this.settings.classes.currentSlide);
| |
| − | _removeClass(this._attributes.nextSlide, this.settings.classes.nextSlide);
| |
| − | this._attributes.currentSlide.setAttribute('aria-hidden', 'true');
| |
| − |
| |
| − | var slides = this._attributes.slides,
| |
| − | index = slides.indexOf(this._attributes.currentSlide);
| |
| − | this._attributes.nextSlide = this._attributes.currentSlide;
| |
| − | this._attributes.previousSlide = slides[index - 2];
| |
| − | this._attributes.currentSlide = slides[index - 1];
| |
| − | if (typeof this._attributes.currentSlide === 'undefined' &&
| |
| − | typeof this._attributes.previousSlide === 'undefined') {
| |
| − | this._attributes.currentSlide = slides[slides.length - 1];
| |
| − | this._attributes.previousSlide = slides[slides.length - 2];
| |
| − | } else {
| |
| − | if (typeof this._attributes.previousSlide === 'undefined') {
| |
| − | this._attributes.previousSlide = slides[slides.length - 1];
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // Preload next image
| |
| − | _loadImg(this._attributes.previousSlide);
| |
| − |
| |
| − | _addClass(this._attributes.previousSlide, this.settings.classes.previousSlide);
| |
| − | _addClass(this._attributes.currentSlide, this.settings.classes.currentSlide);
| |
| − | _addClass(this._attributes.nextSlide, this.settings.classes.nextSlide);
| |
| − | this._attributes.currentSlide.setAttribute('aria-hidden', 'false');
| |
| − |
| |
| − | _addClass(this._attributes.container, this.settings.classes.directionPrevious);
| |
| − | _requestTimeout(function() {
| |
| − | _removeClass(this._attributes.container, this.settings.classes.directionPrevious);
| |
| − | }.bind(this), this.settings.transitionDuration);
| |
| − |
| |
| − | if (this.settings.transitionDuration) {
| |
| − | _addClass(this._attributes.container, this.settings.classes.animating);
| |
| − | _requestTimeout(function() {
| |
| − | _removeClass(this._attributes.container, this.settings.classes.animating);
| |
| − | }.bind(this), this.settings.transitionDuration);
| |
| − | }
| |
| − |
| |
| − | _setContainerHeight(this);
| |
| − | this.settings.afterChange.apply(this);
| |
| − | };
| |
| − |
| |
| − | Slider.prototype.nextSlide = function() {
| |
| − | this.settings.beforeChange.apply(this);
| |
| − | _removeClass(this._attributes.previousSlide, this.settings.classes.previousSlide);
| |
| − | _removeClass(this._attributes.currentSlide, this.settings.classes.currentSlide);
| |
| − | _removeClass(this._attributes.nextSlide, this.settings.classes.nextSlide);
| |
| − | this._attributes.currentSlide.setAttribute('aria-hidden', 'true');
| |
| − |
| |
| − | var slides = this._attributes.slides,
| |
| − | index = slides.indexOf(this._attributes.currentSlide);
| |
| − | this._attributes.previousSlide = this._attributes.currentSlide;
| |
| − | this._attributes.currentSlide = slides[index + 1];
| |
| − | this._attributes.nextSlide = slides[index + 2];
| |
| − | if (typeof this._attributes.currentSlide === 'undefined' &&
| |
| − | typeof this._attributes.nextSlide === 'undefined') {
| |
| − | this._attributes.currentSlide = slides[0];
| |
| − | this._attributes.nextSlide = slides[1];
| |
| − | } else {
| |
| − | if (typeof this._attributes.nextSlide === 'undefined') {
| |
| − | this._attributes.nextSlide = slides[0];
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // Preload next image
| |
| − | _loadImg(this._attributes.nextSlide);
| |
| − |
| |
| − | _addClass(this._attributes.previousSlide, this.settings.classes.previousSlide);
| |
| − | _addClass(this._attributes.currentSlide, this.settings.classes.currentSlide);
| |
| − | _addClass(this._attributes.nextSlide, this.settings.classes.nextSlide);
| |
| − | this._attributes.currentSlide.setAttribute('aria-hidden', 'false');
| |
| − |
| |
| − | _addClass(this._attributes.container, this.settings.classes.directionNext);
| |
| − | _requestTimeout(function() {
| |
| − | _removeClass(this._attributes.container, this.settings.classes.directionNext);
| |
| − | }.bind(this), this.settings.transitionDuration);
| |
| − |
| |
| − | if (this.settings.transitionDuration) {
| |
| − | _addClass(this._attributes.container, this.settings.classes.animating);
| |
| − | _requestTimeout(function() {
| |
| − | _removeClass(this._attributes.container, this.settings.classes.animating);
| |
| − | }.bind(this), this.settings.transitionDuration);
| |
| − | }
| |
| − |
| |
| − | _setContainerHeight(this);
| |
| − | this.settings.afterChange.apply(this);
| |
| − | };
| |
| − |
| |
| − | Slider.prototype.gotoSlide = function(index) {
| |
| − | this.settings.beforeChange.apply(this);
| |
| − | this.stop();
| |
| − |
| |
| − | _removeClass(this._attributes.previousSlide, this.settings.classes.previousSlide);
| |
| − | _removeClass(this._attributes.currentSlide, this.settings.classes.currentSlide);
| |
| − | _removeClass(this._attributes.nextSlide, this.settings.classes.nextSlide);
| |
| − | this._attributes.currentSlide.setAttribute('aria-hidden', 'true');
| |
| − |
| |
| − | index--; // Index should be 1-indexed
| |
| − | var slides = this._attributes.slides,
| |
| − | oldIndex = slides.indexOf(this._attributes.currentSlide);
| |
| − | this._attributes.previousSlide = slides[index - 1];
| |
| − | this._attributes.currentSlide = slides[index];
| |
| − | this._attributes.nextSlide = slides[index + 1];
| |
| − | if (typeof this._attributes.previousSlide === 'undefined') {
| |
| − | this._attributes.previousSlide = slides[slides.length - 1];
| |
| − | }
| |
| − | if (typeof this._attributes.nextSlide === 'undefined') {
| |
| − | this._attributes.nextSlide = slides[0];
| |
| − | }
| |
| − |
| |
| − | // Load images
| |
| − | _loadImg(this._attributes.previousSlide);
| |
| − | _loadImg(this._attributes.currentSlide);
| |
| − | _loadImg(this._attributes.nextSlide);
| |
| − |
| |
| − | _addClass(this._attributes.previousSlide, this.settings.classes.previousSlide);
| |
| − | _addClass(this._attributes.currentSlide, this.settings.classes.currentSlide);
| |
| − | _addClass(this._attributes.nextSlide, this.settings.classes.nextSlide);
| |
| − | this._attributes.currentSlide.setAttribute('aria-hidden', 'false');
| |
| − |
| |
| − | if (index < oldIndex) {
| |
| − | _addClass(this._attributes.container, this.settings.classes.directionPrevious);
| |
| − | _requestTimeout(function() {
| |
| − | _removeClass(this._attributes.container, this.settings.classes.directionPrevious);
| |
| − | }.bind(this), this.settings.transitionDuration);
| |
| − | } else {
| |
| − | _addClass(this._attributes.container, this.settings.classes.directionNext);
| |
| − | _requestTimeout(function() {
| |
| − | _removeClass(this._attributes.container, this.settings.classes.directionNext);
| |
| − | }.bind(this), this.settings.transitionDuration);
| |
| − | }
| |
| − |
| |
| − | if (this.settings.transitionDuration) {
| |
| − | _addClass(this._attributes.container, this.settings.classes.animating);
| |
| − | _requestTimeout(function() {
| |
| − | _removeClass(this._attributes.container, this.settings.classes.animating);
| |
| − | }.bind(this), this.settings.transitionDuration);
| |
| − | }
| |
| − |
| |
| − | _setContainerHeight(this);
| |
| − | this.settings.afterChange.apply(this);
| |
| − | };
| |
| − |
| |
| − | Slider.prototype.destroy = function() {
| |
| − | clearInterval(this._attributes.timerId);
| |
| − | this._attributes.timerId = 0;
| |
| − |
| |
| − | this._attributes.container.innerHTML = '';
| |
| − | Array.prototype.forEach.call(this._attributes.origChildren, function(child, i) {
| |
| − | this._attributes.container.appendChild(child);
| |
| − | }.bind(this));
| |
| − |
| |
| − | _removeClass(this._attributes.container, this.settings.classes.container);
| |
| − | _removeClass(this._attributes.container, 'iis-effect-' + this.settings.effect);
| |
| − | this._attributes.container.style.height = '';
| |
| − |
| |
| − | this.settings.onDestroy.apply(this);
| |
| − | };
| |
| − |
| |
| − | return {
| |
| − | _hasClass: _hasClass,
| |
| − | _addClass: _addClass,
| |
| − | _removeClass: _removeClass,
| |
| − | Slider: Slider
| |
| − | };
| |
| − |
| |
| − | })();
| |
| − | </script>
| |
| − | <script>
| |
| − | /*
| |
| − | * Ideal Image Slider: Captions Extension v1.0.1
| |
| − | *
| |
| − | * By Gilbert Pellegrom
| |
| − | * http://gilbert.pellegrom.me
| |
| − | *
| |
| − | * Copyright (C) 2014 Dev7studios
| |
| − | * https://raw.githubusercontent.com/gilbitron/Ideal-Image-Slider/master/LICENSE
| |
| − | */
| |
| − |
| |
| − | (function(IIS) {
| |
| − | "use strict";
| |
| − |
| |
| − | IIS.Slider.prototype.addCaptions = function() {
| |
| − | IIS._addClass(this._attributes.container, 'iis-has-captions');
| |
| − |
| |
| − | Array.prototype.forEach.call(this._attributes.slides, function(slide, i) {
| |
| − | var caption = document.createElement('div');
| |
| − | IIS._addClass(caption, 'iis-caption');
| |
| − |
| |
| − | var captionContent = '';
| |
| − | if (slide.getAttribute('title')) {
| |
| − | captionContent += '<div class="iis-caption-title">' + slide.getAttribute('title') + '</div>';
| |
| − | }
| |
| − | if (slide.getAttribute('data-caption')) {
| |
| − | var dataCaption = slide.getAttribute('data-caption');
| |
| − | if (dataCaption.substring(0, 1) == '#' || dataCaption.substring(0, 1) == '.') {
| |
| − | var external = document.querySelector(dataCaption);
| |
| − | if (external) {
| |
| − | captionContent += '<div class="iis-caption-content">' + external.innerHTML + '</div>';
| |
| − | }
| |
| − | } else {
| |
| − | captionContent += '<div class="iis-caption-content">' + slide.getAttribute('data-caption') + '</div>';
| |
| − | }
| |
| − | } else {
| |
| − | if (slide.innerHTML) {
| |
| − | captionContent += '<div class="iis-caption-content">' + slide.innerHTML + '</div>';
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | slide.innerHTML = '';
| |
| − | if (captionContent) {
| |
| − | caption.innerHTML = captionContent;
| |
| − | slide.appendChild(caption);
| |
| − | }
| |
| − | }.bind(this));
| |
| − | };
| |
| − |
| |
| − | return IIS;
| |
| − |
| |
| − | })(IdealImageSlider);
| |
| − | </script>
| |
| | <script> | | <script> |
| − | var slider_Edu_Centers = new IdealImageSlider.Slider({ | + | var slider_Part_Law_1 = new IdealImageSlider.Slider({ |
| − | selector: '#slider_Edu_Centers', | + | selector: '#slider_Part_Law_1', |
| | height: 500, // Required but can be set by CSS | | height: 500, // Required but can be set by CSS |
| | interval: 3000 | | interval: 3000 |
| | }); | | }); |
| − | slider_Edu_Centers.addCaptions(); | + | slider_Part_Law_1.addCaptions(); |
| − | slider_Edu_Centers.start(); | + | slider_Part_Law_1.start(); |
| | + | |
| | + | var slider_Part_Law_2 = new IdealImageSlider.Slider({ |
| | + | selector: '#slider_Part_Law_2', |
| | + | height: 500, // Required but can be set by CSS |
| | + | interval: 3000 |
| | + | }); |
| | + | slider_Part_Law_2.addCaptions(); |
| | + | slider_Part_Law_2.start(); |
| | | | |
| | </script> | | </script> |
| | + | |
| | + | |
| | </html> | | </html> |
| | {{Ecuador/footer}} | | {{Ecuador/footer}} |
