[PHP/JS] Imagegröße an JS Popup übergeben

[The Prophet]

Moin,

Da ich meinen alten Thread nicht überlaufen lassen wollte hier eine weitere Frage. Alle von mir erwähnten Elemente beziehen sich darauf. Also ich suche eine Möglichkeit die Größe des Bildes welches in der DB (Longblob) gespeichert ist an ein Javascript zu übergeben. Das Javascript soll dann also genauso groß sein wie das eigentlich Bild. Ich habe dazu zwei Dateien.

content.php
--> Ausgabe der Daten, Popup Link zum Bild, etc
--> Linkformat image.php?id=1

image.php
--> liefert mir das Bild

$data = mysql_result($result,0,"bin_data") or die(mysql_error());
$type = mysql_result($result,0,"filetype") or die(mysql_error());
header("Content-type: $type");
echo $data;

 

[quicksilver]

Ich habe das bei mir so gemacht

$picinfo = getimagesize($pic);

Damit hast du alle infos des bildes (grösse usw) in den Variablen. Diese kannst du dann einfach übergeben wie z.b. $picinfo["0"] (Bildbreite)


mfg

 

[</Life>]

Wie wärs mit <script type="text/css" src="imagesize.php?id=1"></script>?

 

[The Prophet]

Wie wärs mit <script type="text/css" src="imagesize.php?id=1"></script>?

Ich hab mal wieder überhaupt keinen Plan was du mir sagen willst
@ quicksilver

Danke werde ich mal testen.

/Edit
Ich dachte mir das so:

$query = ("SELECT * FROM $table ORDER BY id DESC LIMIT $start,$eintraege_pro_seite");
$data = mysql_result($query,0,"bin_data") or die(mysql_error());

$daten = mysql_query($query) or die(mysql_error());
while($datensatz = mysql_fetch_array($daten)) 
	{
	$size = getimagesize($data) or die(mysql_error()); 
	$width = $size[0];         
	$height = $size[1];	
// Ausgabe Daten
}

Allerdings erhalte ich immer mysql_result(): (supplied argument is not a valid MySQL result resource ) Fehler. Die Anfrage ist aber richtig.

 

[[UPS]Erazor]

Meine Annahme:
Ich gehe davon aus, dass du mit "ein Javascript" ein Popup Fenster meinst, welches dann beim Klick auf einen Link erscheinen soll und ein Bild beinhaltet. Soweit richtig?

Mein Vorschlag:
Du speicherst beim Upload die Bildgröße in extra Feldern (z.B. height, width) gleich mit. Dann brauchst du nur einen Aufruf von getimagesize().

Beim Link in content.php machst du folgendes:

<a onclick="window.open('image.php?id=<?=$img_id?>', 'imagewindow', 'height=<?=$height?>,width=<?=$width?>');">Link zu Bild <?=$img_id?></a>

Wenn du das nicht machst, musst du beim Aufruf der Seite alle Bilder aus der DB laden, die Bildgröße holen und in deine Ausgabe schreiben.
Die Height- und Width-Angaben in window.open solltest du noch erweitern, da damit nur die äußere Fenstergröße gemeint ist. Du musst also noch die Titelleiste und diverse Ränder mit dazunehmen. Sei da lieber ein wenig großzügiger, damits auf möglichst vielen Rechnern nach was aussieht.

Ansonsten könntest du dir die Bildgröße auch on the fly holen (CB.de hat bei der Bilderansicht ja eine Größenanpassung des umgebenden Fensters drin, vielleicht wär das eher was für dich).

Anmerkung zum Edit:
mysql_result erwartet keine Query, sondern ein Result.
Du musst also sowas machen (bzw. bei mehreren Ergebnissen dann das mysql_result() in einer Schleife aufrufen):

$result = mysql_query('SELECT * FROM bilder');
$data = mysql_result($result, 2);

(vgl. auch www.php.net/mysql_result)

so far, erazor

 

[The Prophet]

Ok danke, soweit ist es nun klar.

$query = ("SELECT * FROM $table ORDER BY id DESC LIMIT $start,$eintraege_pro_seite");
$daten = mysql_query($query) or die(mysql_error());
while($datensatz = mysql_fetch_array($daten)) 
	{
	$result = mysql_query("select bin_data from binary_data"); 
	$data = mysql_result($result,2) or die(mysql_error());
	$size = getimagesize($data) or die(mysql_error()); 
	$width = $size[0];         
	$height = $size[1];	

// Ausgabe Daten...
<a href="#" onClick="NewWindow=window.open('image.php?cat=pkw&id=<?php echo $datensatz[id]; ?>', 'Großbild', 'toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=no,resizable=yes,width=<?php $size[0]; ?>,height=<?php $size[1]; ?>,left=xxx,top=yyy'); return false;">Bild</a>

Allerdings liefert mir nun getimagesize folgendes...[function.getimagesize]: failed to create stream: No such file or directory.

Irgendwie hab ich das dumme Gefühl das GD Lib nur Sachen greifen kann die im Filesystem gespeichert sind.

Kannst du mir mehr zu dem Erzählen wie es CB macht?

 

[[UPS]Erazor]

Müsst ich selbst mal nachschauen. Prinzipiell weiß Steffen es aber am besten (hat er schließlich gecodet).

edit:
getimagesize geht nur im filesystem. An allem anderen verzweifle ich momentan. Es scheint keine Möglichkeit zu geben aus den Bilddaten eine PHP-Bild-Darstellung (wie PHP intern ein Bild darstellt) zu erzeugen.
Das ist aber ansicht auch wurst, wenn du gleich beim Speichern (da ist das Bild noch eine Datei) diese Größen abfragst und in die DB mit dazu schreibst.

 

[The Prophet]

Das müsste es sein:

function popup_resize( width, height) {
	if ( width == 0 && height == 0 ) {
		width = document.getElementById('picture').width + 60;
		if ( width < 450 ) width = 450;
		height = document.getElementById('picture').height + 215;
	}
	if ( screen.availWidth > width ) {
		moveX = (screen.availWidth-width)/2;
	} else {
		width = screen.availWidth;
		moveX = 0;
	}
	if ( screen.availHeight > height ) {
		moveY = (screen.availHeight-height)/3;
	} else {
		height = screen.availHeight;
		moveY = 0;
	}
	window.resizeTo( width, height );
	window.moveTo( moveX, moveY );
}

/edit
Wird wohl das beste da ich mit dem JS Script momentan auch nicht weiter komme.
Bzw. ich nicht wüßte wie ich das ganze einflechten kann.

 

[[UPS]Erazor]

Aber auch da muss die Bildgröße bekannt sein, sehe ich das richtig?

 

[The Prophet]

Hab jetzt die Weite und die Höhe einfach mit in die DB geschrieben geht soweit ganz gut. Bei der Ausgabe habe ich auf die Höhe noch 40 pixel und 30 pixel auf die Weite addiert. Schaut leider in jedem der 3 Hauptbrowser ein wenig anders aus . Kann man eigentlich auch die Titelanzeige noch setzen? In der image.php kann ich das leider nicht machen da ich schon das Bild per Header sende.

 

[</Life>]

Ich hab mal wieder überhaupt keinen Plan was du mir sagen

Ähm.. Ich weiss nicht genau, was du machen willst, aber wenn du die Grösse des Bildes im Script haben willst kannst du dir ein Script schreiben, das validen JavaScript-Code ausgibt und dieses Script dann mit <script src=> includen...

Und es muss natürlich text/javascript heissen -.- (thx @ [UPS]Erazor, der mich darauf aufmerksam gemacht hat)

 

[[UPS]Erazor]

Für eine Titelanzeige kannst du wie folgt vorgehen:

1. (sauberere Lösung)
Du baust noch ein Script, welches "um das Bild herum" eine HTML Seite anzeigt.
Darin kannst du dann Titel, evtl. Zierrahmen, Kommentare und sonstiges reinbauen.

2. (quick & dirty)
Beim Klick auf einen Bilder-Link rufst du folgende Funktion auf (anpassungsbedürftig, nicht getestet)

function openPicWindow(image,title,height,width) {
    var myWindow;
    myWindow = window.open(image,'','height='+height+",width='+width+' [sonstige Optionen]');
    myWindow.title = title; //das setzt den Titel des soeben erstellten Fensters. 
}

Probiers mal aus.

 

[The Prophet]

Morgen,

ich hab ja nicht viel Ahnung von JS aber irgendwie funktioniert das alles net

<script src=text/javascript>
function openPicWindow(image,title,height,width) {
    var myWindow;
    myWindow = window.open('image','Bild','height=+height+,width=+width+','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,');
myWindow.title = 'Bild'; //das setzt den Titel des soeben erstellten Fensters. 
myWindow.document.write("<html><head><title>Bildanzeige</title></head>"); //Weiterer Versuch

}
</script>

Weder window.title noch window.document.write scheint zu funktionieren. Es ändert sich nix.
Am Aufruf wird es ja nicht liegen.

<a href="#" onClick="openPicWindow=window.open('image.php?cat=pkw&id=<?=$datensatz[id]?>','Bild','width=<?=$datensatz[im_width]+=30?>,height=<?=$datensatz[im_height]+=30?>'); return false;">

 

[[UPS]Erazor]

Hab gerade nochmal in SelfHTML zum Thema Javascript window nachgeschaut. Das hat garkeine title Eigenschaft
Probier mal

myWindow.document.title = "bla"

Sollte das auch nicht funktionieren solltest du noch eine HTML Seite um das Bild herum generieren lassen, die dann den korrekten Titel etc. enthält (die von mir vorgeschlagene "saubere Lösung").

document.write sollte nicht funktionieren, weil du kein HTML-Document hast sondern nur ein Bild. Deshalb zweifle ich auch daran, ob so ein Bild-Document überhaupt einen title hat. Versuchs einfach mal.

edit:
Beachte die stelle nach +width+

<script src=text/javascript>
function openPicWindow(image,title,height,width) {
    var myWindow;
    myWindow = window.open('image','Bild','height=+height+,width=+width+',toolbar=no,location=  no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,'); // beachte die Stelle nach +width+
myWindow.title = 'Bild'; //das setzt den Titel des soeben erstellten Fensters. 
myWindow.document.write("<html><head><title>Bildanzeige</title></head>"); //Weiterer Versuch

}
</script>

 

[The Prophet]

Tag,

also document.title geht leider auch nicht.
Den Fehler hinter +width+ hab ich korrigiert.
Wie meinst du das mit dem Dokument herum. Die Eigenschaften des Dokumentes per JS mitgeben oder ein Dokument was auf dem Filesystem liegt.

 

[[UPS]Erazor]

Nein, ein weiteres PHP Script, das z.B. imagepopup.php heißt, mit etwa dem Inhalt:

<html>
 <head>
   <title><?=$img_title?></title>
 </head>
<body>
 <img src="image.php?id=<?=$id?>">
</body>
</html>

Du solltest es erweitern um z.B. den Titel des Bildes aus der Datenbank zu ziehen oder den Titel des Bildes über dem Bild als Text nochmal anzuzueigen. Das kriegst du aber alleine hin.

 

[quicksilver]

das er dir bei dem image size eine error meldung auswirft liegt dadran das er die datei die du angibst nicht findest. Da hast du wohl irgendwas mit dem pfad falsch gemacht. Der sollte schon in der Datenbank richtig stehen

 

[The Prophet]

Is klar das er keine Datei finden kann weil keine Datei vorhanden ist. Die Datei wird nur im Browser angezeigt weil der Header mit den Informationen gesendet wird. Die Imagesize kann ich daher auch nicht abfassen.

@ Erazor

das isses Teste ich dann mal

 

[The Prophet]

So ich muss nochmal fragen klappt alles nicht so wirklich wie ich mir das vorstelle mit dem JS Script.

function openPicWindow(image,image,height,width) {
    var myWindow;
    myWindow = window.open('image','image','height=+height+,width=+width+','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');
}

Problem ist das die Eigenschaften wie toolbar, status etc. völlig ignoriert werden. Das die Werte existent sich weiß ich allerdings funktioniert es bei mir nicht. Auf yes gesetzte Werte werden offenbar ignoriert.

 

[[UPS]Erazor]

Du kannst nicht 2 Funktionsargumente gleich nennen!

Probier mal das, achte auf die Unterschiede:

function openPicWindow(image_url,image_windowname,height,width) {
    var myWindow;
    myWindow = window.open(image_url,image_windowname,'height=' + height + ',width=' + width + ',toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');
}

Pass aber auch auf, da die Forensoftware hier nach ein Wörtern mit vielen Zeichen ein Leerzeichen einbaut.