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