HTML - Mostrar imagen en pantalla completa

Mostrar imagen en pantalla completa

Publicado por Mauricio (4 intervenciones) el 13/04/2022 20:20:34

Buenas amigos.

Hoy vengo a ustedes para que me colaboren con algo que no logro hacer.

Estoy usando el siguiente codigo para mostrar una imagen en pantalla completa al hacer clic sin exito.

<a href="Imagen.png" title="Texto que se ve al parar el cursor sobre la frase" target="popup" onclick="Imagen.png','name','width=1600,height=1400')">Texto al cual se le dara clic.</a>

Hay una forma de hacer que al dar clic en el texto muestre la imagen en pantalla completa ¿?

Agradecido de antemano por la ayuda que me puedan brindar.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Mostrar imagen en pantalla completa

Publicado por Ivan (57 intervenciones) el 14/04/2022 22:25:21

Hola,

si usas una imagen como destino del enlace href="Imagen.png" el navegador mostrará la imagen original tal cual y pierdes el control sobre cómo se muestra.

Para mantener el control deberías mostrarla dentro de la ventana actual o mostrarla en una nueva ventana creada dinámicamente y añadiendo estilos.

También hay más opciones como mostrarla en un div centrado, etc.
Yo te pongo un par de ejemplos mostrando la imagen y mostrando texto en el enlace:

<!DOCTYPE>

<html>

<head>

<style>

  a.zoom img {width: 10%;}

  a.zoom img:hover {width: 100%;}

</style>

<script>

// Muestra una pagina HTML en un popUp a pantalla completa

function fullPopUp($html){

  $w = (screen.width) ? (screen.width)/2 : 750;

  $h = (screen.height) ? (screen.height)/1.6 : 800;

  LeftPosition = (screen.width) ? (screen.width-$w)/2 : 0;

  TopPosition = (screen.height) ? (screen.height-$h)/2 : 0;

  ventana = window.open($html, "replace", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=yes,resizable=no");

  ventana.document.write('<html><head><title>ZOOM</title>');

  ventana.document.write('<style>img {width:100%}</style>');

  ventana.document.write('</head><body>');

  ventana.document.write('<img src='+$html+'/>');

  ventana.document.write('</body></html>');

  ventana.document.close();

</script>

</head>

<body>

  <h1>Zoom a imagen</h1>

  <p>Ejemplo de enlace mostrando imagen y zoom on Hover con css</p>

  <a class="zoom" href="imagen.jpg"><img src="imagen.jpg" alt=""></a>

  <p>Ejemplo de enlace de texto y imagen mostrada en ventana nueva con javascript</p>

  <a onclick="fullPopUp('imagen.jpg')" href="#">Texto del enlace</a>

</body>

</html>

Espero que te sirva,

Un saludo!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Mostrar imagen en pantalla completa

Publicado por Mauricio (4 intervenciones) el 26/04/2022 16:01:09

Antes que nada, pido disculpas por la larga demora en responder, he tenido muchos problemas con el internet los cuales me han impedido ingresar.

Por otro lado Ivan, Muchísimas gracias por responder, me ha gustado tu propuesta.

Te comento, la miniatura al pasar el mouse se agranda bien, lógicamente dentro de la misma ventana.

Pero me inclino por la segunda opción, pero esta al abrir la nueva ventana no la abre en pantalla completa.

Me pregunto si hay alguna forma de hacer que esta se abra en pantalla completa, sin barra de direcciones, sin titulo, y sin los otros etcéteras, que solo se vea la imagen dentro del marco de la ventana, lo he visto, pero no tengo idea de como hacerlo.

De antemano agradecido por la ayuda que me puedan brindar

Valora esta respuesta

Comentar

Mostrar imagen en pantalla completa

Publicado por Ivan (57 intervenciones) el 26/04/2022 18:46:37

Hola,

las barras de scroll aparecen para mantener la proporción de la imagen, se establece su ancho máximo como la pantalla pero si proporcionalmente es más alta que la pantalla aparece la barra de scroll. El scroll lo puedes eliminar añadiendo estilos CSS, sustituye el ejemplo anterior con esta linea:

ventana.document.write('<style>body {overflow: hidden}img {width:100%}</style>');

Pero creo que la barra de dirección superior no se puede quitar.

Un saludo!

Valora esta respuesta

Comentar

Mostrar imagen en pantalla completa

Publicado por Mauricio (4 intervenciones) el 26/04/2022 20:15:28

Nuevamente gracias por responder y por tu tiempo.

Con pena he de decir que no tengo idea cual es el la linea que he de sustituir por el nuevo código, estuve trasteando, pero sin éxito

Por favor, podrías indicarme cual es la linea a reemplazar.

Agradecido nuevamente

Valora esta respuesta

Comentar

Mostrar imagen en pantalla completa

Publicado por Ivan (57 intervenciones) el 27/04/2022 10:26:52

Hola,

claro, ningún problema. En la página donde he puesto el código completo HTML debes cambiar la linea:

ventana.document.write('<style>img {width:100%}</style>');

Por la linea:

ventana.document.write('<style>body {overflow: hidden}img {width:100%}</style>');

Con esto desaparecen las barras de scroll, pero ten en cuenta que entonces la imagen se mostrará cortada en altura si supera el alto disponible en la página.

Un saludo!

Valora esta respuesta

Comentar

Mostrar imagen en pantalla completa

Publicado por Mauricio (4 intervenciones) el 27/04/2022 15:52:30

Gracias mil por responder y apoyarme Ivan.

Te cuento, ayer (antes de pedir nuevamente tu colaboración) intuitivamente cambie esa misma linea, pero no mostraba la imagen en pantalla completa, así que probé otros cambios sin éxito.

Te muestro la captura de pantalla para que puedas apreciar lo que ocurre

Cual podrá ser el error que estoy cometiendo ?

Agradecido nuevamente por la ayuda que me brindan

Valora esta respuesta

Comentar

Mostrar imagen en pantalla completa

Publicado por Ivan (57 intervenciones) el 27/04/2022 22:49:36

Hola,

vale ya entiendo, el tema es que tu quieres que la imagen ocupe toda la pantalla sí o sí, independientemente de su tamaño.
Lo entendía mal, yo pensaba que querías mantener sus proporciones, lo siento.

Entonces simplemente cambia esa "famosa" linea de código por esta:

ventana.document.write('<style>img {width:100%; height:100%;}</style>');

Ahora siempre ocupará el 100% de ancho y alto sin scrolls.

Un saludo!

Valora esta respuesta

Comentar

Pos: 4

Val: 359

Mostrar imagen en pantalla completa

Publicado por ScriptShow (409 intervenciones) el 14/07/2022 10:32:18

Saludos, tú decides.

Pantalla completa y popup, no es lo mismo. Fullscreen sin barras, requiere un script concreto, específico...

https://www.lawebdelprogramador.com/codigo/JavaScript/7191-Fullscreen-JS-Simple.html

Lanzar una imagen que ocupe toda la pantalla guardando las proporciones, es otro asunto a tratar.

Por último, ampliar una imagen que se ajuste al tamaño del navegador y/o dispositivo, sin perder parte/s de la imagen, también precisa un código para ello...

https://www.lawebdelprogramador.com/codigo/JavaScript/3992-Foto-Fade-Zoom-OnClick-Responsive.html

P.D.: Todos los Scripts son adaptables, compatibles, etc.

Espero sea útil.

Valora esta respuesta

Comentar

Problema para alinear un formulario

¿Cómo hago para proteger un enlace con una contraseña?