HTML - Visualizar una imagen previa con un botón

 
Vista:
sin imagen de perfil
Val: 5
Ha disminuido su posición en 22 puestos en HTML (en relación al último mes)
Gráfica de HTML

Visualizar una imagen previa con un botón

Publicado por Rebeca (3 intervenciones) el 31/05/2018 21:56:24
Hola, soy nueva en programación, sé un poco de HTML, bootstrap y css, estoy desarrollando un sitio que (anteriormente realicé en Adobe Muse, pero el programa se quedó corto respecto a las funciones que requería.

Entonces comencé por programarlo en HTML con Bootstrap. Pero hasta este momento me encuentro atorada en un problema.

Quiero crear un botón que cuando yo le dé clic, pueda visualizar una o varias imagenes como en un lightbox. Hasta ahora, he probado muchas soluciones pero al momento de correrlas no funcionan como lo deseo, les dejo unas imágenes de como lo hice funcionar en Muse (por cierto, ya intenté copiar el código de Muse, pero el mismo está muy complicado e incluye muchas funciones que no necesito y no sé identificar hasta donde es el código de la función).

Cuando yo doy clic en el botón "Ver" aparece una caja "Lightbox" con la imagen que quiero que vean.


Imagen1
Imagen2
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Visualizar una imagen previa con un botón

Publicado por Lopez (271 intervenciones) el 01/06/2018 02:57:32
Hola Rebeca,

Bienvenida a LWP.
Yendo directo al grano, lo que buscas es una especie de "hint", llamado en Bootstrap : Popover .
Cabe destacar esta funcionalidad requiere de popper.js.
Mira el siguiente ejemplo: https://codepen.io/lowpez/pen/pKJaKp.
Esperamos se ajuste a tu expectativa.

HTML
1
<a href="#"  data-toggle="popover" data-img="http://placehold.it/400x200" title="Popover Header" >Toggle popover</a>

JS
1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
	 $('[data-toggle="popover"]').popover({
		  trigger: 'hover', //click,focus etc
          html: true,
          content: function () {
				return '<img class="img-fluid" src="'+$(this).data('img') + '" />';
          },
          title: 'Toolbox'
    })
});

Quedamos atentos a tu respuesta,
Saludos!

W3 Lectura recomendada : https://www.w3schools.com/bootstrap4/bootstrap_popover.asp
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
3
Comentar
Imágen de perfil de Pedro
Val: 277
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Visualizar una imagen previa con un botón

Publicado por Pedro (74 intervenciones) el 01/06/2018 09:06:14
Excelente....! +1 me guardo placeholder.it ----->bookmarks
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 5
Ha disminuido su posición en 22 puestos en HTML (en relación al último mes)
Gráfica de HTML

Visualizar una imagen previa con un botón

Publicado por Rebeca (3 intervenciones) el 01/06/2018 14:53:52
¡Mil gracias! Tengo vagos conocimientos en Js y esto me sirve muchísimo, ¡lo pruebo más tarde!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar