-
-
Save cezarderevlean/2029cac7b4e462086ce1cb172db72d54 to your computer and use it in GitHub Desktop.
| <?php | |
| $dir = 'img'; | |
| $files = scandir($dir); | |
| $ext = '.png'; | |
| foreach ($files as $img) { | |
| if ( substr_compare($img, $ext, -strlen($ext), strlen($ext)) === 0 ) { | |
| ?> | |
| <h2 style="font-family: monospace;"><?=$img?></h2> | |
| <div style="text-align: center; margin-bottom: 100px;"> | |
| <img src="img/<?=$img?>"> | |
| </div> | |
| <? | |
| } | |
| } | |
| ?> |
I think you have to use something on the server side. If you want JS, you can use Node.
https://www.geeksforgeeks.org/how-to-display-all-files-in-a-directory-using-node-js/
Use This:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Title</title> <meta name="language" content="en" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <style type="text/css"> ul li {list-style: none; margin-bottom: 15px;} ul li img {display: block;} ul li span {display: block;} </style> </head> <body> <?php // open this directory $myDirectory = opendir("images"); // get each entry while($entryName = readdir($myDirectory)) { $dirArray[] = $entryName; } // close directory closedir($myDirectory); // count elements in array $indexCount = count($dirArray); ?> <ul> <?php // loop through the array of files and print them all in a list for($index=0; $index < $indexCount; $index++) { $extension = substr($dirArray[$index], -3); if ($extension == 'jpg'){ // list only jpgs echo '<li><img src="images/' . $dirArray[$index] . '" alt="Image" /><span>' . $dirArray[$index] . '</span>'; } } ?> </ul> </body> </html>
Source: https://forum.webdeveloper.com/d/243055-resolved-display-all-images-in-a-set-directory/2
Use This:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Title</title> <meta name="language" content="en" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <style type="text/css"> ul li {list-style: none; margin-bottom: 15px;} ul li img {display: block;} ul li span {display: block;} </style> </head> <body> <?php // open this directory $myDirectory = opendir("images"); // get each entry while($entryName = readdir($myDirectory)) { $dirArray[] = $entryName; } // close directory closedir($myDirectory); // count elements in array $indexCount = count($dirArray); ?> <ul> <?php // loop through the array of files and print them all in a list for($index=0; $index < $indexCount; $index++) { $extension = substr($dirArray[$index], -3); if ($extension == 'jpg'){ // list only jpgs echo '<li><img src="images/' . $dirArray[$index] . '" alt="Image" /><span>' . $dirArray[$index] . '</span>'; } } ?> </ul> </body> </html>Source: https://forum.webdeveloper.com/d/243055-resolved-display-all-images-in-a-set-directory/2
I got the php working to display the current working directory. I have wanted to do this since 2008.
However, I also run a backup webserver from my house. I have tried about a dozen windows webservers and only found one over the year that I could get running, which may have been written by a very bright guy in 2004, called homeseries. I never was able to get the php to work on my windows home webserver (even after trying to dl php machines and installing).
I personally really, really like php for its easy learning curve, human readability, non limiting user access to their preferred fonts and layout, doesn't limit note taking cut and paste into research notes, fast speed relative to sloggy javascript, and universal browser and universal proxy ability, even with 19x lowbandwidth accelerators which I still use to get my 140 weather products over my cell connection to keep my data down and cell bill to $5/mo per line.
On the other hand, I personally hate browsing javascripted webpages (for a myriad of reasons). I actually loathe everything javascript to its core. I have js hangups. But no choice, but to browse with it turned on, anymore and endure the page load slowdown.
Regardless of js hangups, I unfortunately need use javascript for my home web server image gallery index.html on the home server to display all images.
I don't understand recommended the links for js way to do it here (google is silent in my results. I also don't get this thread, which solves the problem with php. Then it is asked how to do this in javascript, without php, but then it is answered with js code that still uses php.
The best javascript I can get, so far, from the links, for a js only index.html is (which outputs only garbage ):
<!doctype html>
<title>Title</title> <meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
ul li {list-style: none; margin-bottom: 15px;}
ul li img {display: block;}
ul li span {display: block;}
</style>
</head>
<body>
// Import the filesystem module
const fs = require("fs");
let directory_name = "example_dir";
// Open the directory
var loc = window.location.pathname;
var dir = loc.substring(0, loc.lastIndexOf('/'));
//let openedDir = fs.opendirSync(directory_name);
let openedDir = dir
// Print the pathname of the directory
console.log("\nPath of the directory:", openedDir.path);
// Get the files present in the directory
console.log("Files Present in directory:");
let filesLeft = true;
while (filesLeft) {
// Read a file as fs.Dirent object
let fileDirent = openedDir.readSync();
// If readSync() does not return null
// print its filename
if (fileDirent != null)
console.log("Name:", fileDirent.name);
// If the readSync() returns null
// stop the loop
else filesLeft = false;
}
$(document).ready(function() {
let images = [];
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let video = document.getElementById('video');
$("#processButton").click(function() {
let files = document.getElementById('imageFolder').files;
for (let i = 0; i < files.length; i++) {
if (files[i].type.match(/image.*/)) {
images.push(files[i]);
}
}
images.sort(function(a, b) {
return a.name.localeCompare(b.name);
});
video.width = images[0].width;
video.height = images[0].height;
canvas.width = images[0].width;
canvas.height = images[0].height;
playImages();
});
$("#resultButton").click(function() {
// Do something with the processed images and display the result
alert('Result displayed!');
});
function playImages() {
let currentImage = 0;
let fps = 10;
let interval = setInterval(function() {
if (currentImage >= images.length) {
clearInterval(interval);
$("#processButton").attr("disabled", true);
$("#resultButton").removeAttr("disabled");
return;
}
let image = new Image();
image.src = URL.createObjectURL(images[currentImage]);
image.onload = function() {
ctx.drawImage(image, 0, 0);
video.src = canvas.toDataURL('image/png');
currentImage++;
};
}, 1000 / fps);
}
});
I am using jquery and javascript. Is there an alternative without using php to do this? Thanks