Hi Stef. Danke. Das hab ich zusammenbauen können in 1 HtmlDatei, habe SlideIntro umbenannt in FotoShow,
mit Ergänzung einer ZusatzZeile vorne/ oben im Header konnte ich die Bilder zoomen auf komplette Höhe.
Ist tatsächlich mittig. Ich finds viel versprechend dass die zu ladenden Dokumente im Html in einer Liste untereinander sind, statt im Script verbaut.
Man kann das so modulieren dass es auch HtmlSeiten lädt statt nur Bilder, also zB. Bilder mit (vom Browser automatisch übersetzbaren) Texten,
mit <iFrame class="FotoShow" src="Service.html"></iFrame>.
Ist praktisch um Folien bestehend aus Html, mit Bildern und Text, in Browser zu laden, der automatisches Übersetzen kann.
Aber Fehler tritt auf_
- Bilder wechseln nicht mehr von allein.
Frage, Wie kann ich dein Script kombinieren mit einem weiteren Script wo die automatische BidlerShow funktioniert (aber Bilder leider nicht mittig sind)? Jetzt mal mein aus deinen Zeilen kombiniertes Script +darunter andere Version wo Bilder Bildschirm richtig bedecken und FotoShow funktioniert aber Bilder nicht mittig sind, sondern links bündig.
Dein (in 1 Dokument zusammengesetztes) Ergebnis_
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome!</title>
<style>
*{margin:0px; padding:0px;height: 100%;top:0px;left:0px;right:0px;bottom:0px; }
</style>
</head>
<body style="
margin:0px;
padding:0px;
border:none;
outline: none;
height: 100%;
background-color:rgba(16,32,128,0.1);
overflow: hidden;
">
<div class="SlideBox" style="
margin-left: auto;
margin-right: auto;
box-sizing: inherit;
position: relative;
">
<style>
.FotoShow {
width: 100%;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
object-fit: cover;
display: block;
background-size: cover;
}
</style>
<img class="FotoShow" src="test(1).jpg">
<img class="FotoShow" src="test(2).jpg">
<img class="FotoShow" src="test(3).jpg">
<iFrame class="FotoShow" src="Service.html"></iFrame>
<script>
window.onload = function(){
var slideIntro = document.getElementsByClassName("FotoShow");
var myIndex = 2;
for(var a = 0; a < slideIntro.length; a++){
if(a > 0){
slideIntro[a].style.display = "none";
}
slideIntro[a].addEventListener("click", carousel);
}
function carousel() {
var i;
var slideIntro = document.getElementsByClassName("FotoShow");
for (i = 0; i < slideIntro.length; i++) {
slideIntro[i].style.display = "none";
}
if (myIndex > slideIntro.length){
myIndex = 1;
}
slideIntro[myIndex - 1].style.display = "block";
myIndex++;
}
}
</script>
</div>
</body>
</html>
Alles anzeigen
Und hier mein Dokument wo alles klappt außer mittige Bilder_
<!DOCTYPE html>
<html><head>
<title>Welcome!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{margin:0px; padding:0px;height: 100%;top:0px;left:0px;right:0px;bottom:0px; }
</style>
</head>
<body lang="DE" style="
margin:0px; padding:0px; border:none; outline: none;
background-color:rgba(16,32,128,0.1);
overflow: hidden;
.SlideBox {height:100%; width:100%; vertical-align: middle; background-color:rgba(16,32,128,0.1); background-repeat:no-repeat;}
.img {object-fit: cover;background-size: cover;display: block; margin:0 auto; margin-left: auto; margin-right: auto;}
">
<div class="SlideBox">
</div>
<script>
var myIndex = 0;
var timer;
carousel();
timer=setInterval(carousel, 8000);
var bod=document.getElementsByTagName('body')[0];
bod.addEventListener('mousedown',function(){
clearInterval(timer);
carousel();
})
bod.addEventListener('mouseup',function(){
timer=setInterval(carousel, 5000);
})
function carousel() {
var x=['test(1).jpg','test(2).jpg','test(3).jpg'];
myIndex++;
if (myIndex > x.length) {myIndex = 1}
var box=document.getElementsByClassName("SlideBox")[0];
box.style.background='url('+x[myIndex-1]+')';
box.style.backgroundSize='cover';
}
</script>
</body>
</html
Alles anzeigen
Vielleicht findet jemand 1e Lösung, Bilder kompletter Bildschirm +mittig +automatische Show +auf 1 Klick sofort weiter?
Arbeite daran seit 3 Wochen.
Danke.
