JMiur [E]

BigScreen es un pequeño script que nos permite mostrar contenido en pantalla completa, algo que los navegadores pueden hacer pero que tiene restricciones cuando se pretende hacerlo con JavaScript y que, por ahora, sólo funciona en Firefox, Chrome y Safari.

El script no hace otra cosa que permitirnos usar un sintaxis única para esto ya que, por ahora, los navegadores usan distintos métodos pero, en todos los casos, siempre estaremos restringidos por las opciones de seguridad de estos y en todos, se mostrará una ventana de advertencia:


Una vez que tenemos agregado el script, usarlo es bastante simple y si bien tiene varios métodos que están explicados en la página del autor, hay dos que son los básicos; el primero, permite mostrar toda la página en modo fullscreen y el segundo, mostrar sólo algún tipo de elemento.

Por ejemplo, si tuvieramos un enlace o botón con cierto ID:
<a id="fspagina" href="#">fullscreen de esta página</a>
Podríamos asociar el evento click de este modo:
document.getElementById('fspagina').addEventListener('click', function() {
  if (BigScreen.enabled) {
    BigScreen.toggle();
  } else {
    alert("este navegador no soporta el método fullscreen");
  }
}, false);
y si usáramos jQuery, algo así:
$(document).on('click', '#fspagina', function(e){
  e.preventDefault();
  if (BigScreen.enabled) {
    BigScreen.toggle();
  } else {
    alert("este navegador no soporta el método fullscreen");
  }
});

Si lo que queremos es mostrar en pantalla completa un elemento, debemos identidifcarlo y usar BigScreen.request():
document.getElementById('fselemento').addEventListener('click', function() {
  var el = document.getElementById('fselemento');
  if (BigScreen.enabled) {
    BigScreen.request(el);
  } else {
    alert("este navegador no soporta el método fullscreen");
  }
}, false);
Con jQuery podría ser más simple si asociamos el evento click a una clase y, de ese modo, podemos mostrar en pantalla completa distintos elementos, por ejemplo, imágenes:
<img class="fullimage" src="URL_imagen1" style="width:200px;"/>
<img class="fullimage" src="URL_imagen2" style="width:200px;"/>

$(document).on('click', ''.fullimage', function(e){
  e.preventDefault();
  if (BigScreen.enabled) {
    BigScreen.request($(this)[0]);
  } else {
    alert("este navegador no soporta el método fullscreen");
  }
});


No sólo pueden mostrarse imágenes sino también videos si se utiliza la nueva etiqueta <video> pero, en todos los casos, debe recordarse que los navegadores no tienen integrado este sistema de manera completa y los errores varían.


REFERENCIAS:HTML5 y fullscreen

13 comentarios:

Wi Wa  

Hola Sr. JMiur, está muy interesante el post, en vez de document.getElementById() podría utilizar document.querySelector(). Saludos :)

Responder
Rosendo Ramírez Aquino  

Si tu te grabaste jugando Mario Bross creo que eres demasiado bueno jaaja :P

Responder
OPin  

Sería interesante que se pudiera utilizar la rueda del mouse o las teclas para bajar y subir sobre la pantalla, de lo contrario es imposible leer el contenido completo de una página.
Útil para fotos o videos pero nada más.
Gracias por todo tu esfuerzo.
Un abrazo.

Responder
Beben Koben  

i'm a moziller user :D
how about it...press F11 ;)

This is great snippet coded master, yeah \m/

Responder
SergioFM  

Bueno, como dice Beben Koben es casi similar a presionar F11 a diferencia que al poner el sitio en fullscreen me bloquea la barra de desplazamiento o como se llame ... evitándome desplazarme hacia abajo.

Responder
Conexión Humor  

Sabes que tiene sentido, pero a mi no me esta funcionando el script ¿que puedo estar haciendo mal? ¿Donde debo colocarlo y bajo que etiquetas?

JMiur  

Si estás usando jQuery 1.9 cambia:

$('#fspagina').live('click', function(e) {
por:
$(document).on('click', '#fspagina', function(e){

y:
$('.fullimage').live('click', function(e) {
por:
$(document).on('click', ''.fullimage', function(e){

Responder
ALEXIS melendez  

hol mira enviame un codigo completo pero para colocar mi pagina en pantalla completa

JMiur  

El código está en la entrada.

Responder
Yamali Maradiaga  

Disculpe la molestia, pero realmente no entiendo por que no me funciona, cree me puede ayudar

JMiur  

No puedo reponder eso sin conocer el problema o el ejemplo.

Yamali Maradiaga  

lo siento pensé que había puesto el código.
le quite los <>, para poder publicar el codigo.
Yo se que es igual al suyo, pero el problema es que clic en fullscreen, la pantalla no se hace full.

.......................................................

HEAD

SCRIPT

document.getElementById('fspagina').addEventListener('click', function() {

BigScreen.toggle();


/script



/HEAD

BODY

a id="fspagina" href=" ">fullscreen/a


/body
/html

JMiur  

Respondo l omismo: sin ver el ejemplo, es imposible saberlo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR