web-dev-qa-db-fra.com

Comment puis-je faire en sorte qu'une vignette <image> affiche une image en taille réelle après un clic?

Normalement, vous avez une image avec le  src  comme source de l'image et de la alt  comme texte alternatif:

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

Pouvez-vous avoir quelque chose comme est ?:

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

Cela signifie donc que le  src  a une source d'image et le alt a également une source d'image.

Ce que je veux faire, c'est extraire 2 images de flickr en utilisant l'api de flickr (une image de pouce et une image de taille normale) et lorsque l'utilisateur clique sur le pouce, l'image de taille normale s'affiche.

J'ai essayé quelque chose comme ça:

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

... mais j'obtiens la valeur par défaut ' not found ' image en tant que pouce (même si l'image existe vraiment).

J'utilise JQuery/Javascript.

Toute aide, suggestion ou même alternative est la bienvenue et la bienvenue.

Merci

Merci pour la réponse Sam,

Je n'aime pas la lightbox parce que je la trouve trop lente et sophistiquée.

mais j'aime bien l'idée de geowa4 .

mais s'il vous plaît, gardez vos réponses à venir ...

merci

htmlimagetags
12
A Hassan

Le

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

la technique a toujours fonctionné pour moi. Je l'ai utilisé à bon escient dans mon journal du Super Bowl, mais je vois que les scripts que j'ai utilisés sont cassés. Une fois que je les ai réparés, je vais modifier l'URL.

15
Norman Ramsey

alt est un texte qui s'affiche lorsque l'image ne peut pas être chargée ou que le navigateur de l'utilisateur ne prend pas en charge les images (par exemple, les lecteurs pour les personnes aveugles).

Essayez d'utiliser quelque chose comme lightbox:

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

update: Cette bibliothèque est peut-être meilleure car elle est basée sur jQuery et vous avez dit que vous l'utilisiez http://leandrovieira.com/projects/jquery/lightbox/

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

Bien sûr, vous pouvez modifier l'événement onclick pour charger l'image où vous le souhaitez.

8
geowa4

Cela ne fera pas ce que vous attendez:

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

L'attribut ALT est uniquement du texte - il ne fera rien de spécial si vous lui donnez une URL d'image. 

Si vous souhaitez afficher initialement une image basse résolution, puis la remplacer par une image haute résolution, vous pouvez utiliser du code javascript pour permuter les images. Ou peut-être charger l'image dans une div dont le motif d'arrière-plan est rempli avec l'image basse résolution. Ensuite, lorsque l'image haute résolution se charge, elle se charge au-dessus de l'arrière-plan.

Malheureusement, il n'y a pas de moyen direct de le faire.

Votre deuxième tentative créera un lien vers image2, mais affichera réellement image1.

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

Si vous souhaitez afficher une version plus haute résolution, la suggestion de @ Sam est une bonne idée.

Ce CSS pourrait fonctionner pour vous (cela fonctionne pour moi dans 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>

Dans cet exemple, vous devez définir la hauteur/largeur de div sur celle de l'image. Il chargera les deux images simultanément, mais en supposant que l'image basse résolution soit chargée rapidement, vous pourriez la voir en premier pendant le téléchargement de l'image haute résolution.

1
Michael Haren

Une approche expérimentale sans script et uniquement CSS avec préchargement d’imagePRIME! et qui ne fonctionne que dans 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>

Affiche la vignette par défaut. Affiche l'image en taille réelle tant que le bouton de la souris est cliqué et maintenu enfoncé. Revient à la vignette dès que le bouton est relâché. Je ne suggère nullement que cette méthode soit utilisée; c'est juste une démonstration d'une approche basée uniquement sur CSS qui résout [très] partiellement le problème. Avec quelques ajustements de z-index + position relative, cela pourrait également fonctionner dans d'autres navigateurs.

0
Ates Goral

Utilisez ceci comme exemple

https://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div id="pageone" data-role="main" class="ui-content">
    <p>Click on the image to enlarge it.</p>
    <p>Notice that we have added a "back button" in the top right corner.</p>
    <a href="#myPopup" data-rel="popup" data-position-to="window">
    <img src="https://lh3.googleusercontent.com/8XQPMmZImaDsSyEPbAptXOHQYZKP_rggu_tr9EPl3jpPnuXOd5gGP5kQKqFT0ZLXQ36-=s136" alt="Skaret View" style="width:200px;"></a>

    <div data-role="popup" id="myPopup">
      <p>This is my picture!</p> 
      <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="https://lh3.googleusercontent.com/8XQPMmZImaDsSyEPbAptXOHQYZKP_rggu_tr9EPl3jpPnuXOd5gGP5kQKqFT0ZLXQ36-=s136" style="width:800px;height:400px;" alt="Skaret View">
    </div>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 

</body>
</html>

0
Carlo Guevarra

Voici la version Angular de LightBox. Tout simplement génial :)

Note: j'ai mis cette réponse donc aucune bibliothèque Js n'a été mentionnée sous les Tags.

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>
0
Sampath

Je ne ferais pas cela - la balise alt est là spécialement pour que votre image ne soit pas affichée. Cependant, et cela s'applique à beaucoup de choses jQuery, l'attribut "rel" est très utile. 

0
Mike Robinson

Ce type de fonctionnalité nécessitera du Javascript, mais il est probablement possible d’utiliser uniquement CSS (dans les navigateurs autres que IE6 et 7).

0
dylanfm