Side til visning af billeder
Jeg har lavet en side der kan vise billeder fra en mappe. Virker det og er det gjort rigtigt?Billederne skifter ved brug af JavaScript... Hvilke filer der skal vises hentes ved brug af php...
Jeg ved godt at jeg har skrevet noget css på siden som nok burde stå i en css fil, hvis det skal gøres efter best practice (det var bare nemmere sådan):
css filerne kan hentes her:
http://www.cthyge.dk/script1/style_rs.css
http://www.cthyge.dk/script1/css.css
<html>
<head>
<title>Index</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="da" />
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="revisit-after" content="7">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<style>
.img {
border: 0px solid #000000;
object-fit: contain;
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
</style>
<link rel="stylesheet" href="css.css">
<link rel="stylesheet" href="style_rs.css">
</head>
<body>
<script>
//var random = true;
var img = [];
<?php
$qfolder = ".";
$list_files = array();
$list_folders = array();
if ($handle = opendir($qfolder)) {
while (false !== ($entry = readdir($handle))) {
if ($entry != "." && $entry != "..") {
if (is_dir($qfolder."/".$entry) && is_readable($qfolder."/".$entry)) {
$list_folders[] = $entry;
}
//else if(is_readable($qfolder."/".$entry)) {
else {
$list_files[] = $entry;
}
}
}
closedir($handle);
}
sort($list_files);
$i = 0;
foreach($list_files as $entry) {
$extention = substr(strtolower($entry),strrpos($entry,".")+1);
if ($extention == "jpg" || $extention == "jpeg") {
echo "img[".$i."] = '".$entry."';\n";
$i++;
}
}
?>
var i = 0;
var items = <?= $i-1 ?>;
var last = i;
var slideshow_startet = false;
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
// up arrow
uparrow();
}
else if (e.keyCode == '40') {
// down arrow
// number from 0 to "items"
last = i;
var temp = i;
if (items>1) {
while (temp==i)
i = Math.floor((Math.random() * (items+1)) + 0);
document.getElementById('1').src=img[i];
}
behave();
}
else if (e.keyCode == '37') {
// left arrow
leftarrow();
}
else if (e.keyCode == '39') {
// right arrow
rightarrow();
}
else if (e.keyCode == '83') {
// key s
key_s();
}
else if (e.keyCode == '32') {
// key space
rightarrow();
}
else {
//alert(e.keyCode);
}
}
function key_s() {
if (slideshow_startet == true) {
slideshow_startet = false;
}
else {
slideshow_startet = true;
rightarrow();
setTimeout("slideshow();",1000);
}
}
function slideshow() {
if (slideshow_startet == true) {
rightarrow();
setTimeout("slideshow();",1000);
}
}
function rightarrow() {
last = i;
i=i+1;
if (i>items)
i = 0;
document.getElementById('1').src=img[i];
behave();
}
function leftarrow() {
last = i;
i=i-1;
if (i<0)
i = items;
document.getElementById('1').src=img[i];
behave();
}
function uparrow() {
document.getElementById('1').src=img[last];
i = last;
behave();
}
function downarrow() {
// number from 0 to "items"
last = i;
var temp = i;
if (items>1) {
while (temp==i)
i = Math.floor((Math.random() * (items+1)) + 0);
document.getElementById('1').src=img[i];
}
behave();
}
function behave() {
openFullscreen();
}
/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;
/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
</script>
<div class=navbar style="margin:0px;padding:0px;">
<table bgcolor=ffffff cellpadding=0 cellspacing=0><tr><td>
<a href="menu.php" class=black><font color=000000>Menu</font></a> <a href="#" onclick="java script:key_s();return false;" class=black><font color=000000>Slideshow</font></a>
</td></tr>
</table>
</div>
<div align=center style="height:100%;">
<img class=img src='<?= $list_files[0]; ?>' id=1 onclick=rightarrow();>
<button class="w3-button w3-black w3-display-left" onclick="leftarrow();">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="rightarrow();">❯</button>
<button class="w3-button w3-black w3-display-bottom" onclick="downarrow();">ᗊ</button>
<button class="w3-button w3-black w3-display-top" onclick="uparrow();">ᗋ</button>
</div>
</body>
</html>
