Slideshow mit Tastennavigation

[some]

Hallo ihr Lieben,

ich komme gerade bei meinem Projekt nicht weiter.
In meinem Projekt bekomme ich verschiedene Bilder, die schlussendlich über ein Nummernpad zu bedienen ist.
Also bei "8" hoch, bei "6" runter und bei "5" Enter.

Mein Dozent hat jetzt gesagt, dass ich die Bilder in einer XML speichern soll und dann mit JS auslesen.
Ich hatte mir jetzt sowas vorgestellt:

<div class="img-container-1">
<img class="mySlides" src="img1.jpg" style="width:..">
<img class="mySlides" src="img2.jpg" style="width:..%">
<img class="mySlides" src="img3.jpg" style="width:..%">
<img class="mySlides" src="img4.jpg" style="width:..%">
</div>

Das wäre dann beliebig erweiterbar, ich weiß nur nicht wie er das, als Datei in eine XML speichern meint.
Da XML ja doch veraltet ist, würde ich es wohl eher in JSON abspeichern?
Könnt ihr mir da helfen? Ich habe leider weder mit XML, noch mit JSON gearbeitet.

Freundliche Grüße,
some

 

[Tronjer]

Mein Dozent hat jetzt gesagt, dass ich die Bilder in einer XML speichern soll und dann mit JS auslesen.

Dann sollte dein Dozent den eigenen Wissensstand prüfen. XML ist das falsche Format und müsste als JSON geparsed werden, um es im JS Kontext zu verwenden.

Prinzipiell gilt, dass lediglich die reinen Daten gespeichert werden, aber keine HTML-Tags. Insofern bleibt festzulegen, welche Daten du speichern willst und woher die Daten bezogen werden. Handelt es sich lediglich um Bildnamen, reicht ein einfaches Array mit Strings. Sollen neben den Namen noch andere Eigenschaften übergeben werden, benötigst du eine Collection von Objekten mit key und value.

myArr = [
  {name: 'einbild.jpg', category: 'foo'},
  {name: 'nocheinbild.jpg', category: 'bar'}
];

Werden die Daten in derselben Datei wie die dazugehörigen JS-Funktionen gespeichert, reicht eine einfache Variable wie oben. Kommen die Daten aus einer externen Datei, solltest du sie als JSON speichern und per AJAX-Request einlesen.

 

[some]

Hallo Tronjer,
ok dann also JSON.
Wir hatten erst die Idee unterschiedliche Frames zu nutzen.
Frame 1 mit img1 bis img5, Frame 2 mit img6 bis img9.
Sodass die Bilder am Ende beliebig erweiterbar und austauschbar ist.
Die Daten sollen aus einem img-Ordner bezogen, in dem sich alle Bilder befinden.
Danach ist nur der Name wichtig, um ihn mit JS-Funktionen weiter zu bearbeiten.

Man kann sich das wie eine PowerPoint Präsentation vorstellen, wo Bild für Bild ablaufen soll.
Nur, dass wenn ich Taste 4 drücke, soll eben dieses spezielle Bild, für diese Taste erscheinen, usw.

LG

 

[Tronjer]

Wozu Frames?

Ein Key-Event, welches den keyCode abfragt und das source Attribut des Image-Tags updatet. Insofern sollte das JS-Objekt keyCode und Bildnamen enthalten:

{src: 'img1.jpg', key: 52}

 

[some]

Ja, das macht mehr Sinn. Vielen Dank!
Die Frames waren mit der XML-Idee verbunden.

Kannst du mir nochmal erklären, was "category: 'foo' und 'bar'" bedeutet?

Wie findest du die Lösung mit den Slides?
<div class="img-container-1">
<img class="mySlides" src="img1.jpg" style="width:100%">
<img class="mySlides" src="img2.jpg" style="width:100%">
<img class="mySlides" src="img3.jpg" style="width:100%">
<img class="mySlides" src="img4.jpg" style="width:100%">
</div>

Und dann könnte man unterschiedliche Container erstellen.

LG

 

[Aaron3219]

Kurzer Tipp an @some mach das mit der Klasse lieber so.

div.container-1 img {
    width: 100%;
}

dann sparst du dir dieses class="mySlides" in jeder Zeile. Wenn du dann noch width: 100%; hinzufügst, sparst du dir auch noch das style="width: 100%;" in jeder Zeile

 

[Tronjer]

foo und bar sind nur Placeholder für reale Begriffe.

Was ich meinte, war so etwas hier:

<img id="image" src="" alt="">

(function () {
    var imagePath = 'path/to/images/',
      slides = [
        {image: 'awesome-image.jpg', key: '4'},
        {image: 'another-image.jpg', key: '5'}
      ];
    document.addEventListener('keydown', function (event) {
      event.preventDefault();
      slides.forEach(function (slide) {
        if (event.key === slide.key) {
          document.querySelector('#image').setAttribute('src', imagePath + slide.image);
        }
      })
    });
  })();

 

[some]

Kurzer Tipp an @some mach das mit der Klasse lieber so.

div.container-1 img {
    width: 100%;
}

dann sparst du dir dieses class="mySlides" in jeder Zeile. Wenn du dann noch width: 100%; hinzufügst, sparst du dir auch noch das style="width: 100%;" in jeder Zeile

Stimmt, du hast recht. Vielen Dank! :-)

 

[some]

Hallo Tronjer,

ich habe deinen Code angepasst, aber es funktioniert nicht mehr.

  <head>

    <title>Prototyp</title>
    <link rel="stylesheet" href="stylesheet.css">
    <script language="javascript" type="text/javascript" src="function.js"></script>
  </head>

  <body>
 
    <img id="image" src="img/kreuz.jpg" alt="Steuerkreuz">
    <img id="up" src="img/up1.jpg" alt="Up">
    <img id="down" src="img/down1.jpg" alt="Down">
    <img id="right" src="img/right1.jpg" alt="Right">
    <img id="left" src="img/left1.jpg" alt="Left">
    <img id="center" src="img/center1.jpg" alt="Center">

  </body>

(function () {
    var imagePath = 'path/to/images/',
      slides = [
        {image: 'img/left1.jpg', key: '4'},
        {image: 'img/center1.jpg', key: '5'},
        {image: 'img/down1.jpg', key: '2'},
        {image: 'img/right1.jpg', key: '6'}
        {image: 'img/up1.jpg', key: '8'}
      ];
    document.addEventListener('keydown', function (event) {
      event.preventDefault();
      slides.forEach(function (slide) {
        if (event.key === slide.key) {
          document.querySelector('#image').setAttribute('src', imagePath + slide.image);
        }
        else if (event.key === slide.key) {
            document.querySelector('#up').setAttribute('src', imagePath + slide.image);
        }
        else (event.key === slide.key) {
            document.querySelector('#down').setAttribute('src', imagePath + slide.image);
        }
      })
    });
  })();

Wie würde es denn funktionieren, wenn man zweimal nach rechts klicken kann, aktuell wird ja jeder key einmal angesprochen.

LG some

 

[Tronjer]

ich habe deinen Code angepasst, aber es funktioniert nicht mehr.

Die Variable imagePath soll den Pfad zum Bilderordner speichern und ergibt als Stringverknüpfung mit dem Bildnamen das src-Attribut des Image-Tags. Wenn du die Dev-Tools deines Browsers öffnest, wirst du lauter 404 sehen. Außerdem geht das forEach nie über die erste Bedingung hinaus.

Was studierst du eigentlich, Informatik?

 

[some]

Ach Gott, bin ich blöd. Danke, ich versuche es morgen nochmal.
Ich studiere Informationsmanagement und habe in meinem Auslandssemester einen Web Design Kurs gemacht, allerdings war der Kurs nicht in Englisch oder Deutsch. Also habe ich mir alles was ich weiß, über Codecademy angeeignet, aber mir fehlt noch einiges in JS.

Was mache ich denn, wenn ich mehrere Male nach rechts, also "6" drücke. Ich müsste ja jedem Bild eine Taste in einer bestimmten Reihenfolge zuordnen können.

 

[Tronjer]

Du musst die Bedingungen formulieren und anschließend technisch umsetzen.

In obigem Code gibt es ein keydown-Event, gefolgt von preventDefault(), um das folgende keypress abzufangen. Die Abfrage erfolgt nicht über keyCode, charCode oder which, sondern per KeyboardEvent.key. Insofern ist Arrow right keine 6.

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Wenn du eine Aktion für den Fall ausführen willst, dass 2x hintereinander derselbe Key gedrückt wird, müsste der jeweils letzte Key in einer Variablen zwischengespeichert werden.