✔ EventListener im fullscreen verwenden

[ByeBye 249712]

Hi,
Ich habe eine Slideshow aus Bildern erstellt. Hiervon lassen sich einzelne Bilder im Vollbildmodus darstellen.
In Javascript verwende ich einen EventListener, welcher auf das Drücken der escape-Taste reagiert.
Mein Ziel ist es, wenn der User die escape-Taste drückt, welche ihn vom Vollbildmodus auf die Webseite zurückkehren lässt, das im Vollbilmodus gezeigte Bild umgehend auf display = 'none' zu setzen, so dass es nach dem zurückkehren auf die Webseite nicht mehr zu sehen ist. Momentan ist es so, dass ich nach dem Zurückkehren aus dem Fullscreen die escape-Taste noch einmal drücken muss, und erst dann ist das Bild verschwunden. Gibt es eine Möglichkeit den EventListener auch im Volbildmodus zu verwenden?
Ich hoffe dass war einigermaßen verständlich
Hier der Javascript Code:

window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
    if (e.keyCode == "27") {

          document.getElementById('Bild1').style.display = 'none';   
    }
}

 

[Sempervivum]

Wie hast Du denn den Vollbildmodus realisiert? Möglicher Weise fängt das betr. Skript den Tastendruck ab, so dass er, solange der Vollbildmodus aktiv ist, nicht an deinen Eventlistener gelangt. Hast Du die Slideshow online? Dann poste doch mal die URL, damit man es sich ansehen kann.

 

[SpiceLab]

Wie hast Du denn den Vollbildmodus realisiert?

Vollbildmodus? Da war doch erst gestern die Rede von

https://www.tutorials.de/threads/javascript-style-vom-stylesheet-geht-verloren.401502/

 

[Sempervivum]

Genau! Ich bin nur nicht daraus schlau geworden, wie der TO diesen realisiert.

 

[SpiceLab]

Genau! Ich bin nur nicht daraus schlau geworden, wie der TO diesen realisiert.

[...]

Hier der Code:

[...]

function switchtofullscreen(){

document.getElementById('picturefullscreen').style.display = 'block';
var element = document.getElementById('picturefullscreen');

if(element.requestFullscreen) {
    element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
}
}

https://developer.mozilla.org/de/docs/Web/API/Element/requestFullscreen
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

EDIT

@celtx In dem Beispiel https://developer.mozilla.org/samples/domref/fullscreen.html des zweitgenannten Links, das RETURN / ENTER zum Starten und ESC zum Beenden des Vollbildmodus nutzt, lautet der JS-Code wie folgt:

var videoElement = document.getElementById("myvideo");

function toggleFullScreen() {
  if (!document.mozFullScreen && !document.webkitFullScreen) {
   if (videoElement.mozRequestFullScreen) {
    videoElement.mozRequestFullScreen();
   } else {
    videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
   }
  } else {
   if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
   } else {
    document.webkitCancelFullScreen();
    }
  }
}

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
   toggleFullScreen();
  }
}, false);

 

[Sempervivum]

Ach so, das ist in Javascript enthalten. Danke für den Hinweis. Ich dachte, der TO verwendet irgend ein Plugin.

 

[SpiceLab]

Gern geschehen @Sempervivum

 

[Sempervivum]

Möglicher Weise hilft dem TO dann dieses:
http://stackoverflow.com/questions/10706070/how-to-detect-when-a-page-exits-fullscreen

 

[SpiceLab]

Möglicher Weise hilft dem TO dann dieses:
http://stackoverflow.com/questions/10706070/how-to-detect-when-a-page-exits-fullscreen

Die Antwort verweist auf meinen zweitgenannten Link

 

[ByeBye 249712]

okei, erstmal Danke für die Posts

Also zunächst ist meine Slideshow nicht online, desshalb kann ich dazu leider keinen Link schicken.

Also hier nochmal mein Code zur Realisierung des Vollbildes @SpiceLab Ja richtig, der von Gestern
(Dachte nen neuer thread wäre sinnvoll)

function switchtofullscreen(){

document.getElementById('picturefullscreen').style.display = 'block';  
var element = document.getElementById('picturefullscreen');

if(element.requestFullscreen) {
    element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
}
}

Hier nochmal mein eventListener:

window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
    if (e.keyCode == "27") {
          document.getElementById('picturefullscreen').style.display = 'none'; 
    }
}

Hab jetzt mal so ein bisschen herumprobiert. Aber irgendwie bringt mich nichts wirklich weiter.

Habe aus Spicelabs post mal das hier eingefügt:

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 27) {
  document.getElementById('picturefullscreen').style.display = 'none'; 
  }
}, false);

Das Problem bleibt das Geliche.
Sobald ich aus dem Fullscreenmodus zurückkehre zum Browser, ist "picturefullscreen" nach wie vor
auf meiner Webseite zu sehen. Also dass große Bild, welches ich nur im Fullscreen haben möchte,
und danach wieder weg sein soll, ist immer noch da. Erst wenn ich escape erneut drücke ist es weg.