Agregar fullscreen a distintos elementos

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");
  }
});

fullscreen de esta página

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