¿Cómo puedo hacer que una miniatura <img> muestre una imagen de tamaño completo al hacer clic?

Normalmente tiene una taje imagen con el src como la fuente de la imagen y la alt como el texto alternativo:¿Cómo puedo hacer que una miniatura <img> muestre una imagen de tamaño completo al hacer clic?

<img src="image1.gif" alt="Image 1" />

¿Puede tener algo como es ?:

<img src="image1.gif" alt="image2.gif" />

Eso significa que src tiene una fuente de imagen y alt también tiene una fuente de imagen.

Lo que quiero hacer es extraer 2 imágenes de flickr usando la aplicación flickr (una imagen de pulgar y una de tamaño normal) y cuando el usuario hace clic en el pulgar, se muestra la imagen de tamaño normal.

he intentado algo como esto:

<a href="image2.gif" ><img src="image1.gif"/></a>

... pero tengo la 'not found' como imagen por defecto del pulgar (a pesar de que la imagen existe realmente).

Estoy usando JQuery/Javascript.

Cualquier ayuda, sugerencia o incluso alternativas son bienvenidas y apreciadas.

Gracias

Gracias por la respuesta, Sam

que no me gustan caja de luz porque me resulta demasiado lento y la fantasía.

pero me gusta la idea de geowa4.

pero por favor, mantenga sus respuestas viene ...

gracias

Fuente

2009-01-22 A Hassan

alt es el texto que se muestra cuando la imagen no se puede cargar o el navegador del usuario no soporta imágenes (por ejemplo, para los lectores gente ciega).

Trate de usar algo así como caja de luz:

http://www.lokeshdhakar.com/projects/lightbox2/

actualización: Esta biblioteca quizás mejor como su basado en jQuery que ha dicho que su uso de http://leandrovieira.com/projects/jquery/lightbox/

Fuente

2009-01-22 03:13:52 Sam

Yo no haría eso - la etiqueta alt está allí específicamente para cuando su imagen no se muestra. Sin embargo, y esto se aplica a muchas cosas de jQuery, el atributo "rel" es muy útil.

Fuente

2009-01-22 03:17:17

Ese tipo de funcionalidad va a requerir algo de Javascript, pero probablemente solo sea posible usar CSS (en navegadores que no sean IE6 & 7).

Fuente

2009-01-22 03:17:25 dylanfm

Esto no va a hacer lo que se esperaba:

<img src="image1.gif" alt="image2.gif" />

El atributo ALT es de sólo texto - no va a hacer nada especial si se le da una URL de imagen.

Si desea mostrar inicialmente una imagen de baja resolución, y luego reemplazarla con una imagen de alta resolución, puede hacer alguna codificación de JavaScript para intercambiar las imágenes. O, tal vez, cargue la imagen en un div que tenga un patrón de fondo lleno con la imagen de baja resolución. Luego, cuando se cargue la imagen de alta resolución, se cargará sobre el fondo.

Desafortunadamente, no hay una forma directa de hacerlo.

Su segundo intento creará un enlace a image2, pero en realidad mostrará image1.

<a href="image2.gif" ><img src="image1.gif"/></a>

Si desea una versión emergente resolución más alta, @ sugerencia de Sam es una buena idea.

Este CSS podría funcionar para usted (a mí me funciona en Firefox 3):

<html> 
<head> 
    <style> 
     .lowres { background-image: url('low-res.png');} 
    </style> 
</head> 
<body> 
    <div class="lowres" style="height:500px; width:500px"> 
     <img src="hi-res.png" /> 
    </div> 
</body> 
</html>

En ese ejemplo, usted tiene que fijar el div altura/anchura a la de la imagen. En realidad, cargará ambas imágenes simultáneamente, pero suponiendo que el de baja resolución se carga rápidamente, es posible que lo vea primero mientras se descarga la imagen de alta resolución.

Fuente

2009-01-22 03:18:17

<img src='thumb.gif' onclick='this.src="full_size.gif"' />

Por supuesto puede cambiar el evento onclick para cargar la imagen donde quiera.

Fuente

2009-01-22 03:19:54 geowa4

Un enfoque experimental sin código CSS con precarga de imagen ^BONUS! y que sólo funciona en Firefox:

<style> 
a.zoom .full { display: none; } 
a.zoom:active .thumb { display: none; } 
a.zoom:active .full { display: inline; } 
</style> 

<a class="zoom" href="#"> 
<img class="thumb" src="thumbnail.png"/> 
<img class="full" src="fullsize.png"/> 
</a>

Muestra la miniatura por defecto. Muestra la imagen de tamaño completo mientras se hace clic y se mantiene presionado el botón del mouse. Vuelve a la miniatura tan pronto como se suelta el botón. De ninguna manera sugiero que se use este método; es solo una demostración de un enfoque exclusivo de CSS que resuelve [parcialmente] el problema. Con algunos ajustes de posición relativa z-index +, también podría funcionar en otros navegadores.

Fuente

2009-01-22 04:06:15

La técnica

<a href="image2.gif" ><img src="image1.gif"/></a>

siempre ha trabajado para mí. Lo usé con buenos resultados en mi diario de Super Bowl, pero veo que los guiones que utilicé están rotos. Una vez que los arregle, editaré en la URL.

Fuente

2009-01-22 04:57:06

Aquí está la versión angular de LightBox. Simplemente increíble :)

Nota: He puesto esta respuesta, por lo tanto, no se ha mencionado ninguna biblioteca Js bajo las etiquetas.

angular-bootstrap-lightbox

<ul ng-controller="GalleryCtrl"> 
    <li ng-repeat="image in images"> 
    <a ng-click="openLightboxModal($index)"> 
     <img ng-src="{{image.thumbUrl}}" class="img-thumbnail"> 
    </a> 
    </li> 
</ul>

Fuente

2016-03-03 11:46:52 Sampath

¿Cómo puedo hacer que una miniatura <img> muestre una imagen de tamaño completo al hacer clic?

Respuesta

Cuestiones relacionadas