Slider soll zusätzlich per Klick nächste Folie laden. Script

Lemke

Hi. Habe ein Script, das kann Grafiken nacheinander laden.
Grafiken werden noch nicht ohne Verzerrung auf vollen Bildschirm 16:9 und 9:16 -geladen, ...ist also noch nicht perfekt.
Aber funktioniert schon mal soweit, dass Bilder laden nacheinander, und man kann ZeitIntervall einstellen.

Wie kann man das so modifizieren, dass man nächstes Bild/ Folie per Klick sofort laden kann?

Danke!

Hier das Script (ab Zeile 26)_

HTML

<!DOCTYPE html>
<html>
<title>Welcome!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<body lang="DE" style="
    margin:0px; padding:0px; border:none; outline: none;
    height: 100%;top:0px;left:0px;right:0px;bottom:0px; 
    background-color:rgba(16,32,128,0.1);
    overflow: hidden;
    .SlideBox {margin-left: auto; margin-right: auto; box-sizing: inherit; position: relative;}
    .SlideIntro {margin: 0px;min-width: 100%; height:100%;margin-left: auto; margin-right: auto; vertical-align: middle; object-fit: cover; background-size: cover;} 

">

<div class="SlideBox">
    <img class="SlideIntro" src="Klima.jpg">
    <img class="SlideIntro" src="SwimPool.png">
    <img class="SlideIntro" src="Solar.jpg">
    <img class="SlideIntro" src="HausGarten.jpg">
    <img class="SlideIntro" src="SaunaWellness.jpg">
    <img class="SlideIntro" src="Karte.png">
</div>


<script>
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("SlideIntro");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 7000); // Change image every 7 seconds
}
</script>

</body>
</html>

Alles anzeigen

So siehts im Moment auf dem Bildschirm aus_

html-seminar.de/woltlab/attachment/2189/

basti1012

Du willst das du den Interval unterbrechen tust und dann mit einen Button weiterspringen tust ?

Auch das habe ich mal gerade in den anderen Code mit eingebaut.

Als erstes fliegt der setTimeout aus der Function raus.

Dafür wird außerhalb der Function ein setInterval gesetzt.

Dann habe ich bei Mousedown clearInterval gesetzt und die Function aufgerufen ,die dann ein Bild weiter geht.

Bei Mouseup startet wieder ein setInterval.

Ich würde dir das ja zeigen , doch da ist die Css schon richtig eingebaut.

Ich möchte erst das du das Googelst wie man die Css richtig einbaut.

Wenn du das problem hinbekommen hast kann ich dir hier auch weiterhelfen , doch mit der kaputten Css ist das noch nicht gut.

Lemke

Teil dein Vorschlag! Hier. Alles fertig. Dann kann ich dein CssVorschlag testen, klappt oder nicht. So einfach, wenns gut ist kann ich mir überlegen was ich davon nutzen will.

Aber halt mir keine Vorträge über SinnFragen des Lebens. Css KANN! man so einbauen wie folgt, das ist bewährt und klappt ansonsten mit anderen Funktionen in allen von mir genutzten Browsern tadellos. Ich will nur dass die Bilder sollen auf VollBildschirm zoomen, was noch nicht funktioniert hatte, es wird entweder verzerrt oder die Bilder haben Streifen an Fenstern daneben oder darunter.

Code

<img style="
    object-fit: cover;
    background-size: cover;
    " 
src="TestBild.jpg">

Lemke

Hier ist Thema Script. Css ist extra Baustelle.

Stef

Hey,

Code

<body lang="DE" style="
    margin:0px; padding:0px; border:none; outline: none;
    height: 100%;top:0px;left:0px;right:0px;bottom:0px; 
    background-color:rgba(16,32,128,0.1);
    overflow: hidden;
    .SlideBox {margin-left: auto; margin-right: auto; box-sizing: inherit; position: relative;}
    .SlideIntro {margin: 0px;min-width: 100%; height:100%;margin-left: auto; margin-right: auto; vertical-align: middle; object-fit: cover; background-size: cover;} 
">

So ein CSS habe ich noch nie gesehen.

Es gibt verschiedene Möglichkeiten CSS einzubauen - inline, im Headbereich oder als ausgelagerte Datei.
Stell dir vor, du musst diese Webseite irgendwann warten, bzw. das Design verändern. Was ist da wohl komfortabler und einfacher?

Zu deiner Frage zurückkommend wie man via click den nächsten Slide laden kann:

Dies ist eigentlich ganz einfach. Du entfernst deine setTimeout() Funktion. Nun erstellst du 2 Buttons ( wenn es in beide Richtungen gehen soll). Diese platzierst du dann dementsprechend rechts & links und gibst diesen eindeutige Ids. Nun initialisiert du auf diesen eine Funktion in der der nächste Slide dann geladen wird.

Oder wenn du möchtest, dass nur das nächste Bild geladet werden soll kannst du das Click Event auch auf dem Bild intialisieren.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Welcome!</title>
    <link rel="stylesheet" href="css/slider.css">
    <script src="js/slider.js"></script>
  </head>
  <body>
    <div class="SlideBox">
      <img class="SlideIntro" src="test(1).jpg">
      <img class="SlideIntro" src="test(2).jpg">
      <img class="SlideIntro" src="test(3).jpg">
    </div>
  </body>
</html>

Alles anzeigen

JavaScript

window.onload = function(){
        var slideIntro = document.getElementsByClassName("SlideIntro");
        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("SlideIntro");

          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++;
        }

   
      }

Alles anzeigen

CSS

body{
        margin:0px; 
        padding:0px; 
        border:none; 
        outline: none;
        height: 100%;
        background-color:rgba(16,32,128,0.1);
        overflow: hidden;
      } 
   
      .SlideBox{
        margin-left: auto; 
        margin-right: auto; 
        box-sizing: inherit; 
        position: relative;
      }

      .SlideIntro {
        margin: 0px;
        width: 20em;
        margin-left: auto; 
        margin-right: auto; 
        vertical-align: middle; 
        object-fit: cover; 
        display: block;
        background-size: cover;
      }

Alles anzeigen

Grüße,

Stef

Lemke

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_

HTML

<!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_

HTML

<!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.

Lemke

Einfacher find ichs wenn alles an seinem Platz ist. Body bei Body in Line, Divs Namens Xyz bei Div als Style, mehrere Links namens Abcdefg als <script>.Abcdefg{...}</script>. Also alles dort wo die entsprechende Funktion zuerst auftritt. Wer das auch immer erfunden hat Dinge zu verteilen auf verschiedene Dokumente -! Warum auch immer, muss da nicht mitmachen nur weils andere machen. Aber finds praktischer alles in 1. Sonst kopierst du 1 Dokument und willst anfangen zu arbeiten und merkst es gibt weiteres Material in ausgelagerter CssDatei und wenn du pech hast und mehrere funktionale Elemente editierst sinds dafür noch mehr.

Genau das suchen müssen hasse ich an WordPress,
und hab mich entschieden die Seite komplett neu zu bauen.

//Stell dir vor, du musst diese Webseite irgendwann warten, bzw. das Design verändern. Was ist da wohl komfortabler und einfacher?

Jetzt mitmachen!