nicht angemeldet
Popup mit automatisch ans Bild angepasste Fenstergröße
Hallo,
habe ein Problem, mit dem ich mich schon ne ganze Weile beschäftige und absolut nicht auf die Lösung komme. Ich möchte auf einer Seite mehrere Thumbnails anzeigen, die dann jeweils mit einem Mausklick in einem Popup in der Originalgröße erscheinen sollen. Das Popup-Fenster soll dabei ohne solche Sachen wie Statusleiste, Scrollbar usw., also nur Titelleiste erscheinen. Der Anzeigebereich des Fensters soll genau die Größe der Original-Bildgröße haben, sodass also das Bild in Originalgröße + Titelleiste angezeigt werden soll.
Da ich selbst noch nix mit Java-Script gemacht habe, habe ich folgenden Code von
http://www.infos24.de/javascripte/handbuch/27_js_arbeiten_mit_bildern.htm#2
Das Beispiel auf der Seite funktioniert auch einwandfrei, nur bei mir nicht. Wenn ich nun die einzelnen Bilder aufrufe dann ist das Fenster nicht genau in der Größe des Originalbilds, sondern etwas kleiner, es fehlt also ein Stück der Fotos jeweils am unteren und rechten Rand. Woran liegt das? Und wie kann man es machen das der User erkennt das es sich um einen Link handelt, also das die Hand auch angezeigt wird? Ich wäre sehr sehr dankbar für Hilfe, ich bin am verzweifeln!! DANKE!!
Hier mein Java-Script-Code:
---------------------------------------------
<script language="javascript">
function aufblenden(a)
{
bildle=new Image();
bildle.src="../jpg/"+a;
hoehe=bildle.height;
breite=bildle.width;
fenster2=window.open("","fenster",'width='+breite+'height='+hoehe+',scrollbars=no');
fenster2.resizeTo(breite+10,hoehe+20);
fenster2.document.open();
fenster2.document.write("<html><head><title>neues Fenster</title></head><body leftmargin=0 topmargin=0 margindwidth=0 marginheight=0>");
fenster2.document.write("<img src=../jpg/"+a+">");
fenster2.document.write("</body></html>");
fenster2.document.close();
fenster2.focus();
}
</script>
Hier der Code an der Stelle des Thumbnails:
-----------------------------------------------------------
<img src=../jpg/fc64.jpg alt="Klicken um das Bild zu vergrößern!" width=115 height=78 align=right border=1 name="bild1" onClick=aufblenden("../jpg/fc64.jpg")>
------------------------------------------------------------
-
function aufblenden(a)
{
bildle=new Image();
bildle.src="../jpg/"+a;
hoehe=bildle.height;
breite=bildle.width;Du musst warten bis das Bild fertig geladen ist.
Ich hab hier ein Skript was das tut
http://javascript.jstruebig.de/source/popup.htmlStruppi.
-
Hallo Struppi!
Tolles Skript, aber vielleicht ein bisschen aufwendig...
ich mache das so:
function ViewerWindow(BILD,winNAME,features)
{
newview = open(BILD,winNAME,features);
newview.document.open();
with (newview.document) {
write("<html><head></head>");
write("<body onblur='window.close()'>");
write("<div align='center'><img src='")
write(BILD);
write("'></div>");
write("</body></html>");
}
newview.document.close();
}
// -->
</script>----------------------
Aufruf:
<a href="javascript:ViewerWindow('gross-bild.jpg',VIEW',resizable=no,width=bildbreite_in_pixeln,height=bildhöhe_in_pixeln,left=0,top=0,dependent=yes,toolbar=no')"<img src="klein-bild.jpg"></>
Per Klick auf das Bild "klein-bild.jpg" Öffnet sich ein Fenster, welches Bild "gross-bild.jpg" lädt...
bildbreite_in_pixeln = Breite von gross-bild.jpg (als Zahl ohne Anführungszeichen)
bildhöhe_in_pixeln = Höhe von gross-bild.jpg (s.o)Hippo
-
hi,
ich mache das so:
</faq/#Q-09d>
dein beispiel ist in mehrfacher hinsicht murks.
write("<html><head></head>");
abgesehen davon, dass die DTD fehlt, <title> ebenso - </ beendet den scriptbereich implizit. also bitte immer mit </ maskieren, wenn diese zeichenfolge innerhalb eines scriptbereiches auftritt.
write("'></div>");
write("</body></html>");s.o.
<a href="javascript:ViewerWindow('gross-bild.jpg',VIEW',resizable=no,width=bildbreite_in_pixeln,height=bildhöhe_in_pixeln,left=0,top=0,dependent=yes,toolbar=no')"<img src="klein-bild.jpg"></>
javascript bitte nicht über href="javascript:..." einbinden, das ist unfug.
bitte onClick stattdessen nutzen.
damit hast du die möglichkeit, gleichzeitig auch noch eine alternative aktion für nutzer ohne JS zu implementieren - die fehlt bei dir vollständig.darüber hinaus fehlt beim zweiten und dritten parameter deines funktionsaufrufes das einleitende hochkomma.
Per Klick auf das Bild "klein-bild.jpg" Öffnet sich ein Fenster, welches Bild "gross-bild.jpg" lädt...
wage ich bei der anzahl an fehlern stark zu bezweifeln.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
Alsooooo, ich hatte mich ja noch mal zu Wort gemeldet, bisher kam ja noch keine Antwort, aber ich haben neue Erkentnisse:
Es funktioniert alles wie gewünscht mit Mozilla, den hab ich jetzt mal getestet. Im IE 6 ist das Problem aber wie oben beschrieben, aber das darf doch normal nicht sein. Woran kann das liegen?
-
-
Tolles Skript, aber vielleicht ein bisschen aufwendig...
Es geht aber nicht anders, wenn sich das Bild automatisch an die Größe anpassen soll.
<a href="javascript:ViewerWindow('gross-bild.jpg',VIEW',resizable=no,width=bildbreite_in_pixeln,height=bildhöhe_in_pixeln,left=0,top=0,dependent=yes,toolbar=no')"<img src="klein-bild.jpg"></>
Wenn schon denn schon:
<a href="gross-bild.jpg" target="VIEW"
onclick="ViewerWindow('', 'VIEW', 'resizable=no,width=bildbreite_in_pixeln,height=bildhöhe_in_pixeln,left=0,top=0,dependent=yes,toolbar=no'); return false"<img src="klein-bild.jpg"></a>
bildbreite_in_pixeln = Breite von gross-bild.jpg (als Zahl ohne Anführungszeichen)
bildhöhe_in_pixeln = Höhe von gross-bild.jpg (s.o)Das ist das was JS rausfinden soll. Daher der Hinweis auf das Skript, das genau das tut.
Struppi.
-
-
function aufblenden(a)
{
bildle=new Image();
bildle.src="../jpg/"+a;
hoehe=bildle.height;
breite=bildle.width;Du musst warten bis das Bild fertig geladen ist.
Ich hab hier ein Skript was das tut
http://javascript.jstruebig.de/source/popup.htmlStruppi.
Danke für die schnelle Hilfe, aber ich raffs einfach nicht bzw. mache irgendwas falsch! Ich habe also den Code den ich oben angegeben habe gelöscht und mich nach der Anleitung der von dir angegebenen Seite gerichtet-
Einbindung im Header:
--------------------------------------------------------------
<script type="text/javascript" src="../javascript/popup.js"></script>
--------------------------------------------------------------Und dann der Aufruf im Body der Datei:
-------------------------------------------------------------
<A href="../jpg/fcb64.jpg"
alt="Zum vergößern auf das Bild klicken"
title="titel des grosses Bild"
onclick="return showBild(this);"<img src="../jpg/fcb64_thumb.jpg"></A>
-------------------------------------------------------------
Der Aufruf funktioniert, aber ich habe weiter das Problem das das Fenster nicht in der Größe des Bildes ist, man kann es zwar soweit per Maus vergrößern, damit man das Bild sieht, aber das ist ja nicht der Sinn der Sache. Und wo kann ich hier die Attribute wie scrollbar=no usw. einbinden?
Was mache ich also falsch? Vielen Dank schon mal für die Hilfe!
-
Der Aufruf funktioniert, aber ich habe weiter das Problem das das Fenster nicht in der Größe des Bildes ist, man kann es zwar soweit per Maus vergrößern, damit man das Bild sieht, aber das ist ja nicht der Sinn der Sache. Und wo kann ich hier die Attribute wie scrollbar=no usw. einbinden?
wie gross ist dein Bild?
Es muss mindestens 100px X 100px gross sein, kleinere Fenster gehen (zumindest im IE nicht)Falls du keinen IE verwendest hast du evtl. irgendwo das verändern der Größe abgeschaltet?
Bei mir funktionierte das skript bisher in allen mir zu Verfügung stehenden Browsern
Struppi.
-
wie gross ist dein Bild?
Es muss mindestens 100px X 100px gross sein, kleinere Fenster gehen (zumindest im IE nicht)Falls du keinen IE verwendest hast du evtl. irgendwo das verändern der Größe abgeschaltet?
Bei mir funktionierte das skript bisher in allen mir zu Verfügung stehenden Browsern
Struppi.
Es hat sich alles erledigt! Die Sache funktioniert. Es ist mir gestern Abend schon aufgefallen als ich noch weitere Fotos hinzugefügt habe, dass es plötzlich ging, nur bei den ersten beiden die ich zuerst eingefügt habe nicht. Nun habe ich heute morgen noch mal probiert und auch die ersten beiden werden richtig angezeigt. Scheinbar hat er sich das irgendwie aus dem Cache oder so gezogen.
Habe aber noch 2 Fragen dazu. Bisher kann der User den Fensterrahmen per Maus größer und kleiner ziehen. Wie kann ich das verhindern und wo genau muss ich den entsprechenden Befehl hinzufügen?
Und könnte man auch einfach einen Text unter dem Bild das aufgerufen wird hinzufügen? Oder wäre das eine aufwendigere Sache?
Bin dir aber schon mal sehr dankbar, hast mir sehr geholfen!
Gruß
Andy
-
Habe aber noch 2 Fragen dazu. Bisher kann der User den Fensterrahmen per Maus größer und kleiner ziehen. Wie kann ich das verhindern und wo genau muss ich den entsprechenden Befehl hinzufügen?
Nein.
Man könnte es ändern, doch läßt sich in manchen Browsern das Fenster dann nicht mehr mit JS ändern. Dann müßte man jedesmal das Fenster schliessen und neu öffnen was wieder andere Probleme bereitet (die Browser haben beim öffnen sehr unterschiedliche Vorstellung, was genau die Fenstergröße ist.)
Und könnte man auch einfach einen Text unter dem Bild das aufgerufen wird hinzufügen? Oder wäre das eine aufwendigere Sache?
Ja, weil dann ja die Fenstergröße nicht mehr anhand der Bildgröße ermitteln liesse.
Der Punkt ist, das Skript ist auf allen Browsern ab der 4. Generation lauffähig, um die Änderung die du willst einzufügen wären Funktionen nötig die erst neuere Browser zu Verügung stellen.
Struppi.
-
Ok, Danke! Die Sache läuft jetzt ja gut, Ziel erreicht :)
-
-
-
-
-