Tengo un problema con el siguiente codigo. Quiero capturar el evento cuando pulse la tecla ESCAPE. Es decir, por ejemplo una vez haya hecho clic en el botón ZOOM y vea la imagen a pantalla completa, a continuación haga clic en ESCAPE y además de quitar el modo zoom (que esto lo hace automáticamente) haga algunas acciones como por ejemplo un alert o en mi caso ocultar una capa 'image_zoom'.
En otros navegadores como chrome o en los tablets de sansumg funciona pero en firefox no hay forma.
Si sirve de algo el codigo lo he sacado de http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
Código:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js "></script>
<!DOCTYPE html>
<html>
<head>
<title>FullScreen API</title>
<style>
body {
background: #F3F5FA;
}
#container {
width: 600px;
padding: 30px;
background: #F8F8F8;
border: solid 1px #ccc;
color: #111;
margin: 20px auto;
border-radius: 3px;
}
#fullscreen {
background: #33e;
padding: 0px; /* 20px; */
margin: 0px; /* 20px */
color: #fff;
text-align:center;
}
#fullscreen a {
color: #eee;
}
#fsstatus {
background: #e33;
color: #111;
}
#fsstatus.fullScreenSupported {
background: #3e3;
}
</style>
</head>
<body>
<div id="container">
<h1>FullScreen API</h1>
<div id="fullscreen">
<img style="display:none" id="image_zoom" src="http://www.ibsalut.es/ibsalut/cache/jw_sigpro/jwsigpro_cache_3191e25147_grfic-webibs.jpg" height="auto" width="auto" />
</div>
<p>Estado: <span id="fsstatus"></span></p>
<input id="zoom_url_completa_oculta" style="display:none" value="http://www.ibsalut.es/ibsalut/images/stories/ciudadania/grfic-webibs.png">
<input type="button" value="Zoom" id="fsbutton" />
</div>
<script>
/*
Native FullScreen javascript API
-------------
Assumes Mozilla naming conventions instead of W3C for now
*/
(function() {
var
fullScreenApi = {
supportsFullScreen: false,
isFullScreen: function() { return false; },
requestFullScreen: function() {},
cancelFullScreen: function() {},
fullScreenEventName: '',
prefix: ''
},
browserPrefixes = 'webkit moz o ms khtml'.split(' ');
// check for native support
if (typeof document.cancelFullScreen != 'undefined') {
fullScreenApi.supportsFullScreen = true;
} else {
// check for fullscreen support by vendor prefix
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
fullScreenApi.prefix = browserPrefixes[i];
if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
fullScreenApi.supportsFullScreen = true;
break;
}
}
}
// update methods to do something useful
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
fullScreenApi.isFullScreen = function() {
switch (this.prefix) {
case '':
return document.fullScreen;
case 'webkit':
return document.webkitIsFullScreen;
default:
return document[this.prefix + 'FullScreen'];
}
}
fullScreenApi.requestFullScreen = function(el) {
return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
}
fullScreenApi.cancelFullScreen = function(el) {
return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
}
}
// jQuery plugin
if (typeof jQuery != 'undefined') {
jQuery.fn.requestFullScreen = function() {
return this.each(function() {
var el = jQuery(this);
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.requestFullScreen(el);
}
});
};
}
// export api
window.fullScreenApi = fullScreenApi;
})();
</script>
<script>
// do something interesting with fullscreen support
var fsButton = document.getElementById('fsbutton'),
fsElement = document.getElementById('fullscreen'),
fsStatus = document.getElementById('fsstatus');
if (window.fullScreenApi.supportsFullScreen) {
fsStatus.innerHTML = 'SI: Tu navegador soporta FullScreen';
fsStatus.className = 'fullScreenSupported';
// handle button click
fsButton.addEventListener('click', function() {
// alert(isFullScreen);
window.fullScreenApi.requestFullScreen(fsElement);
// window.fullScreenApi.cancelFullScreen(fsElement);
// Recuperar la url de la imagen grande a traves de un campo input
var url_imagen = document.getElementById('zoom_url_completa_oculta').value;
// Escalar para que ocupe toda la pantalla
var img = document.getElementById('image_zoom');
img.style.display = 'inline';
img.src = url_imagen;
imageWidth = img.width, //need the raw width due to a jquery bug that affects chrome
imageHeight = img.height, //need the raw height due to a jquery bug that affects chrome
maxWidth = screen.width,
maxHeight = screen.height,
widthRatio = maxWidth / imageWidth,
heightRatio = maxHeight / imageHeight;
var ratio = widthRatio; //default to the width ratio until proven wrong
if (widthRatio * imageHeight > maxHeight) {
ratio = heightRatio;
}
img.width = imageWidth * ratio;
img.height = imageHeight * ratio;
}, false);
// Esto lo que pasa es que no va para firefox pero si para tablet
fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
if (fullScreenApi.isFullScreen()) {
// En el tablet sansumg cuando entro en modo pantalla completa ejecuta esto
fsStatus.innerHTML = 'Whoa, you went fullscreen';
} else {
// En el tablet sansumg cuando cierro el modo pantalla completo si ejecuta esta opción. En firefox PC NO
var img = document.getElementById('image_zoom');
img.style.display = 'none';
fsStatus.innerHTML = 'Back to normal';
}
}, true);
} else {
fsStatus.innerHTML = 'LO SIENTO: Tu navegador no soporta FullScreen';
}
</script>
</body>
</html>
Alguien sabe como conseguirlo?
mil gracias.!!