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
124147 Ansichten
Anzahl der Besuche der Frage
5 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?

24voto

Norman Ramsey avatar
Norman Ramsey Punkte 193087

Die

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

Diese Technik hat bei mir immer funktioniert. Ich habe sie mit gutem Erfolg in meinem Super Bowl-Tagebuch verwendet, aber ich sehe, dass die von mir verwendeten Skripte defekt sind. Sobald ich sie repariert habe, werde ich die URL einfügen.

Beantwortet el 22 de Januar, 2009 von Norman Ramsey (193087 Punkte )

10voto

Sam avatar
Sam Punkte 6190

alt ist ein Text, der angezeigt wird, wenn das Bild nicht geladen werden kann oder der Browser des Nutzers keine Bilder unterstützt (z. B. bei Lesegeräten für Blinde).

Versuchen Sie, etwas wie Lightbox zu verwenden:

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

aktualisieren: Diese Bibliothek vielleicht besser als seine auf jQuery, die Sie gesagt haben, Ihre Verwendung basiert http://leandrovieira.com/projects/jquery/lightbox/

Beantwortet el 22 de Januar, 2009 von Sam (6190 Punkte )

9voto

geowa4 avatar
geowa4 Punkte 38662 
<img src='thumb.gif' onclick='this.src="full_size.gif"' />

Natürlich können Sie das onclick-Ereignis so ändern, dass das Bild geladen wird, wo immer Sie wollen.

Beantwortet el 22 de Januar, 2009 von geowa4 (38662 Punkte )

1voto

Michael Haren avatar
Michael Haren Punkte 101002

Dies wird nicht das bewirken, was Sie erwarten:

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

Das ALT-Attribut ist ein reines Textattribut - es bewirkt nichts Besonderes, wenn Sie ihm eine Bild-URL geben.

Wenn Sie zunächst ein niedrig aufgelöstes Bild anzeigen und es dann durch ein hochauflösendes Bild ersetzen möchten, können Sie die Bilder mit Hilfe von Javascript austauschen. Oder Sie können das Bild in ein Div laden, das ein Hintergrundmuster hat, das mit dem niedrig aufgelösten Bild gefüllt ist. Wenn dann das hochauflösende Bild geladen wird, wird es über den Hintergrund geladen.

Leider gibt es keine direkte Möglichkeit, dies zu tun.

Bei Ihrem zweiten Versuch wird ein Link zu Bild2 erstellt, aber tatsächlich Bild1 angezeigt.

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

Wenn Sie eine höher aufgelöste Version einblenden wollen, ist der Vorschlag von @Sam eine gute Idee.

Dieses CSS könnte bei Ihnen funktionieren (bei mir funktioniert es in 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>

In diesem Beispiel müssen Sie die Höhe/Breite des Divs auf die des Bildes einstellen. Es werden tatsächlich beide Bilder gleichzeitig geladen, aber vorausgesetzt, dass das niedrig aufgelöste Bild schnell geladen wird, sehen Sie es möglicherweise zuerst, während das hochauflösende Bild heruntergeladen wird.

Beantwortet el 22 de Januar, 2009 von Michael Haren (101002 Punkte )

0voto

Ates Goral avatar
Ates Goral Punkte 132294

Ein skriptloser, rein CSS-basierter experimenteller Ansatz mit Bildvorladung BONUS! und die nur in Firefox funktioniert:

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

Zeigt standardmäßig das Vorschaubild an. Zeigt das Bild in voller Größe an, wenn die Maustaste gedrückt gehalten wird. Kehrt zur Miniaturansicht zurück, sobald die Taste losgelassen wird. Ich schlage keineswegs vor, dass diese Methode verwendet wird; es ist nur eine Demonstration eines reinen CSS-Ansatzes, der das Problem [sehr] teilweise löst. Mit einigen z-index + relative Position zwickt, könnte es in anderen Browsern zu arbeiten.

Beantwortet el 22 de Januar, 2009 von Ates Goral (132294 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