Comment puis-je faire une vignette & lt; img & gt; afficher une image en taille réelle lorsque vous cliquez dessus?
Normalement, vous avez une image tage avec le src comme la source de l'image et de la alt comme le texte alternatif:
<img src="image1.gif" alt="Image 1" />
Pouvez-vous avoir quelque chose comme?:
<img src="image1.gif" alt="image2.gif" />
Ce qui signifie que le src a une source de l'image et de la alt possède également une source de l'image.
Ce que je veux faire est de tirer 2 images sur flickr, à l'aide de l'api de flickr (un pouce de l'image et une taille normale de l'image) et lorsque l'utilisateur clique sur le pouce, à la taille normale de l'image est affiché.
J'ai essayé quelque chose comme ceci:
<a href="image2.gif" ><img src="image1.gif"/></a>
...mais j'obtiens la valeur par défaut " pas trouvé l'image de la manette (même si l'image n'existe vraiment).
Je suis en utilisant JQuery/Javascript.
Toute aide, des suggestions ou même des solutions de rechange sont tous les bienvenus et appréciés.
Grâce
Merci pour la réponse de Sam,
Je n'aime pas la lightbox, car je le trouve trop lent et trop de fantaisie.
mais j'aime geowa4'idée.
mais s'il vous plaît, gardez vos réponses à venir...
grâce
source d'informationauteur A Hassan
Vous devez vous connecter pour publier un commentaire.
La
technique a toujours fonctionné pour moi. Je l'ai utilisé à bon escient dans mon Super Bowl journal, mais je vois que les scripts que j'ai utilisées sont cassés. Une fois que je les fixe, je vais modifier dans l'URL.
alt
est un texte qui s'affiche lorsque l'image ne peut pas être chargé ou le navigateur de l'utilisateur ne prend pas en charge les images (par exemple des lecteurs pour les aveugles).Essayez d'utiliser quelque chose comme lightbox:
http://www.lokeshdhakar.com/projects/lightbox2/
mise à jour:
Cette bibliothèque peut-être mieux comme sa basé sur jQuery qui vous ont dit que votre aide
http://leandrovieira.com/projects/jquery/lightbox/
Bien sûr, vous pouvez modifier l'événement onclick pour charger l'image où vous le souhaitez.
Ce ne ferez pas ce que vous attendez:
L'attribut ALT de texte-seulement-il ne pas faire quelque chose de spécial si vous lui donner un URL de l'image.
Si vous souhaitez afficher une basse résolution de l'image, puis le remplacer par une haute résolution d'image, vous pourriez faire un peu de javascript codage de swap sur les images. Ou, peut-être charger l'image dans un div qui a un motif de fond rempli avec de la basse résolution de l'image. Alors, quand le grand-res image se charge, ça charge, doit surmonter l'arrière-plan.
Malheureusement, il n'y a pas de moyen direct pour ce faire.
Votre deuxième tentative de créer un lien vers image2, mais effectivement afficher image1.
Si vous voulez faire apparaitre une hausse res version, @Sam suggestion est une bonne idée.
Cette CSS pourraient travailler pour vous (il fonctionne pour moi sous Firefox 3):
Dans cet exemple, vous devez définir la div hauteur/largeur de l'image. Il va charger les deux images simultanément, mais à condition que le low-res une charge rapide, vous pouvez voir la première tandis que la hi-res le téléchargement des images.
Je ne le ferais pas, - la balise alt est-il spécifiquement pour quand votre image n'est pas affichée. Cependant, et cela s'applique à beaucoup de jQuery choses, l'attribut "rel" est très utile.
Ce genre de fonctionnalité va nécessiter un peu de Javascript, mais il est probablement possible d'utiliser les CSS (dans les navigateurs autres que IE6&7).
Un scriptless, CSS seule approche expérimentale avec l'image pré-chargementBONUS! et qui ne fonctionne que sous Firefox:
Montre la vignette par défaut. Affiche l'image en taille réelle alors que le bouton de la souris est cliqué et maintenue enfoncée. Remonte à la vignette dès que le bouton est relâché. Je suis en aucune façon ce qui suggère que cette méthode; c'est juste une démo d'un CSS seule approche que très partiellement résolu le problème. Avec le z-index + position relative des réglages, il pourrait travailler dans d'autres navigateurs aussi.
Ici est l'angle de la version de l'Album. Tout Simplement Génial 🙂
Note : j'ai mis cette réponse, donc Pas de bibliothèque Js a été mentionné à la Tags.
angulaire-bootstrap-lightbox