Team:USTC-Software
<body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<section id="dowebok" class="fullscreenslider">
<nav class="navbar navcolor" id="nav">
</nav>
</section>
<script>
var fss
$(function () {
fss = new ddfullscreenslider({
sliderid: 'dowebok'
})
})
</script>
<style>
html {
overflow-x: hidden;
font-size: 625%;
}
body {
min-width: 1020px;
}
.graphic-one {
margin-left:auto;
margin-right: auto;
width: 1020px;
}
html {
position: relative; min-height:100%;
}
body {
margin:0 0 150px !important;
}
.footer-container {
text-align: center; position: absolute; left: 0; bottom: 0; right: 0;
}
.footer-content {
height: 150px; background-color: #ececec; margin-top: 50px; padding-top: 20px; padding-bottom: 20px; color: #b5b5b5; height: 100%;
}
.footer-content a {
color: #333 !important; text-decoration: none;
}
.footer-link {
margin-left: 10px; margin-right: 10px;
}ul.page-1 > li > a {
color: #ECF0F1;
} ul.page-1 > li > a:hover {
border-bottom: 4px solid #ECF0F1!important;
} ul.page-1 ul.menu li a {
color: #ECF0F1;
} ul.page-1 ul.menu li a:hover {
color: #aaf;
} ul.page-1 ul.menu {
background: #2980b8;
}
ul.page-2 > li > a {
color: #555;
} ul.page-2 > li > a:hover {
border-bottom: 4px solid #ef4c3c!important;
} ul.page-2 ul.menu li a {
color: #555;
} ul.page-2 ul.menu li a:hover {
color: #ef4c3c;
} ul.page-2 ul.menu {
background: #ECF0F1;
}
ul.page-3 > li > a {
color: #555;
} ul.page-3 > li > a:hover {
border-bottom: 4px solid #ef4c3c!important;
} ul.page-3 ul.menu li a {
color: #555;
} ul.page-3 ul.menu li a:hover {
color: #ef4c3c;
} ul.page-3 ul.menu {
background: #ECF0F1;
}
ul.page-4 > li > a {
color: #555;
} ul.page-4 > li > a:hover {
border-bottom: 4px solid #ef4c3c!important;
} ul.page-4 ul.menu li a {
color: #555;
} ul.page-4 ul.menu li a:hover {
color: #ef4c3c;
} ul.page-4 ul.menu {
background: #ECF0F1;
}
ul.page-5 > li > a {
color: #555;
} ul.page-5 > li > a:hover {
border-bottom: 4px solid #ef4c3c!important;
} ul.page-5 ul.menu li a {
color: #555;
} ul.page-5 ul.menu li a:hover {
color: #ef4c3c;
} ul.page-5 ul.menu {
background: #ECF0F1;
}
- menu {
position: fixed; z-index: 3000; left: 7%; top:20%;
}
- menu ul li {
height: 30px; line-height:30px; padding-left:10px; border-left: solid #c2c2c2 5px;
}
- menu ul li a{
display: block; font-size: 15px; color: #c2c2c2; width: 120px; text-decoration: none; outline:none;
}
- menu ul li:hover {
border-left: solid #ef4c3c 5px;
}
- menu .focused {
color: #ef4c3c; font-size: 17px;
}
/*.scroll-img{
position: fixed; z-index: 3000; width: 120px; left: 115px; bottom: 5%;
}*/
- content {
margin-left: 24%; width: 900px; margin-top: 100px; margin-bottom: 100px;
}
- content .item {
margin-top: 100px; padding: 20px; font-size: 16px; overflow: hidden;
}
- content .item h2 {
font-size: 36px; color: #555;
}
.item ul li {
float:left; margin-right:10px; margin-bottom:10px; display:inline; overflow:hidden; position:relative;
}
.item ul li .photo {
width:200px; height:200px; overflow:hidden; background-color: darkgray;
}
.item .rsp {
width:200px; height:200px; overflow:hidden; position: absolute; background:#000; top:0; left:0;
}
.item .text {
position:absolute; width:200px; height:200px; left:-200px; top:0; overflow:hidden;
}
.item .text a {
text-decoration:none
}
.item .text p {
color:#FFFFFF; font-size:18px;
}
.item .box {
padding:10px 0px 10px 0px; border-top: solid; border-left: solid; border-width:1px; border-color: #f1f1f1; box-shadow: 2px 2px 1px #e1e1e1; margin-left: 20px;
}
.item .img {
width: 160px; height: 160px; border-radius: 160px; text-align: center; border: solid; border-width:1px;"
}
.item h3 {
text-align: center; border-top: solid; font-size:15px; border-color: #e1e1e1; border-width:1px; padding:8px 0 8px; margin: 0px 0 0px;
}
.item h5 {
height: 50px; overflow: hidden; text-align: center; border-top: solid; border-color: #e1e1e1; border-width:1px; padding:22px 0 5px; margin: 0px 0 0px;
}
- theme-graph svg {
filter: brightness(90%);
}
section,body {
min-width: 1020px;
} .navbar {
-webkit-transition: ease-in-out 0.5s; -moz-transition: ease-in-out 0.5s; -ms-transition: ease-in-out 0.5s; -o-transition: ease-in-out 0.5s; transition: ease-in-out 0.5s; background: white; border-radius: 0; min-height:45px !important; height: 48px; font-size: 20px;
}
.navbar-brand {
margin-left:2em; padding-top: 14px; padding-bottom: 10px; color: #555 !important;
}
ul.nav {
margin-right:2em;
}
ul li {
position: relative; list-style: none;
}
ul.nav li:hover > ul {
visibility: visible; opacity: 1; margin-top: 0;
}
ul.nav ul {
min-width: 120px; position: absolute; top: 100%; left: 0; visibility: hidden; opacity: 0; margin-top: -30px;
}
ul.nav > li > a {
-webkit-transition: border-color ease-in-out 0.1s; -moz-transition: border-color ease-in-out 0.1s; -o-transition: border-color ease-in-out 0.1s; transition: border-color ease-in-out 0.1s; margin: 0px 12px 0px 12px; padding: 15px 0px 8px 0px; background: transparent !important; border-bottom: 4px solid transparent!important; color: #555 ;
}
ul.nav > li > a:hover {
border-bottom: 4px solid #ef4c3c;
}
ul.menu {
background: white; width: auto; padding-left: 20px; padding-right:20px; z-index: 3;
}
ul.menu li a, ul.menu li {
padding-top: 4px !important; padding-bottom: 7px !important; color: #555; font-size: 18px; text-decoration: none; -webkit-transition: color ease-in-out 0.2s; -moz-transition: color ease-in-out 0.2s; -ms-transition: color ease-in-out 0.2s; -o-transition: color ease-in-out 0.2s; transition: color ease-in-out 0.2s;
}
.brand {
margin-top: 5em;
} ul.nav > li > a {
color: #555;
} ul.nav > li > a:hover {
border-bottom: 4px solid #ef4c3c!important;
} ul.nav ul.menu li a {
color: #555;
} ul.nav ul.menu li a:hover {
color: #ef4c3c;
} ul.nav ul.menu {
background: #F3F7F2;
}
.fssopen, .fssopen body { /* class added to HTML element when full screen slider is open to hide potential body scrollbars */
width: 100%; height: 100%; top: 0; left: 0; margin: 0; overflow: hidden;
}
.fullscreenslider {
position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2000; font-size: 16px; /* base font size */ visibility: visible; overflow: hidden;
}
.slidewrapper { /* wrapper DIV that surrounds the ARTICLE elements inside .dd_fullscreenslider */
width: 100%; height: 100%; position: absolute; top: 0; left: 0; -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */ -moz-transition: -moz-transform 0.5s; /* actual duration controlled by script */ -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s;
}
.fssnav { /* UL list dynamically added by script for Slider navigation */
list-style: none; margin: 0; position: absolute; top: 50%; /* vertically center menu */ right: 80px; /* distance from right edge of screen */ transform: translateY(-50%); /* vertically center menu */
}
.fssnav li {
margin-bottom: 15px;
}
.fssnav li a {
text-decoration: none; border: 2.5px solid #225378; /* border color of nav links */ opacity: 0.8; border-radius: 50%; width: 16px; /* dimensions of nav links */ height: 16px; display: block; position: relative; text-indent: -500px; outline: none; overflow: hidden;
}
.fssnav li a::after { /* create "fill" element inside A */
content: ""; position: absolute; width: 100%; height: 100%; top: 100%; left: 0; background: #225378; /* color of "fill" element */ opacity: 0.6; transition: top 0.5s; /* transition for "fill up" effect */
}
.fssnav .selected a::after {
top: 0; /* fill up selected A element from bottom to top */
}
.fullscreenslider .slide { /* CSS for each slide */
width: 100%; height: 100%; display: block; font-family: 'Droid Sans', sans-serif; /* Use google font */ font-size: 60px; line-height: 2em; color: #225378; overflow: hidden; -webkit-box-sizing: border-box; /* include padding/ border as part of declared menu width */ -moz-box-sizing: border-box; z-index: 1000; background: white; -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
}
.fullscreenslider .slide h2 { /* H2 Header inside each slide */
font-size: 3em; margin: 0; line-height: 1.1em; letter-spacing: 3px;
}
.fullscreenslider .slide .scrollable { /* Assign this class to elements within a slide that should be scrollable */
overflow: auto;
}
.fullscreenslider .slide {
background: white;
}
.fullscreenslider .closex { /* Large x close button inside Slider */
width: 50px; height: 50px; overflow: hidden; display: block; position: fixed; cursor: pointer; text-indent: -1000px; opacity: 0.8; z-index: 1001; top: 5px; right: 3px;
}
.fullscreenslider .closex::after { /* render large x inside close button */
content: ""; display: block; position: absolute; width: 100%; height: 6px; background: white; /* color of x button */ top: 50%; margin-top: -3px; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
.fullscreenslider .closex::after { /* render large cross inside close button */
-ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg);
}
.bio-text {
margin-top: 30%; font-size:30px; line-height: 40px;
} </style> <script>
(function (factory) {
if ( typeof define === 'function' && define.amd ) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS style for Browserify
module.exports = factory;
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'],
toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'],
slice = Array.prototype.slice,
nullLowestDeltaTimeout, lowestDelta;
if ( $.event.fixHooks ) {
for ( var i = toFix.length; i; ) {
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
}
}
var special = $.event.special.mousewheel = {
version: '3.1.12',
setup: function() {
if ( this.addEventListener ) {
for ( var i = toBind.length; i; ) {
this.addEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
// Store the line height and page height for this particular element
$.data(this, 'mousewheel-line-height', special.getLineHeight(this));
$.data(this, 'mousewheel-page-height', special.getPageHeight(this));
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i = toBind.length; i; ) {
this.removeEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
// Clean up the data we added to the element
$.removeData(this, 'mousewheel-line-height');
$.removeData(this, 'mousewheel-page-height');
},
getLineHeight: function(elem) {
var $elem = $(elem),
$parent = $elem['offsetParent' in $.fn ? 'offsetParent' : 'parent']();
if (!$parent.length) {
$parent = $('body');
}
return parseInt($parent.css('fontSize'), 10) || parseInt($elem.css('fontSize'), 10) || 16;
},
getPageHeight: function(elem) {
return $(elem).height();
},
settings: {
adjustOldDeltas: true, // see shouldAdjustOldDeltas() below
normalizeOffset: true // calls getBoundingClientRect for each event
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel');
},
unmousewheel: function(fn) {
return this.unbind('mousewheel', fn);
}
});
function handler(event) {
var orgEvent = event || window.event,
args = slice.call(arguments, 1),
delta = 0,
deltaX = 0,
deltaY = 0,
absDelta = 0,
offsetX = 0,
offsetY = 0;
event = $.event.fix(orgEvent);
event.type = 'mousewheel';
// Old school scrollwheel delta
if ( 'detail' in orgEvent ) { deltaY = orgEvent.detail * -1; }
if ( 'wheelDelta' in orgEvent ) { deltaY = orgEvent.wheelDelta; }
if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY; }
if ( 'wheelDeltaX' in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; }
// Firefox < 17 horizontal scrolling related to DOMMouseScroll event
if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaX = deltaY * -1;
deltaY = 0;
}
// Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy
delta = deltaY === 0 ? deltaX : deltaY;
// New school wheel delta (wheel event)
if ( 'deltaY' in orgEvent ) {
deltaY = orgEvent.deltaY * -1;
delta = deltaY;
}
if ( 'deltaX' in orgEvent ) {
deltaX = orgEvent.deltaX;
if ( deltaY === 0 ) { delta = deltaX * -1; }
}
// No change actually happened, no reason to go any further
if ( deltaY === 0 && deltaX === 0 ) { return; }
// Need to convert lines and pages to pixels if we aren't already in pixels
// There are three delta modes:
// * deltaMode 0 is by pixels, nothing to do
// * deltaMode 1 is by lines
// * deltaMode 2 is by pages
if ( orgEvent.deltaMode === 1 ) {
var lineHeight = $.data(this, 'mousewheel-line-height');
delta *= lineHeight;
deltaY *= lineHeight;
deltaX *= lineHeight;
} else if ( orgEvent.deltaMode === 2 ) {
var pageHeight = $.data(this, 'mousewheel-page-height');
delta *= pageHeight;
deltaY *= pageHeight;
deltaX *= pageHeight;
}
// Store lowest absolute delta to normalize the delta values
absDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) );
if ( !lowestDelta || absDelta < lowestDelta ) {
lowestDelta = absDelta;
// Adjust older deltas if necessary
if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
lowestDelta /= 40;
}
}
// Adjust older deltas if necessary
if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
// Divide all the things by 40!
delta /= 40;
deltaX /= 40;
deltaY /= 40;
}
// Get a whole, normalized value for the deltas
delta = Math[ delta >= 1 ? 'floor' : 'ceil' ](delta / lowestDelta);
deltaX = Math[ deltaX >= 1 ? 'floor' : 'ceil' ](deltaX / lowestDelta);
deltaY = Math[ deltaY >= 1 ? 'floor' : 'ceil' ](deltaY / lowestDelta);
// Normalise offsetX and offsetY properties
if ( special.settings.normalizeOffset && this.getBoundingClientRect ) {
var boundingRect = this.getBoundingClientRect();
offsetX = event.clientX - boundingRect.left;
offsetY = event.clientY - boundingRect.top;
}
// Add information to the event object
event.deltaX = deltaX;
event.deltaY = deltaY;
event.deltaFactor = lowestDelta;
event.offsetX = offsetX;
event.offsetY = offsetY;
// Go ahead and set deltaMode to 0 since we converted to pixels
// Although this is a little odd since we overwrite the deltaX/Y
// properties with normalized deltas.
event.deltaMode = 0;
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
// Clearout lowestDelta after sometime to better
// handle multiple device types that give different
// a different lowestDelta
// Ex: trackpad = 3 and mouse wheel = 120
if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); }
nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200);
return ($.event.dispatch || $.event.handle).apply(this, args); }
function nullLowestDelta() {
lowestDelta = null;
}
function shouldAdjustOldDeltas(orgEvent, absDelta) {
// If this is an older event and the delta is divisable by 120,
// then we are assuming that the browser is treating this as an
// older mouse wheel event and that we should divide the deltas
// by 40 to try and get a more usable deltaFactor.
// Side note, this actually impacts the reported scroll distance
// in older browsers and can cause scrolling to be slower than native.
// Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false.
return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0;
}
})); var pageColors = ["#3498db", "white", "white", "white", "white"]
var ddfullscreenslider = (function($){
document.createElement('section') document.createElement('article')
var defaults = { addHash: true, sliderstate: 'open', // reserved for future use keycodeNavigation: [40, 38], // keyCode codes for down and up naivagion, respectively transitionDuration: '0.5s', swipeconfig: {peekamount: 100, mousedrag: true}, onslide: function($slide, index){ console.log(index)
var nav = document.getElementById("nav")
var options = document.getElementsByClassName("navbar-nav")[0]
nav.style.backgroundColor = pageColors[index] var list = options.classList list.forEach(function (x) { if (x.startsWith("page-")) list.remove(x) }) options.classList.add("page-" + (index + 1)) } }
var transformprop = // variable to contain browser supported version of "transform" property
function supportstranslate3d(){ // based on http://stackoverflow.com/a/12621264/4360074 if (!window.getComputedStyle) { return false; } var $el = $('<div style="position:absolute" />').appendTo(document.body) var has3d $el.css('transform', 'translate3d(1px,1px,1px)') has3d = $el.css('transform') var findtransformprop = $el.get(0).style.cssText.match(/(\w|\-)*transform/i) // get "-vendor-transform" portion of CSS Text transformprop = (findtransformprop)? findtransformprop[0] : 'transform' $el.remove()
return (has3d !== undefined && has3d.length > 0 && has3d !== "none"); }
var $window = $(window)
var $root = $('html')
function ddfullscreenslider(setting){ var translatesupport = supportstranslate3d() var s = $.extend({}, defaults, setting) var $slider = $('#' + s.sliderid) var $wrapper = $slider.find('div.slidewrapper').css({transitionDuration: s.transitionDuration}) var $slides = $() var slideslength = 0 var $nav = $() var thisslider = this var selectedindx = 0 var hasharray = [] var mouseslidetimer var swipeevts = {start:"", move:"", end:""}, swipestart = false, dy = 0, bounds = [,], scrollableclass = 'scrollable', bypassdrag = false var initialrun= true // indicate whether this is first time slider has run. After page loads, variable becomes false
if (!translatesupport){ s.transitionDuration = parseFloat(s.transitionDuration) * 1000 }
/** Function to call always after a slide is shown */
function onslidealways($slide, index){ if (!initialrun && s.addHash){ var newhash = $nav.find('li').eq(selectedindx).find('a:eq(0)').attr('href') if (history.replaceState){ history.replaceState(null, null, newhash) } else{ window.location.hash = newhash } }
s.onslide($slide, index) // user defined event handler
}
function hashtoselectedslide(hash){ for (var i=0; i<hasharray.length; i++){ if (hasharray[i][0] == hash){ return i break } } return 0 }
function applybounds(val, swipedir){ if (swipedir == "down"){ return (translatesupport)? Math.max(-parseInt(bounds[1]), val) : Math.max(-bounds[1], val) } else{ return (translatesupport)? Math.min(bounds[0], val) : Math.min(bounds[0], val) } }
function isscrollable($target){ // check element finger is on is contained inside a "scrollable" element that's actually scrollable (scrollHeight exceeds container height) var $scrollel = $target.closest('.' + scrollableclass) var scrollel if ($scrollel.length == 1){ scrollel = $scrollel.get(0) if (scrollel.offsetHeight < scrollel.scrollHeight){ return true } } return false }
/** Mousewheel and keyboard scroll related code. Requires jquery.mousewheel.min.js **/
function mouseslide(deltaY){ var targetindx = selectedindx if (deltaY < 0) // mouse down var targetindx = Math.min(slideslength-1, selectedindx+1) else if (deltaY > 0) var targetindx = Math.max(0, selectedindx-1) if (targetindx != selectedindx) thisslider.slideTo(targetindx) }
$slider.on('mousewheel', function(event){ clearTimeout(mouseslidetimer) var deltaY = event.deltaY mouseslidetimer = setTimeout(function(){ mouseslide(deltaY) }, 100) return false })
$(document).on('keyup', function(e){ var targetindx = selectedindx if (e.keyCode == s.keycodeNavigation[0]) // key to go to next slide var targetindx = Math.min(slideslength-1, selectedindx+1) else if (e.keyCode == s.keycodeNavigation[1]) // key to go to previous slide var targetindx = Math.max(0, selectedindx-1) if (targetindx != selectedindx) { thisslider.slideTo(targetindx)
}
})
/** Swipe/ Mouse Drag scroll related code **/
swipeevts.start = 'touchstart' + (s.swipeconfig.mousedrag? ' mousedown' : ) swipeevts.move = 'touchmove.dragmove' + s.sliderid + (s.swipeconfig.mousedrag? ' mousemove.dragmove' + s.sliderid : ) swipeevts.end = 'touchend' + (s.swipeconfig.mousedrag? ' mouseup' : )
if (s.swipeconfig.mousedrag){ $wrapper.bind('click', function(e){ if ($wrapper.data('dy') != 0) // if dragging on belt instead of clicking on it e.preventDefault() // prevent default action }) }
$wrapper.bind(swipeevts.start, function(e){
bypassdrag = false
var e = (e.type.indexOf('touch') != -1)? e.originalEvent.changedTouches[0] : e
if ( isscrollable( $(e.target) ) ){ // if target is contained inside a "scrollable" element bypassdrag = true return } swipestart = true var mousey = e.pageY dy = 0 // reset swipe amount if (translatesupport){ $wrapper.css({transition: 'none'}) } var initialy = -$window.outerHeight() * selectedindx $wrapper.data({dy: dy})
$(document).bind(swipeevts.move, function(e){
if (bypassdrag){ return }
var e = (e.type.indexOf('touch') != '-1')? e.originalEvent.changedTouches[0] : e
dy=e.pageY-mousey //distance to move horizontally
var newy=initialy+dy newy = applybounds(newy, (dy < 0)? 'down' : 'up') if (translatesupport){ $wrapper.css('transform', 'translate3d(0, ' + newy + 'px, 0)') } else{ $wrapper.css('top', newy) } $wrapper.data({dy: dy})
return false //cancel default drag action })
if (e.type == "mousedown")
return false //cancel default drag action })
$(document).bind(swipeevts.end, function(e){
$(document).unbind(swipeevts.move)
if (!swipestart || bypassdrag) return if (dy != 0){ // if actual swipe has occured if (dy < 0 && dy < -s.swipeconfig.peekamount) // if swipe down and more than peek amount var targetindx = Math.min(slideslength-1, selectedindx+1) else if (dy > 0 && dy > s.swipeconfig.peekamount) // if swipe up and more than peek amount var targetindx = Math.max(0, selectedindx-1) else targetindx = selectedindx thisslider.slideTo(targetindx) if (e.type == "mouseup") return false } swipestart = false
})
/** CSS3 transition ontransitionend event set up */
$wrapper.on('transitionend webkitTransitionEnd', function(e){ if (/transform/i.test(e.originalEvent.propertyName)){ // check event fired on "transform" prop // onslidealways($slides.eq(selectedindx), selectedindx) } })
/** Public functions **/
this.reloadSlides = function(){ $nav.remove() hasharray = [] $nav = $('<ul class="fssnav" />') $slides = $('article.slide').each(function(i){ var $curslide = $(this) var anchorval = $curslide.attr('id') || 'slide' + (i+1) anchorval = "#" + anchorval hasharray.push([anchorval, i]) var title = $curslide.data('title') || anchorval
var $navli = $('var $navlink = $navli.find('a:eq(0)') $navli.on('click touchstart', function(e){ thisslider.slideTo(i) }) }) $nav.on('click touchstart touchend', function(e){
var e = (e.type.indexOf('touch') != '-1')? e.originalEvent.changedTouches[0] : e
return false }).appendTo($slider) slideslength = $slides.length bounds = [0, $window.outerHeight() * (slideslength-1)] }
this.openSlider = function(){ initialrun = false bypassdrag = false s.sliderstate = 'open' $root.addClass('fssopen') $slider.css('visibility', 'visible') }
this.closeSlider = function(){ s.sliderstate = 'close' bypassdrag = true $root.removeClass('fssopen') $slider.css({visibility:'hidden'}) }
this.slideTo = function(indx, noanimation){
onslidealways($slides.eq(selectedindx), indx)
var newy = $window.outerHeight() * indx $nav.find('li').eq(selectedindx).removeClass('selected') $nav.find('li').eq(indx).addClass('selected') selectedindx = indx if (translatesupport){ $wrapper.css({transition: (noanimation)? 'none' : transformprop + ' ' + s.transitionDuration}) $wrapper.css('transform', 'translate3d(0, -' + newy + 'px, 0)') if (noanimation){ // run callback immediately onslidealways($slides.eq(selectedindx), selectedindx) } } else{ $wrapper.stop().animate({top: -newy}, (noanimation)? 0 : s.transitionDuration, function(){ onslidealways($slides.eq(selectedindx), selectedindx) }) } }
/** Initialize and show slider **/
this.reloadSlides() selectedindx = hashtoselectedslide(window.location.hash) this.slideTo(selectedindx, true) if (s.sliderstate == 'open'){ this.openSlider() }
$(window).on('resize', function(){ thisslider.slideTo(selectedindx, true) bounds = [0, $window.outerHeight() * (slideslength-1)] })
} // end fullscreenslider def
return ddfullscreenslider
})(jQuery) </script> </body>
