Avatar billede cht22 Professor
10. oktober 2019 - 12:06 Der er 1 løsning

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();">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="rightarrow();">&#10095;</button>
  <button class="w3-button w3-black w3-display-bottom" onclick="downarrow();">&#5578</button>
  <button class="w3-button w3-black w3-display-top" onclick="uparrow();">&#5579</button>

</div>

</body>
</html>
Avatar billede cht22 Professor
11. oktober 2019 - 21:15 #1
Mit spørgsmål drejede sig mest om dette var den rigtige måde at skifte billede på og om det virker:

<script>
function rightarrow() {
i=i+1;
if (i>items)
i = 0;
document.getElementById('1').src=img[i];
}
</script>

<?php $rand = rand(0,$i-1); ?>

<img class=img src='<?= $list_files[$rand]; ?>' id=1 onclick=rightarrow();>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester