Popup größe automatisch anpassen

Patrick Weinberg

hallo zusammen, ich benutze folgenden code um bilder in einem popup anzeigen zu lassen.

Code

<script type="text/javascript"> 
function popUp1(bildurl) 
{ 
   props="locationbar=no,menubar=no,scrollbars=no,resizable=yes,status=no,width=660,height=450"; 
   fenster = window.open(bildurl,"", props) 
   fenster.focus(); 
} 
</script>

wie kann ich das so einstellen, das sich das geöffnete popup automatisch an die größe des zu ladenden bildes anpasst?
außerdem habe ich zwischen dem fensterrand vom popup und dem bild immer nen weißen zwischenraum, bekommt man den auch weg?

danke

driver

bei dem rand bin ich etwas überfragt...

aber des anpassen funkt nicht automatisch. du müsstest höchstens vom link
aus noch die höhe und breite übergeben. momentan gibst ja nur die bildurl
mit, und da dann eben noch heigth und width anfügen...

Adler313

Hallo,
schließe mich mal an :).

Ich habe bereits hier etwas dazu gefunden, schaff es allerdings irgendwie nicht die Java-Scripts einzubinden :(.

Auf der Seite ist es so, dass es zwei Dateien "popup.js" und "add_event.js" gibt, die extern auf dem Server gespeichert sind gibt.

Nun würde ich das ganze aber gern für meine Ebay-Bilder hernehmen und natürlich habe ich nicht die möglichkeit das bei Ebay nochmal extra zu speichern, bzw. macht das in dem Fall ja auch eigentlich überhaupt keinen Sinn - deshalb würde ich die Beiden Scripte gern direkt mit in die Beschreibung reinpacken, was aber leider noch nicht so funktioniert wie ich mir das vorstelle :?.

Hier mal das Ergebnis meines Versuches:

HTML

<script type="text/javascript">
    // 
*/


( function() {
if (typeof window.addEvent == 'undefined'){
	// Name der lokalen Eventhandlerliste des Objektes
	var evtHnd = '__EVT__HANDLER__'; 


	window.addEvent = function () {
		var obj, name, func;

		// Parameterauswertung
		var args = arguments;
		if( args.length == 1 && typeof args[0] == 'object') {
			// Der Parameter ist ein Objekt
			obj = args[0]['obj']; name = args[0]['evt']; func = args[0]['func'];
		} else {
			// Parameterliste
			obj = args[0]; name = args[1]; func = args[2];
		}
		// Defaultwerte 
		if(!obj) obj = window;
		if(!name) name = 'load';
		if( typeof func != 'function') return alert('Keine Funktionsreferenz!');

		// Die Objekte, die die Handler aufnehmen vorbereiten.
		if(!obj[evtHnd]) obj[evtHnd] = {};
		if(!obj[evtHnd][name]) obj[evtHnd][name] = [];
		// Die Funktion abgespeichern. 
		obj[evtHnd][name].push( func );

		// Den Handler des Objektes registrieren
		// Der Rückgabewert des events ist immer der Rückgabewert der
		// zuletzt registrierten Funktion
		if(!obj['on' + name])  obj['on' + name] = function(e)
		{
			if(!e) e = window.event;
			if(!obj[evtHnd] || !obj[evtHnd][e.type]) return false;
			var ret = false;
			for(var i = 0; i < obj[evtHnd][e.type].length;i++) 
			ret = obj[evtHnd][e.type][i].call(obj, e);
			return ret;
		};
		return true;
	};
	window.removeEvent = function (o, n, f) {
		if(o[evtHnd] && o[evtHnd][n]) {
			for(var i = 0; i < o[evtHnd][n].length;i++) 
				if(o[evtHnd][n][i])  {
					o[evtHnd][n].splice(i, 1);
					return true;
				}
			}
		}
	}; // ENDE --> if (typeof addEvent == 'undefined')
}())
</script>












<script type="text/javascript">
    // 
*/
///////////////////////////////////////////////////////////
// Globale Definitionen
var popup_bgColor = '#fff';
var rahmen        = '1px solid black';
var abstand_w      = 1;
var abstand_h      = 1;
var center_popup  = true;
var popup_close   = 'click'; // Mögliche Werte: 'blur', 'click', ''


addEvent(window, 'load', function() {
	var all = document.links;
	for(var i = 0; i < all.length; i++) {
		if(all[i].className && all[i].className.indexOf('popup') > -1 )  {
			all[i].onclick = function () { showBild(this); return false;};
		}
	}
});


///////////////////////////////////////////////////////////
// showBild(a, name) - die Hauptfunktion.
var default_site = window.opera ? '' : '';
function showBild(a) {
	 if(!a.target) a.target = "BildFenster";
    var default_width   = 400;
    var default_height  = 200;


    if(popup_close == 'blur' || !showFenster || showFenster.closed)
    showFenster = popUp(default_site, a.target, default_width, default_height);


    showFenster.document.open();
    showFenster.document.write( getHTML(a.href, a.title || a.alt || 'PicPopup') );
    showFenster.document.close();


    var img = new Image();
    img.ready = false;
    img.onload = function() { fitWin(this, showFenster); };
    img.src = a.href;
    if(document.all && img.complete) fitWin(img, showFenster);


    return false;
}
///////////////////////////////////////////////////////////
// fitWin(Image, window) - wird aus dem Popup aufgerufen.
function fitWin(i, win) {
	win.focus();
	if(i.ready) return;
	i.ready = true;
	var w = i.width;
	var h = i.height;
	var w_s = getWinSize(win);
	var r = 2 * parseInt(rahmen);

	win.resizeBy((w - w_s.width + ( 2 * abstand_w) + r), (h - w_s.height + ( 2 * abstand_h) + r) );
	if(center_popup) {
		w_s = getWinSize(win);
		win.moveTo( (screen.width - w_s.width) / 2, (screen.height - w_s.height) / 2 );
	}
}


/////////////////////////////////////////////////////////////////////
// getHTML(bild, titel, farbe)
function getHTML(src, title, bgcolor) {
	if(!title) title = 'kein Titel';
	if(!bgcolor) bgcolor = popup_bgColor;
	var NL = "\n";
	var text = '<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01\/\/EN" "http:\/\/www.w3.org\/TR\/html4\/strict.dtd">\n'
	+ '<html>\n<head>' + NL
	+ '<title>' + title + '<\/title>' + NL
	+ '<style type="text/css">' + NL
	+ 'body{margin:0;padding:0;overflow:hidden;' + NL
	+ 'background-color:' + popup_bgColor + ';' + NL
   + '}' + NL
   + 'img{padding:0;'
   + (rahmen ? 'border:' + rahmen + ';'  : '')
   + 'margin-top:' + abstand_h +'px;' + NL
   + 'margin-bottom:' + abstand_h +'px;' + NL
   + 'margin-left:' + abstand_w +'px;' + NL
   + 'margin-right:' + abstand_w +'px;' + NL
   + '}\n' + NL
   + '<\/style>' + NL
   + '<\/head>' + NL
   + '<body'
   + (popup_close.toLowerCase() == 'blur' ? ' onblur="self.close();"' : '')
   + '>'
   + '[img]' + src + '[/img]' + NL
   + '<\/body><\/html>'
   ;
   return text;
}
/////////////////////////////////////////////////////////////////////
// Ein popup öffnen
function popUp(url, fname, w, h) {
	var tmp = new Array();
	tmp[tmp.length] = 'resizable=yes';
	tmp[tmp.length] = 'scrollbars=no';
	if(w) tmp[tmp.length] = 'width=' + w;
	if(h) tmp[tmp.length] = 'height=' + h;
	return window.open(url, fname, tmp.join(','));
}
////////////////////////////////////////////////////////////
// getWinSize(window)
function getWinSize(win) {
	if(!win) win = window;
	// IE: Quirks- oder Standardmode
	var body = (win.document.compatMode && win.document.compatMode == "CSS1Compat") ? 
		win.document.documentElement : 
		win.document.body || null
	;
	return {
	width: (win.innerWidth || body.clientWidth),
	height: (win.innerHeight || body.clientHeight)
	};
}
var showFenster = null;
/////////////////////////////////////////////////////////////////////
// ... und am schluss alle Fenster schliessen.
window.onunload = function () {
	if(showFenster && !showFenster.closed) showFenster.close();
}
</script>






[url='http://img518.imageshack.us/img518/2434/gronm4.jpg'][img]http://img518.imageshack.us/img518/4340/kleinde3.jpg[/img][/url]

Alles anzeigen

Ich habe den Code über diese Seite getestet, wobei es dann leider immer so war, dass das Bild überhaupt nicht als Popup, sondern einfach im selben Fenster aufging .

jojo87

Ich glaube kaum, dass Ebay js zulässt, oder?

Adler313

nein, Java ist nicht generell unzulässig :).
Unzulässig sind:

- Skripte, die vertrauliche Mitgliederdaten wie zum Beispiel das Passwort abfragen.
- Skripte, die den Benutzer von eBay zu anderen Internet-Angeboten weiterleiten.
- Skripte, die Inhalte außerhalb der Artikelbeschreibung überschreiben.
- Skripte, die extern liegende Skripte oder Seiten aufrufen oder Inhalte an diese Seiten senden (z.B. über JavaScript Includes oder Iframes).
- Skripte, die Cookies setzen oder auslesen.
- Skripte, die automatisch Pop-up-Fenster oder MS-Assistenten generieren.
- Skripte, durch die automatisch aktive Inhalte von anderen Computern heruntergeladen werden (ausgenommen ist Macromedia Flash).
- Skripte, mit denen Einträge in der Registry geändert werden oder Skripte, die auf eine andere Art Daten auf die Festplatte des Benutzers schreiben.
- Skripte, über die automatisch Daten an andere Skripte von eBay gesendet werden.

Quelle: http://pages.ebay.de/help/sell/skri…lfe.html#link02

Es sind nur Script verboten, die automatisch ein Popup öffnen, solche bei denen man erst auf ein Bild klicken muss sollten also generell erlaubt sein
und die anderen Verbote, wie z.B. vertrauliche Daten abfragen, Registery ändern usw. sollte zumindest meiner Meinung nach sowiso auf diesen Script nicht zutreffen...

synaptic

zum thema des gastes:
drivers möglichkeit erscheint auch mir die einzig funktionierende.. du musst im link die entsprechende größe übergeben, da javascript nicht daten aus einem ordner raussuchen kann und auch nicht die metadaten einer datei (also größe, autor, erstellungsdatum, usw) auslesen kann...

die andere möglichkeit wäre alle daten in ein array zu speichern und dementsprechend dann die einzelnen indizes des entsprechenden arrays auszulesen.

ich weiß net obs mit ner if-anweisung oder nem switch geht , könnte aber auch klappen, nur is des dann urig lang das script.

poste mal bitte hier die dateinamen und urls von 3 verschieden großen bildern (können auch 4 bis 6 sein^^)
dann schau ich mal ob man die größe auch anders ändern kann.
beeille dich, ich hab heut noch etwas zeit dafür!

@adler:

Zitat von Adler313

nein, Java ist nicht generell unzulässig :).
......

java ist NICHT javascript
das eine ist eine objektorientierte programmiersprache(JAVA) das andere eine objektbasierende scriptsprache(javascript)ich finds schade, daß du keinen eigenen thread eröffnet hast für dein problem....
das eigentliche problem von patrick weinberg wird so irgendwie in den hintergrund verdrängt

edit:das problem ist nicht ganz so trivial, wie es scheint...!
du willste ja auch die ränder weghaben....
also um es mal kurz zu erklären, man kann nicht auf ein "document" im fenster zugreifen, wenn man direkt ein bild als url angibt, ich werd das script gleich mal etwas modifizieren, daß da nen document drin ist, so kann man auch styles einfügen und bilder ohne rand zentrieren...(hoffe ich)wenn ich fertig bin schreib ich nen neues posting in diesem thread, da das hier sonst zu unübersichtlich wird!
mein beispielcode wird dann deine, drivers und meine variante enthalten...

synaptic

so, hier mal die lösung zu deinem problem:

HTML

<html>


<head>
  <title></title>
    <script type="text/javascript"> 
	var stylestring="<style type='text/css'>body{margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;}</style>";
function popup1(bildurl) 
{
   props="locationbar=no,menubar=no,scrollbars=no,resizable=yes,status=no,width=660,height=450"; 
   bildtagpart1="<img src='";
   bildtagpart2="'>"; 
   bildtag= bildtagpart1 + bildurl + bildtagpart2;
   fenster = window.open("","", props) ;
   fenster.document.open();
   fenster.document.writeln("<html><title>www.deinedomain.de</title><head>");
   fenster.document.writeln(stylestring);
   fenster.document.writeln("</head>");
   fenster.document.writeln(bildtag);
   fenster.document.close();
   fenster.focus(); 
} 


function popup2(bildurl, height, width) 
{
   props="locationbar=no,menubar=no,scrollbars=no,resizable=yes,status=no,height=" + height +",width=" + width +"\""; 

   bildtagpart1="<img src='";
   bildtagpart2="'>"; 
   bildtag= bildtagpart1 + bildurl + bildtagpart2;
   fenster = window.open("","", props) ;
   fenster.document.open();
   fenster.document.writeln("<html><title>www.deinedomain.de</title><head>");
   fenster.document.writeln(stylestring);
   fenster.document.writeln("</head>");
   fenster.document.writeln(bildtag);
   fenster.document.close();
   fenster.focus(); 
}


function popup3(bildurl) {


  var height;
   var width;

   switch(bildurl){
    case "http://home.arcor.de/synaptic/t1.jpg":
   height=416;
   width=640;
   break;

    case "http://home.arcor.de/synaptic/menschen213.jpg":
   height=557;
   width=399;
   break;

    case "http://home.arcor.de/synaptic/der-begriff-erdnuss.jpg":
   height=374;
   width=512;
   break;


   }
   props="locationbar=no,menubar=no,scrollbars=no,resizable=yes,status=no,height=" + height +", width=" + width; 
   bildtagpart1="<img src='";
   bildtagpart2="'>"; 
   bildtag= bildtagpart1 + bildurl + bildtagpart2;
   fenster = window.open("","", props) ;
   fenster.document.open();
   fenster.document.writeln("<html><title>www.deinedomain.de</title><head>");
   fenster.document.writeln(stylestring);
   fenster.document.writeln("</head>");
   fenster.document.writeln(bildtag);
   fenster.document.close();
   fenster.focus(); 
} 
</script>
</head>
<body>
[url='javascript:popup1('http://home.arcor.de/synaptic/t1.jpg');']deine methode_link1[/url]


[url='javascript:popup1('http://home.arcor.de/synaptic/menschen213.jpg');']deine methode_link2[/url]


[url='javascript:popup1('http://home.arcor.de/synaptic/der-begriff-erdnuss.jpg');']deine methode_link3[/url]


<hr />
[url='javascript:popup2('http://home.arcor.de/synaptic/t1.jpg', 416, 640);']drivers methode_link1[/url]


[url='javascript:popup2('http://home.arcor.de/synaptic/menschen213.jpg', 557, 399);']drivers methode_link2[/url]


[url='javascript:popup2('http://home.arcor.de/synaptic/der-begriff-erdnuss.jpg', 374, 512);']drivers methode_link3[/url]


<hr />
[url='javascript:popup3('http://home.arcor.de/synaptic/t1.jpg');']meine idee_link1[/url]


[url='javascript:popup3('http://home.arcor.de/synaptic/menschen213.jpg');']meine idee_link2[/url]


[url='javascript:popup3('http://home.arcor.de/synaptic/der-begriff-erdnuss.jpg');']meine idee_link3[/url]




</body>
</html>

Alles anzeigen

das ganze sieht dann so aus:http://home.arcor.de/synaptic/hilfe/variable_pops.html

wie du siehst funktioniert drivers möglichkeit genausogut, wie meine case-variante, nur ist bei drivers variante definitiv weniger code notwendig...
es gibt natürlich auch die möglichkeit die ganzen folgenden bilder im gleichen popup zu öffnen...

Adler313

synaptic: Vielen Dank für deine Hilfe :).
Deine Lösung sieht grundsätzlich schon mal gut aus 8).
Allerdings ist mir aufgefallen, das du bei allen 3 Varianten jeweils konkret die Größe mit reingeschrieben hast - schöner wäre es, wenn man das nicht bräuchte - für ein paar Bilder ist das sicherlich eine gute Lösung, wenn man aber immerwieder neue Bilder hat, ist es schon recht aufwendig und es könnte auch leicht zu Fehlern kommen...

Zitat

ich finds schade, daß du keinen eigenen thread eröffnet hast für dein problem....
das eigentliche problem von patrick weinberg wird so irgendwie in den hintergrund verdrängt

Hmm, ich hab auch schon darüber nachgedacht ein neues Thema aufzumachen, aber letztednlich habe ich ja ganz genau exakt das selbe Problem wie patrick weinberg.
Ich habe ürsprünglich sogar exakt das selbe Script, wie er in seinem Anfangspostin stehen hat verwendet und habe mir genau wie er auch die Frage gestellt, wie ich das so hinbekommen kann, dass sich die Größe des Popups automatisch an die größe des zu ladenden bildes anpasst .
Dannach bin ich aber nicht so wie er hergegangen und hab mein Problem gleich hier reingeschrieben, sondern hab erstmal google angeschmissen und bin nach einigem Suchen auf das Script, welches ich hier gepostet habe gestoßen .

Ich muss jetzt aber nicht unbedingt eine Lösung haben, die sich auf das bezieht, was ich gepostet habe - denn meine eigentliche Fragestellung lautet immernoch: "wie kann ich das so einstellen, dass sich das geöffnete popup automatisch an die größe des zu ladenden bildes anpasst?"

synaptic

Zitat von synaptic

drivers möglichkeit erscheint auch mir die einzig funktionierende.. du musst im link die entsprechende größe übergeben, da javascript nicht daten aus einem ordner raussuchen kann und auch nicht die metadaten einer datei (also größe, autor, erstellungsdatum, usw) auslesen kann...

es gibt keine möglichkeit die daten der höhe und breite aus der datei auszulesen....!

Adler313

Zitat

es gibt keine möglichkeit die daten der höhe und breite aus der datei auszulesen....!

Und wie erklärst du mir dann bitte, warum das Java-Script von der Seite "Javascript ist Toll" funktioniert?!
Hat das dann ne gut funktionierende Glaskugel integriert oder wie ?!

Teste mal folgendes mit dieser Testseite und du wirs sehen das es funktioniert .
(die Bilder stammen von mir und ich habe auch nirgends eine Größenangabe eingefügt)
einziges Problem bei der Sache ist halt nur, dass das eigentliche Script noch auf der Javasript-ist-toll-Seite liegt, was natürlich nicht so bleiben kann :?.

Code

<script type="text/javascript" src="http://javascript.jstruebig.de/js/add_event.js"></script>
<script type="text/javascript" src="http://javascript.jstruebig.de/js/popup.js"></script>




[url='http://img518.imageshack.us/img518/2434/gronm4.jpg'][img]http://img518.imageshack.us/img518/4340/kleinde3.jpg[/img][/url]

driver

Code

var default_width   = 400;
    var default_height  = 200;

da wird ja auch ne höhe festgelegt....

synaptic

aßerdem kann man jedes bild auch in ner bestimmten größe anzeigen, will sagen nen bild mit 1024 x 768 kann ich auch in 600 x 800 zeigen...

wenn du konkrete fragen in bezug zu javascript hast, schreib mich per pn an

Adler313

Zitat

da wird ja auch ne höhe festgelegt....

Hmm, dass das drin steht stimmt schon, aber es wirkt sich nicht auf das letztendlich fertige Popup aus - was ich mir ehr vorstellen könnte ist, dass das die Größe des ursprünglichen Popups angibt (wenn man auf ein Bild klickt kommt ein Popup, das eigentlich immer gleich groß ist - erst sobald das Bild komplett geladen ist passt sich das Popup nochmal an die tatsächliche Größe des Bildes an...)

Ich habe gerade nochmal mit vollkommen unterschiedlich goßen Bildern getestet:

Code

<script type="text/javascript" src="http://javascript.jstruebig.de/js/add_event.js"></script>
<script type="text/javascript" src="http://javascript.jstruebig.de/js/popup.js"></script>






[url='http://img177.imageshack.us/img177/2762/gro1ui7.jpg'][img]http://img177.imageshack.us/img177/2762/gro1ui7.th.jpg[/img][/url]</p>






[url='http://img175.imageshack.us/img175/407/gro4xu4.jpg'][img]http://img175.imageshack.us/img175/407/gro4xu4.th.jpg[/img][/url]</p>






[url='http://img177.imageshack.us/img177/5259/gro2rz0.jpg'][img]http://img177.imageshack.us/img177/5259/gro2rz0.th.jpg[/img][/url]</p>






[url='http://img176.imageshack.us/img176/1953/gro6hn1.jpg'][img]http://img176.imageshack.us/img176/1953/gro6hn1.th.jpg[/img][/url]</p>






[url='http://img518.imageshack.us/img518/2434/gronm4.jpg'][img]http://img518.imageshack.us/img518/4340/kleinde3.jpg[/img][/url]</p>

Alles anzeigen

und bin wieder zu dem Ergebnis gekommen, dass es immer so dargestellt wird, wie ich es mir vorstelle, egal ob es nun sehr groß, sehr klein, schmal oder breit ist, das Popup ist immer genauso groß wie das Bild.

synaptic: Natürlich kann man Bilder je nach Belieben auch in einer bestimmten, vordefinierten Größe anzeigen, dass ist aber bei dem was ich hier gepostet habe devinitiv nicht der Fall - es passt sich nicht das Bild an das Popup an, sondern so wie es sein soll das Popup an das Bild!
Wenn ich ein sehr kleines Bild verlinke, dann kommt auch nur ein sehr kleines Popup in der Mitte vom Bildschirm und wenn ich ein sehr großes Bild verlinke, dann kommt auch ein großes Popup, welches fast den kompletten Bildschirm braucht usw.

Ich kann euch jetzt nicht erklären, warum und weshalb das jetzt funktioniert (dazu hab ich einach zu wenig Ahnung von der ganzen Materie ), aber ich kann devinitiv sicher sagen, dass es funktioniert.

Ich muss dazu vielleicht aber auch noch sagen, dass sich meine bisherigen Tests auf Firefox beziehen.
Gerade eben habe ich auch mal mit dem Internet Explorer 7 getestet und musste feststellen, dass es dort nicht ganz so perfekt wie im Firefox funktioniert - bei den kleineren Bildern scheint es auch zu klappen, aber bei den größeren wird das Popup leider kleiner als das Bild darin .

Didi

Zitat von synaptic

es gibt keine möglichkeit die daten der höhe und breite aus der datei auszulesen....!

schonmal was von PhP und getimagesize
gehört ?
Beispiel

Das ganze könnte dann so aussehen..

PHP

<?php	$groesse = getimagesize('galerie/popup/austattung/Austattung1.jpg');
	echo'<a class="lightit" href="galerie/popup/austattung/Austattung1.jpg" onclick="return foto('.$groesse[0].','.$groesse[1].',this.href)">
	[img]thumbnails/austattung1.jpg[/img]</a>';?>

Tags