Sie befinden sich hier im Forenarchiv von phpforum.de wenn Sie direkt ins Forum möchten, klicken Sie bitte hier. Zur Startseite kommen Sie hier.

popup mit bild

Hallo zusammen,

das Problem:
Ich erstelle bei Klick auf ein Thumbnail-Bild ein neues Fenster, das das gleiche Bild aber größer anzeigen soll. Dabei soll die Fenstergröße des popup's an die Größe des Bildes angepasst werden. Mein Code derzeit:

img = new Image();

img.src = file;
b = img.width;
h = img.height;

dann mache ich

eigenschaften = "left="+x+",top="+y+",......;
fenster = window.open("","",eigenschaften);
.....

Das funktioniert nur manchmal, nämlich nur dann, wenn das Bild komplett geladen wurde.
Ich habe mir schon mehrere Scripts zum 'preloaden' angeschaut, dei aber wohl in diesem Fall nicht sehr geeignet sind.
Hab auch mit img.complete versucht das Ende des Ladens abzufangen, aber...

Was kann man tun?

Gruß- dh

Hier gehts zum Orginal Eintrag "popup mit bild" im Forum

Antworten

Das bild als normales img machen. bei onclick eine funktion aufrufen, die als parameter die breite und höhe des bildes erwartet. Mit php machst du die ausgabe des bild-tags, und kannst mit php zugleich breite und höhe des bildes ermitteln und ausgeben.


2.

Hi bieler,
das verstehe ich nicht ganz:

was heißt als 'normales' img machen?

Das große Bild liegt auf dem Server bereit (sind mehrere Bilder, jedes verschieden groß) und eben Breite und Höhe sollten ermittelt sein ehe das Fenster angepasst wird...

Bei onclick kann eigentlich nur eine Funktion mit dem Bildnamen aufgerufen werden, dann muss die Größe des Bildes festgestellt werden, dann diese Parameter fürs Erzeugen des Fensters verwendet werden.
Alles reduziert sich darauf: Die Bildmaße können nur festgestellt werden, wenn es komplett geladen ist und das dauert zuweilen ne Zeit. Alle Funktionen arbeiten aber währenddessen weiter. Wie kann man so zu sagen auf das Ende des Ladens eines Bildes warten?


3.

Ergänzung:

In meinem Code oben bedeutet file den Bildnamen, also 'beispiel.jpeg', oder so...


4.

hast du php zur verfügung, oder muss es mit javascript gehen?


5.

Nun ja, Gewissensfrage...

Ich arbeite eigentlich lieber mit Javascript, aber wenns denn unbedingt PHP sein muss... *G*


6.

du könntest z.B. sowas im head machen
Code:                   In Zwischenablage kopieren (nur IE)
1">

und im aufruf sowas:
Code:                   In Zwischenablage kopieren (nur IE)
2">

kurz erkärt. du lieferst der showLargePic-funtion einen string indem der pfad zum bild enthalten ist. in der funktion wird zuerst ein leeres popup geöffnet mit 0 breite und 0 höhe. danach schreibst du html code in das popUp fenster, der das bild anzeigt. zudem wird im html code ein javascript eingefügt, dass die grösse des eben erstellten bildes angibt und dann gleich das pop-up fenster in diese grösse zerrt ;-)

nähere erklärungen findest du hier:
http://de.selfhtml.org/javascript/objekte/images.htm#height
http://de.selfhtml.org/javascript/objekte/window.htm#resize_to

-greetz Lordi-


7.

ein normales bild:
<img src="irgendeinbild.jpg" alt="bild" onclick="javascript:imgpopup(100,200)" />

Du arbeitest lieber mit Javascript als mit PHP? Weisst du überhaupt was PHP ist? Die eine sprache kann die andere überhaupt nicht ersetzen, da die eine Clientseitig, die andere Serverseitig ausgeführt wird.
d.h. mit PHP ist keine interaktion im selben browserfenster möglich, mit Javascript sind keine Serverfunktionen wie datenbank ect. möglich.


8.

An bieler:

Nun, die Unterschiede zwischen Javascript und PHP kenne ich natürlich. Meine Antwort an Lord war bissel ironisch gemeint, in Javascript habe ich bisher mehr gemacht, mit PHP eigentlich nur Email-Aktion.

Ja, und dein Code zum Problem zeigt, dass du wohl die Feinheiten des Diskussionsgegenstands nicht erfasst hast...



An Lord: danke für den Code, werds mal ausprobieren!


9.

hmm sorry mein vorschlag von vorhin (006), funktioniert wohl nicht wirklich. habs jetzt mal getestet, aber folgendermassen funktionierts:
Code:                   In Zwischenablage kopieren (nur IE)
3">

1. leeres fenster wird geöffnet.
2. html code (aus variable OUT) zum anzeigen des bildes einfügen in's popup
3. das bild-objekt, das im popup geladen wird kommt in die variable "img"
4. das popup wird geresized (resizeTo) zu der grösse und breite des img objektes. plus eine kleine spatzung für den rahmen im fenster, der um das bild entsteht.
5. popup fenster bekommt den focus.

infos:
http://de.selfhtml.org/javascript/objekte/images.htm#height
http://de.selfhtml.org/javascript/objekte/images.htm#width
http://de.selfhtml.org/javascript/objekte/window.htm#resize_to


10.

Hi Lord,

danke für die Tipps und es lohnte sich doch des Nachdenkens!!!
Ich habe deinen letzten Tipp in meinen Code eingebaut und das funktioniert ein bisschen anders ,aber jetzt auch gut.
Hier :
........
Code:                   In Zwischenablage kopieren (nur IE)
4">

Also nochmals, danke für Mitarbeit und ciao - dh


11.

Zitat:
Ja, und dein Code zum Problem zeigt, dass du wohl die Feinheiten des Diskussionsgegenstands nicht erfasst hast...
Nö, ich hab die "Feinheiten" :D sehrwohl begriffen. Man darf ruhig auch meine zwei beiträge kombinieren. Die breite und höhe liest du mit PHP aus, und gibst sie im tag aus. Zumal du sowieso die breite und höhe eines bildes im img-tag definieren solltest (ob mit css oder html sei dir überlassen).
Ist halt eine andere möglichkeit, und ich finds meistens besser, solche sachen mit PHP zu realisieren, als mit javascript...da hast du die volle kontrolle, ob dies dann auch in jedem browser geht(bis auf window.open, was aber doch fast überall geht).


12.

Zitat:
Ist halt eine andere möglichkeit, und ich finds meistens besser, solche sachen mit PHP zu realisieren, als mit javascript...da hast du die volle kontrolle, ob dies dann auch in jedem browser geht(bis auf window.open, was aber doch fast überall geht)
Naja, also entweder man baut auf JavaScript, oder man lässt es ganz bleiben. Wenn der User JS deaktiviert hat, wovon man im schlimmsten Falle ausgehen muss, wird auch window.open nicht funktionieren. Hat er es aktiviert, dann geht auch der Rest mit JavaScript !

Man kann höchstens Elemente die die Usability aufwerten, aber nicht zwingend erforderlich sind, mit JS regeln, wie z.B. Formularfelder ... Allerdings MUSS man es dann trotzdem ncoh ein zweites Mal mit PHP machen, da die Daten zum einen nicht von einem Browser stammen könnten, und zum anderen der User JS deaktiviert haben könnte. Diejenigen die JS aktiviert haben, haben dann den Vorteil, dass sie die Seite nicht ncohmal laden/ausfüllen müssen :)


13.

man muss nicht, man kann...gibt genügend beispiele aufm Internet, wo man ohne JS gar nicht mehr durchkommt.
Meiner Meinung nach ist dass, was er da mit JavaScript fabrizieren will, ein ziemliches gebastel....mit PHP ist dies aber einfach, schnell und sauber lösbar.
Aber jo, jedem seine eigene Meinung....Ich verzichte eigendlich meistens komplett auf JavaScript....oder ich wende es gleich richtig an, wobei dies auch seiten sind, die ohne JavaScript gar nicht möglich wären, und auch nicht von usern angeschaut werden, die JavaScript deaktiviert haben (was ich eigendlich immernoch nicht so ganz verstehen kann, wieso......)


14.

An Lord:

Ich habe auch mal deinen Code getestet.

Leider funktionierte er nicht auf Firefox... (??) nur auf IE.


15.

Zitat:
dherr postete
Ich habe auch mal deinen Code getestet.
Leider funktionierte er nicht auf Firefox... (??) nur auf IE.
hmmm... ich hab ihn eigentlich selbst nur auf dem firefox getestet. und da funktioniert er. habe jetzt auchmal im IE und Opera geschaut. IE läuft, opera - nur wenn das bild schon im cache ist, der öffnet die pop-ups ja eh so komisch in nem tab.
hast du vlt. mit der grafik url was falsch gemacht? ich poste hier nochmal ein live beispiel mit dem ich's getestet habe:
Code:                   In Zwischenablage kopieren (nur IE)
5">

aha, und an was es noch liegen könnte, bei var popup = sieht man in meinem beispiel einen umbruch, der sollte eigentlich nicht sein und entsteht nur durch die länger der zeile...


///edit: merke gerade, dass es wirklich nicht richtig geht, sobald das bild nicht im cache ist schafft er es nicht zu vergrössern :-(


16.

also alternative mit php, das geht nun aber wirklich ganz bestimmt ;-)
du öffnest mit javascript ein popup mit einer php datei z.B. "picviewer.php" und übermittelst dieser datei noch eine $_GET-variable mit dem pfad zum bild. also sieht der aufruf ungefähr so aus:
Code:                   In Zwischenablage kopieren (nur IE)
6">

dann im picviewer machst du erstmal eine normalen html code. im body bereich machst du sowas hier:
Code:                   In Zwischenablage kopieren (nur IE)
7">

....danach gehts normal mit </body></html> weiter...

infos:
http://www.selfphp.info/funktionsreferenz/image_funktionen/getimagesize.php

sorry für die schlechten javascript beispiele :)
-geetz Lordi-

PS: falls dir das alles langsam zu blöd wird kannst du auch hier den coden benützen. auch ne ganze geile lösung. allerdings kann ich dir dazu keine erklärung abgeben. code übernehemen und gut is :) >> http://www.huddletogether.com/projects/lightbox/


17.

Nein, zu blöd wird mir es nicht! Ich bin ja auch noch beim Lernen... Es ist sehr interessant, was für Möglichkeiten sich so auf tun. Ich bin auch einer der gern mal was anderes probiert, werd alle die Vorschläge mal testen...


18.

Hallo zusammen,

jetzt habe ich mich zu folgender Javascript-Variante entschieden:

Zwei Funktionen:

Code:                   In Zwischenablage kopieren (nur IE)
8">

Mit PIC als Pfad und Filename des Bildes und TITEL ein Text der in der Titelleiste des Popups stehen soll.

Mich stören noch etwas diese numerischen Konstanten beim Resize zum Anpassen der Fenstergröße...
Gibt es irgend ne Möglichkeit, dass man das noch vermeiden kann?

Gruß - dh


Hier gehts zum Orginal Eintrag "popup mit bild" im Forum
 
phpforum.de | Impressum | Handy Bundles