%3Ca%20href%3D%22..%2Fsrc%2F1699483442874.jpg%22%20onclick%3D%22return%20expandFile%28event%2C%20%27173%27%29%3B%22%3E%3Cimg%20src%3D%22..%2Fsrc%2F1699483442874.jpg%22%20width%3D%22500%22%20style%3D%22max-width%3A%2085vw%3Bheight%3A%20auto%3B%22%3E%3C%2Fa%3E
OK, this is a complete html5 webpage for the gallery. it should be placed one directory above the directory containing the imagefiles.
You need to create a text file named exactly "imageFileList.txt" in the same directory as this html file. Note the F and L are capitols.
you then copy each imagefilename.jpg (any image type suffix) ending with a COMMA, omitting the comma for the LAST filename.
the only thing you need to change in this html is the actual meme foldername in the imagepath variable, do not need preceeding / or ./ unless the O/s chokes. You do need the trailing /
=========
I made it dumb simple, and three images wide, when you mouseover the image expands to 600 x 600 you can change those sizes if you wish.
you can play around with CSS for colors font etc later if you wish.
by necessity it uses javascript, but kept simple and an xhr call to read the text file list.
all contained in the html file.
I tested it on my webserver, should work fine.
after you do the initial creation of the
"imageFileList.txt", it should be easy to manually add new image files, just remember to add the comma to the end of the last iteration of the list, and omit it on the last filename.
enjoy !
------------------CUT here-------------------
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
display: inline-block;
margin: 10px;
}
.image {
width: 300px;
height: 300px;
border: 1px solid #000;
cursor: pointer;
}
.image:hover {
width: 600px;
height: 600px;
}
.row {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<H1> Blyad Meme Gallery </H1> <br>
<div id="imageGallery"></div>
<script>
const imageGallery = document.getElementById("imageGallery");
// Define the path to the image folder
const imagePath = 'files/'; // Include the actual path to your image folder
// Function to load images from the list
const loadImages = (imageFileList) => {
let currentRow;
imageFileList.forEach((filename, index) => {
if (index % 3 === 0) {
// Start a new row after every three images
currentRow = document.createElement("div");
currentRow.className = "row";
imageGallery.appendChild(currentRow);
}
const imageContainer = document.createElement("div");
imageContainer.className = "image-container";
const img = document.createElement("img");
img.src = imagePath + filename;
img.className = "image";
const filenameElement = document.createElement("div");
filenameElement.innerText = filename;
imageContainer.appendChild(img);
imageContainer.appendChild(filenameElement);
currentRow.appendChild(imageContainer);
});
};
// Function to read an external text file of image filenames without fetch
const readExternalFile = () => {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'imageFileList.txt', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const text = xhr.responseText;
// Split the text by commas and trim whitespace to create an array of image filenames
const imageFileList = text.split(',').map(filename => filename.trim());
// Call the function to load images
loadImages(imageFileList);
}
};
xhr.send();
};
// Call the function to read the external text file and load images when the page loads
readExternalFile();
</script>
</body>
</html>