rdejong123
Nieuwe gebruiker
- Lid geworden
- 17 nov 2021
- Berichten
- 2
Hallo,
Ik heb een vraagje over HTML / Javascript.
Ik heb een slideshow op een TV draaien. Dit is een pagina in HTML en javascript. Ik zal jullie de hele HTML besparen, maar ik moet bij elke "slide" aangeven welke png hij moet laten zien.
Aangezien deze slideshow veel verandert, wil ik eigenlijk geautomatiseerd de "fotofolder" uitlezen en vanzelf het aantal slides zo bepalen EN laten zien.
Hieronder kun je dus zien hoe de PNG gezocht wordt. Als ik er vandaag 3 heb en morgen 12, moet ik elke keer toevoegen / verwijderen. Dit is niet heel veel werk, maar op den duur wel irritant.
Nu de vraag (als noob) hoe kan ik vanuit het mapje "fotofolder" (voorbeeld), automatisch het aantal png's toevoegen, verwijderen aan het script.
Ik moet erbij zeggen dat dit script automatisch ververst na 10 min. Dus hij kan elke 10 min nieuwe slides opzoeken.
Ik hoop dat ik het zo een beetje duidelijk heb uitgelegd, zo niet hoor ik het graag.
hieronder nog de Javascript die gebruikt wordt om de slideshow in te stellen.
bvd
Rob
Ik heb een vraagje over HTML / Javascript.
Ik heb een slideshow op een TV draaien. Dit is een pagina in HTML en javascript. Ik zal jullie de hele HTML besparen, maar ik moet bij elke "slide" aangeven welke png hij moet laten zien.
Aangezien deze slideshow veel verandert, wil ik eigenlijk geautomatiseerd de "fotofolder" uitlezen en vanzelf het aantal slides zo bepalen EN laten zien.
Hieronder kun je dus zien hoe de PNG gezocht wordt. Als ik er vandaag 3 heb en morgen 12, moet ik elke keer toevoegen / verwijderen. Dit is niet heel veel werk, maar op den duur wel irritant.
Code:
<div class="slideshow-container">
<div class="mySlides fade">
<img src="fotofolder\slide1.PNG" style="width:100%">
<div class="text"></div>
<span class="dot"></span>
</div>
<div class="mySlides fade">
<img src="fotofolder\slide2.PNG" style="width:100%">
<div class="text"></div>
<span class="dot"></span>
</div>
<div class="mySlides fade">
<img src="fotofolder\slide3.PNG" style="width:100%">
<div class="text"></div>
<span class="dot"></span>
</div>
</div>Nu de vraag (als noob) hoe kan ik vanuit het mapje "fotofolder" (voorbeeld), automatisch het aantal png's toevoegen, verwijderen aan het script.
Ik moet erbij zeggen dat dit script automatisch ververst na 10 min. Dus hij kan elke 10 min nieuwe slides opzoeken.
Ik hoop dat ik het zo een beetje duidelijk heb uitgelegd, zo niet hoor ik het graag.
hieronder nog de Javascript die gebruikt wordt om de slideshow in te stellen.
Code:
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
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";
setTimeout(showSlides, 15000); // Change image every 15 seconds
}bvd
Rob
Laatst bewerkt door een moderator:
