Ich habe eine Schaltfläche zu meiner Website, die eine Galerie Popup, mein Problem ist, dass die Galerie das Bild aus dem Code geladen, so wenn mein Client ein neues Bild hochladen muss ich hinzufügen es ist für ihn auch im Code. Wie kann ich es automatisch aktualisieren? Ich meine, wenn der Kunde ein Bild zu "Medien" in WordPress hinzufügen wird, so wird die Galerie automatisch aktualisiert, danke!Popup-Galerie für Benutzer, WordPress
hier ist der Code im Augenblick mit:
<!DOCTYPE html>
<html>
<body>
<img class="alignnone size-full wp-image-133 aligncenter" style="border: 5px solid white; border-radius: 50%; background: white; box-shadow: 1px 1px 5px gray;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" alt="" width="72" height="72" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"><strong>try</strong>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1/4</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2/4</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3/4</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4/4</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" alt="Nature and sunrise" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<script>
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>