Bilder aus einem Verzeichnis auslesen und via Listanzeige ausgeben - jquery ohne php
Hallo,
ich beziehe mich hier auf keine Contao-Lösung » nur ein HTML/CSS script.
Ein Kunde möchte immer in das gleiche Verzeichnis via upload-script Bilder hochladen
In der Browserausgabe sollten dann immer alle Bilder dargestellt werden.
... im Idealfall ohne php
Mein Ansatz:
ich lese ein Verzeichnis via jquery aus und lasse es via HTML darstellen - auf der Suche nach diesem Vorhaben bin ich über folgendes (ähnliches) script gestolpert:
Code:
<body>
<img id="viewer" src="" width="800px"/>
<div id="info"> </div>
<script>
$(function() {
var baseUrl = "";
var pictureIndex = 0;
var pictures = [];
function getFiles() {
$.ajax({
type:"GET",
url: baseUrl,
success: function(data){
pictures = [];
$(data).find("a[href]").each(function() {
var href = $(this).attr('href');
if (href.indexOf('.jpg') > 0 || href.indexOf('.png') > 0 || href.indexOf('.jpeg') > 0) {
pictures.push(href);
}
});
console.log(pictures.length + " pictures loaded!");
changePicture(0); }
});
}
function changePicture(indexOffset) {
pictureIndex += indexOffset;
if (pictureIndex >= pictures.length) {
pictureIndex = 0;
} else if (pictureIndex < 0) {
pictureIndex = pictures.length - 1;
}
$('#viewer').attr('src', baseUrl + pictures[pictureIndex]);
$('#info').text((pictureIndex + 1) + "/" + pictures.length);
}
getFiles();
$(document).keydown(function(e){
var left = -1, right = 1;
if (e.keyCode == 37) {
changePicture(left); return false;
} else if (e.keyCode == 39) {
changePicture(right); return false;
}
});
});
</script>
</body>
Nur das klappt nicht - es wird mir immer nur ein nicht definierter Pfad des src="" ausgegeben
<img id="viewer" src="undefined" width="800px"/>
Der consolen-log bringt '0 pictures loaded!' und die #info bringt 1/0
Die Bilder liegen aktuell im gleichen Verzeichnis wie die html-Datei
Hat jemand ne Idee wie ich obiges script anzupassen habe, bzw. wie ich mein Vorhaben umsetzen könnte?
