Imagen a pantalla completa

por

En este artículo voy a enseñar dos formas de mostrar una imagen a pantalla completa: Con un pop-up y Fullscreen, pros y contras. El código es el siguiente:

<!DOCTYPE>
<html>
<head>
<script>
  function fullPopUp(image) {
    let imgSrc = image.src;
    let imgName = image.src.split("/").pop(); 
    ventana = window.open(imgName, "replace", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=no,resizable=no");
    ventana.document.write('<html><head><title>'+imgName+'</title>');
    ventana.document.write('<style>img {width:100%; height:100%;}</style>');
    ventana.document.write('</head><body><img src='+imgSrc+'/></body></html>');
    ventana.document.close();
  }

  function fullScreen(image) {
    if (document.fullscreenElement) document.exitFullscreen();
    else image.requestFullscreen();
  }  
</script>
</head>

<body>
  <h1>Imagen a pantalla completa</h1>
  <p>Ejemplo de imágenes a pantalla completa</p>
  <h2>Imagen con fullPopUp</h2>
  <p><a href="#"><img onclick="fullPopUp(this)" src="imagen.jpg" alt=""></a></p>
  <br />
  <h2>Imagen con fullScreen</h2>
  <p><a href="#"><img onclick="fullScreen(this)" src="imagen.jpg" alt=""></a></p>
</body>
</html>

En esta sencilla página HTML he colocado la misma imagen en dos enlaces <a> diferentes. Cada enlace tiene su evento onclick que llama a una de las dos funciones: fullPopUp(this) y fullScreen(this). En ambas funciones el parámetro que pasamos es el elemento <img>. Vamos a ver cómo funciona cada una de ellas.

Mostrar imagen con un pop-up HTML

Un pop-up es una nueva ventana del navegador que ofrece la imagen en toda su superficie tal y como puede observarse.

Mostrar imagen a pantalla completa con un pop-up HTML
Mostrar imagen con un pop-up HTML

Esta técnica tiene sus pros y sus contras como pueden ser:

PROS

  • El cliente puede modificar el tamaño de la ventana a gusto
  • Permite tener varias imágenes en varias ventanas a la vez

CONTRAS

  • Algunos usuarios tienen deshabilitados los pop-up
  • Suele considerarse una forma de SPAM publicitario

Imagen a pantalla completa con pop-up

Para crear una nueva ventana y mostrar la imagen ocupando todo el espacio disponible, debemos pasarle a nuestra función el elemento <img> como parámetro. De esta forma obtenemos la URL de la imagen en la variable imgSrc y también obtendremos el nombre de la imagen para el título y nombre de la ventana en la variable imgName.

Ahora simplemente generamos una nueva ventana en el navegador con el código HTML básico para mostrar una sola imagen. Como dato adicional también añadimos los estilos CSS para dar a nuestro único elemento <img> los atributos de ancho y alto al 100%.

<style>
  img {
    width:100%;
    height:100%;
  }
</style>

Y listos, el pop-up mostrará la imagen ocupando toda la ventana.

Mostrar imagen con la API fullScreen de JavaScript

La técnica del fullScreen se utiliza para visualizar un elemento a pantalla completa, como pueden ser videos o imágenes. También tiene sus pros y sus contras, aunque lo podemos resumir en que desaparece el resto de elementos de la pantalla para mostrar únicamente la imagen.

Mostrar imagen a pantalla completa con un FullScreen de JavaScript
Mostrar imagen con Fullscreen

En este caso utilizaremos un atributo CSS que devuelve true/false si ya se está utilizando un elemento en fullScreen. Está claro que sólo puede haber un elemento a pantalla completa al mismo tiempo, así que nuestra función también servirá de interruptor on/off.

Imagen a pantalla completa con fullScreen

En nuestra función preguntamos al atributo fullscreenElement si ya existe un elemento a pantalla completa. Si ya existe lo desactivamos, en caso contrario lo activamos invocando al método requestFullScreen() del elemento <img> de nuestra imagen.

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario