"Weiter"-Button auf Vollbildmodus-Bild anzeigen

Question

Liebes Sosci-Team,

unliebsamerweise entsteht mit der so guten Lösung für die Vollbildmodus-Anzeige folgende Situation:
Der "Weiter"-Button, der nach Ablauf eines Timers in der unteren rechten Ecke auf dem Bild erscheinen sollte, erscheint nicht. Auch nicht der Timer.
Wenn die Seite lädt, kann ich ganz kurz sehen, dass der Button an sich auf der Seite existent ist, allerdings an einer anderen Stelle und er wird dann eben unsichtbar, sobald das Bild erscheint. Die Seite wird im Layout "presenter" dargestellt.
Leider waren meine bisherigen Versuche, es selbst zu beheben, erfolglos. Haben Sie eventuell auch dazu eine Idee?

Answer 1

Es kommt darauf an, wie Sie es mit dem Knopf gerne hätten:

Sie können zum Beispiel das Bild als "Beschriftung" (<label>) für den Knopf definieren. Dann führt ein Klick auf das Bild zum "Weiter".

Sie können auch den Weiter-Knopf selbst "absolute" positionieren und ihm ggf. einen "z-index" geben, dann erscheint er vor dem Bild:

pageCSS('
  #submit0 {
    position: absolute;
    right: 5vw;
    bottom: 3vh;
    z-index: 10;
    padding: 1.6em 3em;
  }
');

Comments

Ich bin begeistert! Auch das hat geklappt. Vielen Dank!
Wenn ich den Timer einfüge, erscheint der Knopf auch tatsächlich erst nach Ablauf der gewünschten Zeit. Allerdings ist der Countdown nicht sichtbar. Ich ahne, dass ich den html-Code für den Countdown auch noch in Ihren gerade genannten Code einfügen muss, dass er VOR dem Bild erscheint. Mir ist leider schleierhaft, an welcher Stelle genau. Könnten Sie mir dafür eventuell einen Hinweis geben?

---

Nun, der Timer hat vermutlich eine HTML-ID - vielleicht können Sie diese noch im CSS-Befehl verwenden. Oder Sie müssen noch ein <div> mit einer ID, also z.B. <div id="countdownOut"> außen herum setzen. Im CSS-Code sieht es dann z.B. so aus:

pageCSS('
  #submit0,
  #countdownOut {
    position: absolute;
    right: 5vw;
    bottom: 80px;
    z-index: 10;
    padding: 1.6em 3em;
  }
  #countdownOut {
    bottom: 100px;
  }
');