Apoyándonos en las capacidades del API Fullscreen podemos poner un imagen a pantalla completa con HTML5. La idea es que cuando tengamos una imagen en nuestro documento cargado, le demos al usuario la capacidad de poderla visualizar a pantalla completa.
Esto nos será útil si estamos creando, por ejemplo, una galería de imágenes. El usuario puede ir viendo las imágenes en pequeño para navegar por ellas, pero cuando quiera ver una en detalle podemos presentarla en pantalla completa.
Lo primero que tenemos que hacer para poder poner una imagen a pantalla completa con HTML5 es crear la propia imagen. Para ello utilizamos el elemento img de HTML.
<img src="imagen.png" id="miimagen" alt="Imagen de Ejemplo"/>
Es importante que le des un identificador mediante el atributo id a la imagen. Ya que este será el atributo que utilicemos en el código Javascript.
Para poder poner el elemento en pantalla completa nos vamos a apoyar en el método .requestFullscreen(). Este método tiene diferentes implementaciones en los navegadores y sus respectivos hacks. Así que vamos a codificar una función que tenga un soporte multi-navegador de la siguiente forma:
function getFullscreen(element){
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
Es importante saber que la función .requestFullscreen() nos devuelve una promesa, con la que sabremos si se ha podido cargar la pantalla completa o ha fallado.
Esta función recibe como parámetro un elemento. La forma de pasarle el elemento que ponemos a pantalla completa es pasarle una referencia al elemento imagen de la pantalla. Para conseguir esto utilizamos el método .getElementById() accediendo al id de la imagen de nuestro documento.
getFullscreen(document.getElementById("miimagen"));
Lo que nos queda para poner la guinda al pastel es montar la activación de la imagen a pantalla completa con HTML5 cuando el usuario haga un «doble click» sobre la imagen. Para poder hacer esto lo que haremos será crear un manejador de eventos con .addEventListener() sobre la imagen que capture el evento 'dblclick'.
var imagen = document.getElementById("miimagen");
imagen.addEventListener("dblclick", function(e){
getFullscreen(this);
},false);
Ahora solo queda aplicarlo a todas las imágenes que tenga nuestra galería de imágenes. Pero eso ya os lo dejamos a vosotros. ;-)
