fullscreeen imagen javascript. Problemas con firefox

OssoH · 31 Marzo 2014, 18:38 PM

Hola :
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 [Seleccionar]


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

Test Foro de elhacker.net SMF 2.1

fullscreeen imagen javascript. Problemas con firefox

OssoH