16 Stimmen

A Hassan avatar

Wie kann ich erreichen, dass ein <img> in voller Größe angezeigt wird, wenn ich darauf klicke?

Gefragt el 22 de Januar, 2009
Wann wurde die Frage gestellt
124148 Ansichten
Anzahl der Besuche der Frage
3 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

Normalerweise haben Sie eine Bilddatei mit dem src als Quelle des Bildes und die alt als Alternativtext:

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

Kann man so etwas haben?

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

Das bedeutet also, dass die src hat eine Bildquelle und die alt hat auch eine Bildquelle.

Was ich tun möchte, ist ziehen 2 Bilder aus Flickr mit der Flickr-Api (ein Thumb-Bild und ein normal großes Bild) und wenn der Benutzer auf den Thumb klickt, wird das normal große Bild angezeigt.

Ich habe etwas Ähnliches versucht:

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

...aber ich erhalte die Standardeinstellung ' nicht gefunden Bild als Daumen (auch wenn das Bild wirklich existiert).

Ich verwende JQuery/Javascript.

Jede Hilfe, jeder Vorschlag und sogar jede Alternative ist willkommen und wird geschätzt.

Gracias

Danke für die Antwort, Sam,

Ich mag Lightbox nicht, weil ich es zu langsam und kompliziert finde.

aber ich mag geowa4 die Idee.

aber bitte, geben Sie weiterhin Ihre Antworten...

danke

Gefragt el 22 de Januar, 2009 von A Hassan

Antworten

Zu viele Anzeigen?

0voto

Sampath avatar
Sampath Punkte 57490

Hier ist die Angular-Version von LightBox. Einfach genial :)

Hinweis: Ich habe diese Antwort daher keine Js-Bibliothek wurde unter den Tags erwähnt.

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>
Beantwortet el 3 de Marsch, 2016 von Sampath (57490 Punkte )

0voto

Carlo Guevarra avatar
Carlo Guevarra Punkte 129

Hier ein Beispiel

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>
Beantwortet el 13 de Juni, 2018 von Carlo Guevarra (129 Punkte )

-1voto

dylanfm avatar
dylanfm Punkte 6220

Diese Art von Funktionalität erfordert etwas Javascript, aber es ist wahrscheinlich möglich, nur CSS zu verwenden (in anderen Browsern als IE6 & 7).

Beantwortet el 22 de Januar, 2009 von dylanfm (6220 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X