elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Estamos en la red social de Mastodon


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  fullscreeen imagen javascript. Problemas con firefox
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: fullscreeen imagen javascript. Problemas con firefox  (Leído 1,385 veces)
OssoH


Desconectado Desconectado

Mensajes: 911


Ver Perfil
fullscreeen imagen javascript. Problemas con firefox
« en: 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:
<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.!!


« Última modificación: 31 Marzo 2014, 18:42 pm por OssoH » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
javascript funciona en firefox 3.6 y en IE8 no -.-
Desarrollo Web
mark182 0 3,022 Último mensaje 28 Junio 2010, 03:20 am
por mark182
[javascript] herramienta de firefox (Shift+F4)
Scripting
Pirat3net 1 1,957 Último mensaje 28 Octubre 2012, 18:17 pm
por Pirat3net
Problemas javascript
Scripting
tollis 0 1,470 Último mensaje 30 Noviembre 2015, 20:40 pm
por tollis
javascript - Imagen fade in
Desarrollo Web
TickTack 1 1,416 Último mensaje 19 Febrero 2019, 19:45 pm
por srWhiteSkull
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines