sqozz/html5-slideshow
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

first final version with fpk and masterframe

Browse source
This commit is contained in:
sqozz 2016-10-04 22:29:45 +02:00
parent 4706498199
commit 6400fefaa1
13 changed files with 126 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/fpk2/0.JPG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 434 KiB

BIN
assets/fpk2/1.JPG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 213 KiB

BIN
assets/fpk2/2.JPG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 554 KiB

BIN
assets/fpk2/3.JPG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 777 KiB

BIN
assets/fpk2/4.JPG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 197 KiB

BIN
assets/fpk2/5.JPG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 203 KiB

BIN
assets/fpk2/6.JPG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 483 KiB

BIN
assets/fpk2/7.JPG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
css/.index.css.swo Normal file
View file

Binary file not shown.

10
css/index.css
View file

@ -24,6 +24,10 @@ body {
width: 45%; width: 45%;
} }
#fpk.side {
width: 100%;
}
#left.side .frame { #left.side .frame {
background-size:contain; background-size:contain;
background-position: center; background-position: center;
@ -36,6 +40,12 @@ body {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#fpk.side .frame {
background-size:contain;
background-position: center;
background-repeat: no-repeat;
}
.frame { .frame {
width: 100%; width: 100%;
height: 100%; height: 100%;

14
fpk2.html Normal file
View file

@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TITLE</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<script src="js/index.js"></script>
<div id="fpk" class="side">
<div class="frame"></div>
</div>
</body>
</html>

121
js/index.js
View file

@ -1,19 +1,23 @@
MAX_IMG_NUMBER = 7 MAX_IMG_NUMBER = 7
ASSET_PATH = "\"assets/frame1/" ASSET_PATH = "\"assets/frame1/"
ASSET_SUFFIX = ".JPG\"" ASSET_SUFFIX = ".JPG"
SET_COOKIE = false
var frames = [ var frames = [
{ {
DOMElement : "", DOMElement : null,
IMGCounter : 0, IMGCounter : 0,
ASSET_FOLDER : "assets/frame1/",
}, },
{ {
DOMElement : "", DOMElement : null,
IMGCounter : 0, IMGCounter : 0,
ASSET_FOLDER : "assets/frame2/",
}, },
{ {
DOMElement : "", DOMElement : null,
IMGCounter : 0, IMGCounter : 0,
ASSET_FOLDER : "assets/fpk2/",
} }
] ]
@ -22,53 +26,132 @@ FOOBAR = ""
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
frames[0].DOMElement = document.querySelector("#left.side .frame") frames[0].DOMElement = document.querySelector("#left.side .frame")
frames[1].DOMElement = document.querySelector("#right.side .frame") frames[1].DOMElement = document.querySelector("#right.side .frame")
frames[2].DOMElement = document.querySelector("#fpk.side .frame")
frames.forEach(function(val, i) { frames.forEach(function(val, i) {
if (frames[i].DOMElement != "") { if (frames[i].DOMElement != null) {
nextImage(frames[i]) nextImage(frames[i])
} }
}); });
old_cookies = document.cookie
setInterval(function() {
var new_cookies = document.cookie
if (old_cookies != new_cookies && !SET_COOKIE) {
var cookie = new_cookies
var deviderPos = cookie.indexOf("=")
var name = deviderPos > -1 ? cookie.substr(0, deviderPos) : cookie;
var value = cookie.substr(deviderPos + 1, cookie.length)
if (name != "") {
console.log("processing remote keypress: " + value )
processKeypress(value)
cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
}
document.cookie = cookie
old_cookies = new_cookies
} else {
SET_COOKIE = false
}
}, 10)
}, false); }, false);
function deleteAllCookies() {
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
var eqPos = cookie.indexOf("=");
var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
}
}
document.addEventListener("keypress", function(keyEvent) { document.addEventListener("keypress", function(keyEvent) {
switch (keyEvent.key) { processKeypress(keyEvent.key)
}, false);
function processKeypress(keypress) {
switch (keypress) {
case "q": case "q":
targetFrame = frames[0] targetFrame = frames[0]
prevImage(targetFrame) if (targetFrame.DOMElement != null) {
prevImage(targetFrame)
SET_COOKIE = false
} else {
console.log("frame not available, setting cookie")
document.cookie = "key="+keypress
SET_COOKIE = true
}
break; break;
case "w": case "w":
targetFrame = frames[0] targetFrame = frames[0]
nextImage(targetFrame) if (targetFrame.DOMElement != null) {
nextImage(targetFrame)
SET_COOKIE = false
} else {
console.log("frame not available, setting cookie")
document.cookie = "key="+keypress
SET_COOKIE = true
}
break; break;
case "a": case "a":
targetFrame = frames[1] targetFrame = frames[1]
prevImage(targetFrame) if (targetFrame.DOMElement != null) {
prevImage(targetFrame)
SET_COOKIE = false
} else {
console.log("frame not available, setting cookie")
document.cookie = "key="+keypress
SET_COOKIE = true
}
break; break;
case "s": case "s":
targetFrame = frames[1] targetFrame = frames[1]
nextImage(targetFrame) if (targetFrame.DOMElement != null) {
nextImage(targetFrame)
SET_COOKIE = false
} else {
console.log("frame not available, setting cookie")
document.cookie = "key="+keypress
SET_COOKIE = true
}
break; break;
case "y": case "y":
targetFrame = frames[2] targetFrame = frames[2]
prevImage(targetFrame) if (targetFrame.DOMElement != null) {
prevImage(targetFrame)
SET_COOKIE = false
} else {
console.log("frame not available, setting cookie")
document.cookie = "key="+keypress
SET_COOKIE = true
}
break; break;
case "x": case "x":
targetFrame = frames[2] targetFrame = frames[2]
nextImage(targetFrame) if (targetFrame.DOMElement != null) {
nextImage(targetFrame)
SET_COOKIE = false
} else {
console.log("frame not available, setting cookie")
document.cookie = "key="+keypress
SET_COOKIE = true
}
break; break;
} }
}, false); }
function nextImage(targetFrame) { function nextImage(targetFrame) {
console.log(targetFrame)
if (targetFrame.IMGCounter >= MAX_IMG_NUMBER) { if (targetFrame.IMGCounter >= MAX_IMG_NUMBER) {
targetFrame.IMGCounter = 0 targetFrame.IMGCounter = 0
} else { } else {
targetFrame.IMGCounter++ targetFrame.IMGCounter++
} }
setFrameImage(targetFrame.DOMElement, ASSET_PATH + targetFrame.IMGCounter + ASSET_SUFFIX) setFrameImage(targetFrame.DOMElement, "\"" + targetFrame.ASSET_FOLDER + targetFrame.IMGCounter + ASSET_SUFFIX + "\"")
} }
function prevImage(targetFrame) { function prevImage(targetFrame) {
@ -78,9 +161,9 @@ function prevImage(targetFrame) {
targetFrame.IMGCounter-- targetFrame.IMGCounter--
} }
setFrameImage(targetFrame.DOMElement, ASSET_PATH + targetFrame.IMGCounter + ASSET_SUFFIX) setFrameImage(targetFrame.DOMElement, "\"" + targetFrame.ASSET_FOLDER + targetFrame.IMGCounter + ASSET_SUFFIX + "\"")
} }
function setFrameImage(frame, imgPath) { function setFrameImage(frame, imgPath) {
frame.style.backgroundImage = "url(" + imgPath + ")" frame.style.backgroundImage = "url(" + imgPath + ")"
} }

0
index.html → masterframe.html
View file