Bilder auf meiner Page vergrößern

Orcen · 14. Juli 2005

Hi,

ich will auf meiner page volgendes einrichten.

und zwar wenn ich viele kleine fotos drauf habe. dann will ich auf ein foto klicken und dann soll es in einem extra fenster groß da gestellt werden. aber nicht in einen komplett neuem browserfenster sondern nur in einen kleinen fenster. ich kann es leider net anders erklären. ich glaube das geht mit java kann das sein? ich nutze als prog dreamweaver.

vielleicht kann mir einer sagen wie das geht

danke orcen

Quidoff · 14. Juli 2005

Also du brauchst zwei Versionen von deinem Bild. Einmal ein kleines Bild (Thumbnail), das in deiner HTML-Datei neben den ganzen anderen Bildern angezeigt wird. Wenn du dann auf dieses Bild klickst, dann öffnet sich in einem neuen Fenster das andere Bild.

HTML:

<html>

<head>
<script type="text/javascript">
<!--
function popUp(BILD,WIDTH,HEIGHT) {
	config = "dependent=yes,height="+HEIGHT+",hotkeys=no,innerHeight=0,innerWidth=0,location=no,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no,width="+WIDTH;

	void(window.open(BILD,'_blank',config));
}
//-->
</script>
</head>

<body>
<a href="#" onclick="popUP('bild.jpg', 200, 300);"><img src="thumbnail.jpg" /></a>
</body>
</html>

Mfg
KoЯn

tch · 14. Juli 2005

2 Bilder braucht er nicht unbedingt, es reicht auch, wenn er das große Bild hat. und beim Thumbnail lässt er das Bild dann einfach kleiner anzeigen (mit width und height)

Quidoff · 14. Juli 2005

@david91: Wirklich tolle Idee.

Mfg
KoЯn

Benjamin_L · 14. Juli 2005

@Quidoff: naja, es gibt ja nicht gerade wenige, die so nen Käse echt durchziehen...

btw, es heisst "folgendes"

ExtiQ · 15. Juli 2005

hmmm das problem was ich bei mehreren Seiten bemerkt habe wenn man die "Thumbnails" durch php vom Original erstellt per resize, ist dass die seiten bei vielen bildern sehr langsam laden.. meine Erfahrung

Quidoff · 15. Juli 2005

Dann empfehle ich dir einfach nen unterordner thumbnail oder so zu erstellen und da dann die Bilder in verkleinerter Form zu speichern. Am schnellsten geht das Wohl mit einer Stapelverarbeitung per PhotoShop oder Irfanview. (Datei\ Batchkonvertierung).
Ich hab auch so eine Seite gemcht, wo ich Bilder anzeigen lasse per PHP. Das Script liest einfach jede jpg Datei aus dem Verzeichnis aus und zeigt deren Thumbnail aus dem Ordner "small" an. Die Dateinamen müssen also identisch sein.

Beispielcode:

PHP:

<img src=\"small/".$dateiname."\" />

Mfg
KoЯn

Orcen · 16. Juli 2005

also ich habe jetzt mal versucht den code in meine page einzubauen. allerdings geht es noch net so ganz.

<a href="#" onclick="popUP('bild.jpg', 200, 300);"><img src="thumbnail.jpg" /></a>

das thumbnail.jpg is dann das kleine bild oda? und das bild.jpg ist das große? oda wie?

also ich kann bei mir auf der seite zwar das bild anklicken aba es passiert nix..

danke orcen

da real shit · 16. Juli 2005

bei mir gings vll Tippfehler?
hab alles von oben rauskopiert gehabt

GeYe · 16. Juli 2005

javascript aktiviert im Browser? Weil sonst wird das nicht funktionieren.

Quidoff · 16. Juli 2005

Sorry. In meinem Code ist ein kleiner Fehler. Hab vergessen, dass JavaScript case-sensitive ist.

Falsch:

HTML:

<a href="#" onclick="popUP('bild.jpg', 200, 300);">

Richtig:

HTML:

<a href="#" onclick="popUp('bild.jpg', 200, 300);">

Mfg
KoЯn

Orcen · 17. Juli 2005

ich kriegs irgendwie net hin. vielleicht kann sich das mal jemand angucken.

klick

wenn ich aufs bild klicke öffnet er die gleiche htm wieder

danke orcen

Quidoff · 17. Juli 2005

Hast du den meinen Post über deinem nicht gelesen. Das ist genau das Problem der GROS/klein-Schreibung.

Mfg
KoЯn

Orcen · 17. Juli 2005

ahhhh sry. ich habs gelesen aber nich benutzt

danke jetzt gehts

orcen

Quidoff · 17. Juli 2005

Wenn man das Bild allerdings direkt in einem Fenster öffnet, dann hab ich das Problem, dass der Browser um das Bild einen weißen Rand einfügt. Deshalb hab ich noch eine PHP-Datei geschrieben an die ich per GET eine Bild-ID übergebe.

PHP:

echo("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">\n");

echo("<head>\n");

echo("<title>PopUp</title>\n");

echo("</head>\n");

echo("<body style=\"margin: 0px;\">\n");

echo("<img alt=\"".$bilder[$id]."\" border=\"0\" src=\"".$url[$id]."\" />\n");

echo("</body>\n");

Durch das "margin: 0px" wird der weiße Rand entfernt.

Mfg
KoЯn

Benjamin_L · 17. Juli 2005

was ist eigentlich der Zweck der vielen echos ? Ist das guter Stil ? Gefaellt mit naemlich ueberhaupt nicht ^^

Und das margin: 0; und etwaige andere Eigenschaften passen besser in eine externes CSS Datei.

Quidoff · 17. Juli 2005

Also das mit den echos finde ich so normal und habs von Anfang an immer so gemacht. Mir ist gar nicht bekannt, dass es besser sein sollte, wenn man den Inhalt eines echo-Befehls vergrößert. Wie es einem halt am besten gefällt. Und nur wegen margin: 0 mach ich bestimmt keine neue css Datei auf.

Mfg
KoЯn

Suche

Bilder auf meiner Page vergrößern

Orcen

Ensign

Quidoff

Lieutenant

tch

Ensign

Quidoff

Lieutenant

Benjamin_L

Commander

ExtiQ

Gast

Quidoff

Lieutenant

Orcen

Ensign

da real shit

Lt. Junior Grade

GeYe

Lt. Junior Grade

Quidoff

Lieutenant

Orcen

Ensign

Quidoff

Lieutenant

Orcen

Ensign

Quidoff

Lieutenant

Benjamin_L

Commander

Quidoff

Lieutenant

Ähnliche Themen