slideshow
This commit is contained in:
parent
2c6a39e641
commit
2098ea6e21
16 changed files with 390 additions and 238 deletions
|
|
@ -1,100 +0,0 @@
|
||||||
@import "compass/css3";
|
|
||||||
|
|
||||||
$rangeslider: ".rangeslider";
|
|
||||||
$rangeslider--horizontal: ".rangeslider--horizontal";
|
|
||||||
$rangeslider--vertical: ".rangeslider--vertical";
|
|
||||||
$rangeslider--disabled: ".rangeslider--disabled";
|
|
||||||
$rangeslider--active: ".rangeslider--active";
|
|
||||||
$rangeslider__fill: ".rangeslider__fill";
|
|
||||||
$rangeslider__handle: ".rangeslider__handle";
|
|
||||||
|
|
||||||
#{$rangeslider},
|
|
||||||
#{$rangeslider__fill} {
|
|
||||||
display: block;
|
|
||||||
@include box-shadow(inset 0px 1px 3px rgba(0,0,0,0.3));
|
|
||||||
@include border-radius(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#{$rangeslider} {
|
|
||||||
background: #e6e6e6;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#{$rangeslider--horizontal} {
|
|
||||||
height: 20px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#{$rangeslider--vertical} {
|
|
||||||
width: 20px;
|
|
||||||
min-height: 150px;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#{$rangeslider--disabled} {
|
|
||||||
@include opacity(.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
#{$rangeslider__fill} {
|
|
||||||
background: #00ff00;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
#{$rangeslider--horizontal} & {
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#{$rangeslider--vertical} & {
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#{$rangeslider__handle} {
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
position: absolute;
|
|
||||||
@include background-image(linear-gradient(rgba(white, 0), rgba(black, .10)));
|
|
||||||
@include box-shadow(0 0 8px rgba(black, .3));
|
|
||||||
@include border-radius(50%);
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
margin: auto;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
@include background-image(linear-gradient(rgba(black, .13), rgba(white, 0)));
|
|
||||||
@include border-radius(50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
#{$rangeslider--active} & {
|
|
||||||
@include background-image(linear-gradient(rgba(black, .10), rgba(black, .12)));
|
|
||||||
}
|
|
||||||
|
|
||||||
#{$rangeslider--horizontal} & {
|
|
||||||
top: -10px;
|
|
||||||
touch-action: pan-y;
|
|
||||||
-ms-touch-action: pan-y;
|
|
||||||
}
|
|
||||||
|
|
||||||
#{$rangeslider--vertical} & {
|
|
||||||
left: -10px;
|
|
||||||
touch-action: pan-x;
|
|
||||||
-ms-touch-action: pan-x;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"]:focus + #{$rangeslider} #{$rangeslider__handle} {
|
|
||||||
@include box-shadow(0 0 8px rgba(#ff00ff, .9));
|
|
||||||
}
|
|
||||||
138
app/static/css/simple-slideshow-styles.css
Normal file
138
app/static/css/simple-slideshow-styles.css
Normal file
|
|
@ -0,0 +1,138 @@
|
||||||
|
.bss-slides{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.bss-slides:focus{
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
.bss-slides figure{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.bss-slides figure:first-child{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.bss-slides figure img{
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 1.2s;
|
||||||
|
transition: opacity 1.2s;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
.bss-slides .bss-show{
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.bss-slides .bss-show img{
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bss-slides figcaption{
|
||||||
|
position: absolute;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: .8em;
|
||||||
|
bottom: .75em;
|
||||||
|
right: .35em;
|
||||||
|
padding: .25em;
|
||||||
|
color: #fff;
|
||||||
|
background: #000;
|
||||||
|
background: rgba(0,0,0, .25);
|
||||||
|
border-radius: 2px;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 1.2s;
|
||||||
|
transition: opacity 1.2s;
|
||||||
|
}
|
||||||
|
.bss-slides .bss-show figcaption{
|
||||||
|
z-index: 3;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.bss-slides figcaption a{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.bss-next, .bss-prev{
|
||||||
|
visibility: hidden;
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
background: #000;
|
||||||
|
background: rgba(0,0,0, .6);
|
||||||
|
top: 50%;
|
||||||
|
z-index: 4;
|
||||||
|
font-size: 2em;
|
||||||
|
margin-top: -1.2em;
|
||||||
|
opacity: .3;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.bss-next:hover, .bss-prev:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.bss-next{
|
||||||
|
right: -1px;
|
||||||
|
padding: 10px 5px 15px 10px;
|
||||||
|
border-top-left-radius: 3px;
|
||||||
|
border-bottom-left-radius: 3px;
|
||||||
|
}
|
||||||
|
.bss-prev{
|
||||||
|
left: 0;
|
||||||
|
padding: 10px 10px 15px 5px;
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
border-bottom-right-radius: 3px;
|
||||||
|
}
|
||||||
|
.bss-fullscreen{
|
||||||
|
display: block;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background: rgba(0,0,0,.4) url(/static/images/arrows-alt_ffffff_64.png);
|
||||||
|
-webkit-background-size: contain;
|
||||||
|
background-size: contain;
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: .3;
|
||||||
|
}
|
||||||
|
.bss-fullscreen:hover{
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
:-webkit-full-screen .bss-fullscreen{
|
||||||
|
background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png);
|
||||||
|
-webkit-background-size: contain;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
:-moz-full-screen .bss-fullscreen{
|
||||||
|
background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png);
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
:-ms-fullscreen .bss-fullscreen{
|
||||||
|
background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png);
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
:full-screen .bss-fullscreen{
|
||||||
|
background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png);
|
||||||
|
-webkit-background-size: contain;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
:-webkit-full-screen .bss-fullscreen{
|
||||||
|
background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png);
|
||||||
|
-webkit-background-size: contain;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
:-moz-full-screen .bss-fullscreen{
|
||||||
|
background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png);
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
:-ms-fullscreen .bss-fullscreen{
|
||||||
|
background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png);
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
:fullscreen .bss-fullscreen{
|
||||||
|
background: rgba(0,0,0,.4) url(/static/images/compress_ffffff_64.png);
|
||||||
|
-webkit-background-size: contain;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
@ -7,14 +7,14 @@ body {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
-o-background-size: cover;
|
-o-background-size: cover;
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
font-weight: bold;
|
/* font-weight: bold; */
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background: url('/static/images/texture-diagonal.png' repeat, url('static/images/header-layer.jpg') no repeat 50% -25px, #493874 url('/static/images/bg-linear.jpg') repeat-x 50%, -25px;
|
background: url('/static/images/texture-diagonal.png' repeat, url('static/images/header-layer.jpg') no repeat 50% -25px, #493874 url('/static/images/bg-linear.jpg') repeat-x 50%, -25px;
|
||||||
background-position: 50%, 0;
|
background-position: 50%, 0;
|
||||||
clear: both;
|
clear: both;
|
||||||
position: relative;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
|
||||||
|
|
@ -1,121 +0,0 @@
|
||||||
body {
|
|
||||||
background: url('/static/images/bg.jpg') no-repeat center center fixed;
|
|
||||||
background: #000000;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
padding-top: 0px;
|
|
||||||
-webkit-background-size: cover;
|
|
||||||
-moz-background-size: cover;
|
|
||||||
background-size: cover;
|
|
||||||
-o-background-size: cover;
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: gray;
|
|
||||||
font-size: 12pt;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.fluidMedia {
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
|
|
||||||
padding-top: 30px;
|
|
||||||
height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fluidMedia iframe {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form {
|
|
||||||
max-width: 350px;
|
|
||||||
margin-top: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-panel {
|
|
||||||
margin-top: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form {
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-left-32 {
|
|
||||||
padding-left: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-left-16 {
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-fluid {
|
|
||||||
position: relative;
|
|
||||||
max-width: 1170px;
|
|
||||||
min-width: 480px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.roundavatar {
|
|
||||||
border-radius: 50%;
|
|
||||||
-moz-border-radius: 50%;
|
|
||||||
-webkit-border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
|
|
||||||
color: #fff;
|
|
||||||
border-color: #070;
|
|
||||||
background-color: #2b7845;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline {
|
|
||||||
color: inherit;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary.btn-outline {
|
|
||||||
color: #428bca;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-success.btn-outline {
|
|
||||||
color: #5cb85c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-info.btn-outline {
|
|
||||||
color: #5bc0de;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-warning.btn-outline {
|
|
||||||
color: #f0ad4e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger.btn-outline {
|
|
||||||
color: #d9534f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary.btn-outline:hover,
|
|
||||||
.btn-success.btn-outline:hover,
|
|
||||||
.btn-info.btn-outline:hover,
|
|
||||||
.btn-warning.btn-outline:hover,
|
|
||||||
.btn-danger.btn-outline:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary.btn-outline:focus,
|
|
||||||
.btn-success.btn-outline:focus,
|
|
||||||
.btn-info.btn-outline:focus,
|
|
||||||
.btn-warning.btn-outline:focus,
|
|
||||||
.btn-danger.btn-outline:focus {
|
|
||||||
background-color: #fff;
|
|
||||||
border-color: #070;
|
|
||||||
}
|
|
||||||
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 424 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 402 KiB |
163
app/static/js/better-simple-slideshow.js
Normal file
163
app/static/js/better-simple-slideshow.js
Normal file
|
|
@ -0,0 +1,163 @@
|
||||||
|
var makeBSS = function (el, options) {
|
||||||
|
var $slideshows = document.querySelectorAll(el), // a collection of all of the slideshow
|
||||||
|
$slideshow = {},
|
||||||
|
Slideshow = {
|
||||||
|
init: function (el, options) {
|
||||||
|
|
||||||
|
options = options || {}; // if options object not passed in, then set to empty object
|
||||||
|
options.auto = options.auto || false; // if options.auto object not passed in, then set to false
|
||||||
|
this.opts = {
|
||||||
|
selector: (typeof options.selector === "undefined") ? "figure" : options.selector,
|
||||||
|
auto: (typeof options.auto === "undefined") ? false : options.auto,
|
||||||
|
speed: (typeof options.auto.speed === "undefined") ? 1500 : options.auto.speed,
|
||||||
|
pauseOnHover: (typeof options.auto.pauseOnHover === "undefined") ? false : options.auto.pauseOnHover,
|
||||||
|
fullScreen: (typeof options.fullScreen === "undefined") ? false : options.fullScreen,
|
||||||
|
swipe: (typeof options.swipe === "undefined") ? false : options.swipe
|
||||||
|
};
|
||||||
|
|
||||||
|
this.counter = 0; // to keep track of current slide
|
||||||
|
this.el = el; // current slideshow container
|
||||||
|
this.$items = el.querySelectorAll(this.opts.selector); // a collection of all of the slides, caching for performance
|
||||||
|
this.numItems = this.$items.length; // total number of slides
|
||||||
|
this.$items[0].classList.add('bss-show'); // add show class to first figure
|
||||||
|
this.injectControls(el);
|
||||||
|
this.addEventListeners(el);
|
||||||
|
if (this.opts.auto) {
|
||||||
|
this.autoCycle(this.el, this.opts.speed, this.opts.pauseOnHover);
|
||||||
|
}
|
||||||
|
if (this.opts.fullScreen) {
|
||||||
|
this.addFullScreen(this.el);
|
||||||
|
}
|
||||||
|
if (this.opts.swipe) {
|
||||||
|
this.addSwipe(this.el);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showCurrent: function (i) {
|
||||||
|
// increment or decrement this.counter depending on whether i === 1 or i === -1
|
||||||
|
if (i > 0) {
|
||||||
|
this.counter = (this.counter + 1 === this.numItems) ? 0 : this.counter + 1;
|
||||||
|
} else {
|
||||||
|
this.counter = (this.counter - 1 < 0) ? this.numItems - 1 : this.counter - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// remove .show from whichever element currently has it
|
||||||
|
// http://stackoverflow.com/a/16053538/2006057
|
||||||
|
[].forEach.call(this.$items, function (el) {
|
||||||
|
el.classList.remove('bss-show');
|
||||||
|
});
|
||||||
|
|
||||||
|
// add .show to the one item that's supposed to have it
|
||||||
|
this.$items[this.counter].classList.add('bss-show');
|
||||||
|
},
|
||||||
|
injectControls: function (el) {
|
||||||
|
// build and inject prev/next controls
|
||||||
|
// first create all the new elements
|
||||||
|
var spanPrev = document.createElement("span"),
|
||||||
|
spanNext = document.createElement("span"),
|
||||||
|
docFrag = document.createDocumentFragment();
|
||||||
|
|
||||||
|
// add classes
|
||||||
|
spanPrev.classList.add('bss-prev');
|
||||||
|
spanNext.classList.add('bss-next');
|
||||||
|
|
||||||
|
// add contents
|
||||||
|
spanPrev.innerHTML = '«';
|
||||||
|
spanNext.innerHTML = '»';
|
||||||
|
|
||||||
|
// append elements to fragment, then append fragment to DOM
|
||||||
|
docFrag.appendChild(spanPrev);
|
||||||
|
docFrag.appendChild(spanNext);
|
||||||
|
el.appendChild(docFrag);
|
||||||
|
},
|
||||||
|
addEventListeners: function (el) {
|
||||||
|
var that = this;
|
||||||
|
el.querySelector('.bss-next').addEventListener('click', function () {
|
||||||
|
that.showCurrent(1); // increment & show
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
el.querySelector('.bss-prev').addEventListener('click', function () {
|
||||||
|
that.showCurrent(-1); // decrement & show
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
el.onkeydown = function (e) {
|
||||||
|
e = e || window.event;
|
||||||
|
if (e.keyCode === 37) {
|
||||||
|
that.showCurrent(-1); // decrement & show
|
||||||
|
} else if (e.keyCode === 39) {
|
||||||
|
that.showCurrent(1); // increment & show
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
autoCycle: function (el, speed, pauseOnHover) {
|
||||||
|
var that = this,
|
||||||
|
interval = window.setInterval(function () {
|
||||||
|
that.showCurrent(1); // increment & show
|
||||||
|
}, speed);
|
||||||
|
|
||||||
|
if (pauseOnHover) {
|
||||||
|
el.addEventListener('mouseover', function () {
|
||||||
|
interval = clearInterval(interval);
|
||||||
|
}, false);
|
||||||
|
el.addEventListener('mouseout', function () {
|
||||||
|
interval = window.setInterval(function () {
|
||||||
|
that.showCurrent(1); // increment & show
|
||||||
|
}, speed);
|
||||||
|
}, false);
|
||||||
|
} // end pauseonhover
|
||||||
|
|
||||||
|
},
|
||||||
|
addFullScreen: function(el){
|
||||||
|
var that = this,
|
||||||
|
fsControl = document.createElement("span");
|
||||||
|
|
||||||
|
fsControl.classList.add('bss-fullscreen');
|
||||||
|
el.appendChild(fsControl);
|
||||||
|
el.querySelector('.bss-fullscreen').addEventListener('click', function () {
|
||||||
|
that.toggleFullScreen(el);
|
||||||
|
}, false);
|
||||||
|
},
|
||||||
|
addSwipe: function(el){
|
||||||
|
var that = this,
|
||||||
|
ht = new Hammer(el);
|
||||||
|
ht.on('swiperight', function(e) {
|
||||||
|
that.showCurrent(-1); // decrement & show
|
||||||
|
});
|
||||||
|
ht.on('swipeleft', function(e) {
|
||||||
|
that.showCurrent(1); // increment & show
|
||||||
|
});
|
||||||
|
},
|
||||||
|
toggleFullScreen: function(el){
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
|
||||||
|
if (!document.fullscreenElement && // alternative standard method
|
||||||
|
!document.mozFullScreenElement && !document.webkitFullscreenElement &&
|
||||||
|
!document.msFullscreenElement ) { // current working methods
|
||||||
|
if (document.documentElement.requestFullscreen) {
|
||||||
|
el.requestFullscreen();
|
||||||
|
} else if (document.documentElement.msRequestFullscreen) {
|
||||||
|
el.msRequestFullscreen();
|
||||||
|
} else if (document.documentElement.mozRequestFullScreen) {
|
||||||
|
el.mozRequestFullScreen();
|
||||||
|
} else if (document.documentElement.webkitRequestFullscreen) {
|
||||||
|
el.webkitRequestFullscreen(el.ALLOW_KEYBOARD_INPUT);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (document.exitFullscreen) {
|
||||||
|
document.exitFullscreen();
|
||||||
|
} else if (document.msExitFullscreen) {
|
||||||
|
document.msExitFullscreen();
|
||||||
|
} else if (document.mozCancelFullScreen) {
|
||||||
|
document.mozCancelFullScreen();
|
||||||
|
} else if (document.webkitExitFullscreen) {
|
||||||
|
document.webkitExitFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} // end toggleFullScreen
|
||||||
|
|
||||||
|
}; // end Slideshow object .....
|
||||||
|
|
||||||
|
// make instances of Slideshow as needed
|
||||||
|
[].forEach.call($slideshows, function (el) {
|
||||||
|
$slideshow = Object.create(Slideshow);
|
||||||
|
$slideshow.init(el, options);
|
||||||
|
});
|
||||||
|
};
|
||||||
49
app/static/js/clouds.js
Normal file
49
app/static/js/clouds.js
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
var canvas;
|
||||||
|
var ctx;
|
||||||
|
|
||||||
|
var background;
|
||||||
|
var width = 300;
|
||||||
|
var height = 200;
|
||||||
|
|
||||||
|
var cloud;
|
||||||
|
var cloud_x;
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
canvas = document.getElementById("clouds");
|
||||||
|
width = canvas.width;
|
||||||
|
height = canvas.height;
|
||||||
|
ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
// init background
|
||||||
|
background = new Image();
|
||||||
|
background.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/forest.png';
|
||||||
|
|
||||||
|
// init cloud
|
||||||
|
cloud = new Image();
|
||||||
|
cloud.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/cloud.png';
|
||||||
|
cloud.onload = function(){
|
||||||
|
cloud_x = -cloud.width;
|
||||||
|
};
|
||||||
|
|
||||||
|
return setInterval(main_loop, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
function update(){
|
||||||
|
cloud_x += 0.3;
|
||||||
|
if (cloud_x > width ) {
|
||||||
|
cloud_x = -cloud.width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
ctx.drawImage(background,0,0);
|
||||||
|
ctx.drawImage(cloud, cloud_x, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function main_loop() {
|
||||||
|
draw();
|
||||||
|
update();
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
{% import "bootstrap/fixes.html" as fixes %}
|
{% import "bootstrap/fixes.html" as fixes %}
|
||||||
{% import "bootstrap/utils.html" as util %}
|
{% import "bootstrap/utils.html" as util %}
|
||||||
|
|
||||||
{% block title %}Panel{% endblock %}
|
{% block title %}Cloud Builder - Datapoint.bg{% endblock %}
|
||||||
|
|
||||||
{% block html_attribs %} lang="en"{% endblock %}
|
{% block html_attribs %} lang="en"{% endblock %}
|
||||||
|
|
||||||
|
|
@ -30,6 +30,7 @@
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
{% block outside_container %}{% endblock %}
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{% for message in get_flashed_messages() %}
|
{% for message in get_flashed_messages() %}
|
||||||
<div class="alert alert-warning">
|
<div class="alert alert-warning">
|
||||||
|
|
@ -39,6 +40,7 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
{% block page_content %}{% endblock %}
|
{% block page_content %}{% endblock %}
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block footer %}
|
{% block footer %}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,22 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block styles %}
|
||||||
|
{{ super() }}
|
||||||
|
<link href="/static/css/simple-slideshow-styles.css" type="text/css" rel="stylesheet" media="screen">
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
|
<script type="text/javascript" src="/static/js/better-simple-slideshow.js" charset="UTF-8"></script>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
background-image: url('static/images/cloudsbg.jpeg');
|
background-image: url('/static/images/cloudsbg.jpeg');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
top:0;
|
top:0;
|
||||||
left:0;
|
left:0;
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
height:100%;
|
||||||
z-index:-1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-transparent {
|
.panel-transparent {
|
||||||
|
|
@ -19,31 +24,50 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-transparent .panel-heading{
|
.panel-transparent .panel-heading{
|
||||||
background: rgba(122, 130, 136, 0.7)!important;
|
background: rgb(255, 255, 255); /* fallback */
|
||||||
|
background: rgba(255, 255, 255, 0.7)!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-transparent .panel-body{
|
.panel-transparent .panel-body{
|
||||||
|
background: rgb(255, 255, 255); /* fallback */
|
||||||
background: rgba(255, 255, 255, 0.7)!important;
|
background: rgba(255, 255, 255, 0.7)!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block scripts %}
|
||||||
|
<script>
|
||||||
|
var opts = {
|
||||||
|
auto : {
|
||||||
|
speed : 6000,
|
||||||
|
pauseOnHover : false
|
||||||
|
},
|
||||||
|
fullScreen : false,
|
||||||
|
swipe : false
|
||||||
|
};
|
||||||
|
makeBSS('.bss-slides', opts);
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block outside_container %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div id="container">
|
<!--
|
||||||
<div class="container">
|
<div class="row">
|
||||||
|
<img src="/static/slideshow/robot.png" class="img-responsive"></img>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="bss-slides">
|
<div class="bss-slides">
|
||||||
<figure>
|
<figure>
|
||||||
<img src="../../static/images/robot.png" width="100%" />
|
<img src="/static/slideshow/robot.png" width="100%" />
|
||||||
<figcaption>Caption goes here</figcaption>
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img src="/static/slideshow/robot2.png" width="100%" />
|
||||||
</figure>
|
</figure>
|
||||||
<!-- more figures here as needed -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <img src="../../static/images/robot.png" class="img-responsive"></img> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container-fluid-index">
|
<div class="container-fluid-index">
|
||||||
|
|
@ -88,8 +112,5 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue