html - porcentaje - ¿Cómo puedo hacer que una miniatura<img> muestre una imagen de tamaño completo cuando se hace clic en ella?
mostrar imagen en html (8)
Aquí está la versión angular de LightBox. Simplemente impresionante :)
Nota: He puesto esta respuesta, por lo tanto, no se ha mencionado la biblioteca No Js debajo de las Etiquetas.
<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>
Normalmente tiene una imagen con el src como fuente de la imagen y el alt como texto alternativo:
<img src="image1.gif" alt="Image 1" />
¿Puedes tener algo como es ?:
<img src="image1.gif" alt="image2.gif" />
Entonces eso significa que el src tiene una fuente de imagen y el 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 obtengo la imagen predeterminada '' no encontrada '' como el pulgar (aunque la imagen realmente existe).
Estoy usando JQuery / Javascript.
Cualquier ayuda, sugerencia o incluso alternativas son bienvenidas y apreciadas.
Gracias
Gracias por la respuesta Sam,
No me gusta Lightbox porque me parece demasiado lento y elegante.
pero me gusta la idea de geowa4 .
pero por favor, mantengan sus respuestas ...
Gracias
Ese tipo de funcionalidad requerirá algo de Javascript, pero probablemente solo sea posible usar CSS (en navegadores que no sean IE6 y 7).
Esto no hará lo que estás esperando:
<img src="image1.gif" alt="image2.gif" />
El atributo ALT es solo texto, no hará nada especial si le das una URL de imagen.
Si desea mostrar inicialmente una imagen de baja resolución, luego reemplácela con una imagen de alta resolución, puede hacer alguna codificación de JavaScript para cambiar 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 manera directa de hacer esto.
Su segundo intento creará un enlace a image2, pero en realidad mostrará image1.
<a href="image2.gif" ><img src="image1.gif"/></a>
Si desea mostrar una versión de alta resolución, la sugerencia de @ Sam es una buena idea.
Este CSS podría funcionar para ti (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, debe establecer el alto / ancho de div para el 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.
No haría eso: la etiqueta alt está allí específicamente para cuando tu imagen no se muestra. Sin embargo, y esto se aplica a muchas cosas de jQuery, el atributo "rel" es muy útil.
Un enfoque experimental sin script, solo CSS con precarga de imagen ¡BONO! y que solo 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 de manera predeterminada. 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.
los
<a href="image2.gif" ><img src="image1.gif"/></a>
la técnica siempre me ha funcionado. 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.
alt es texto que se muestra cuando la imagen no se puede cargar o el navegador del usuario no admite imágenes (por ejemplo, lectores para personas ciegas).
Intenta usar algo como lightbox:
http://www.lokeshdhakar.com/projects/lightbox2/
actualización: Esta biblioteca puede ser mejor ya que está basada en jQuery, de la que dices que usas http://leandrovieira.com/projects/jquery/lightbox/
<img src=''thumb.gif'' onclick=''this.src="full_size.gif"'' />
Por supuesto, puede cambiar el evento onclick para cargar la imagen donde quiera.