Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

shck · 15-04-2002, 13:00

Viele kennen das Problem beim Erstellen von Foto-Alben im Internet, dass entweder für jedes Bild,
das vergrößert werden soll, eine eigene HTML-Seite erstellt
werden oder ein PHP-Server vorhanden sein muss.

Damit ist jetzt Gott sei Dank Schluss.

Das folgende Script läuft sowohl unter Netscape (getestet mit v4.75 und v6.2) als auch mit dem
Internet Explorer (v5.0 und v6.0). Das Ganze kann nicht nur von einer HTML-Seite aus aufgerufen
werden, sondern auch aus Flash heraus!

Es gibt zwar Scripts, die aus den Dateinamen der Bilder die Größe auslesen und diese dann
entsprechend verwenden, was jedoch umständlich ist, da die ganzen Dateinamen angepasst
werden müssen.

Um nun von einem kleinen Bild die größere Variante aufzurufen, ist nur der Aufruf einer Funktion
mit der Übergabe bestimmter Variablen (z.B. Dateiname, Titel vom Popup) erforderlich.

Der HTML-Code für das Bild sieht dann so aus:

Code:

<a href="javascript:shckbp('bild_002.jpg','titel','alt-text')">
<img border="0" src="bild_002_small.jpg" width="100" height="69"></a>

mit javascript:shckbp('bild_002.jpg','titel','alt-text') wird die Funktion shckbp aufgerufen.

Das Popup enthält dann das Bild „bild_002.jpg“, der Titel des Popups ist „titel“ und der Text beim
Überfahren des Bildes lautet „alt-text“.

Die Javascript-Befehle können entweder im Body- oder im Head-Bereich geschrieben werden.
Sie können aber auch mit folgendem Befehl in jede HTML-Seite integriert werden, um so „Platz“
zu schaffen (eine Script-Datei für alle HTML-Dateien):

Code:

<script language="JavaScript" src="./script.js" type="text/javascript">
</script>

Der Name und der Pfad der Script-Datei müssen dann nach den Bedürfnissen angepasst werden.

Hier der gesamte JavaScript-Bereich:

Code:

<script>
<!-- © Christian Köchy http://www.shck.de mail@shck.de -->

function shckbp(shckp,shckti,shckte)
{ var undefined;

  if (shckte==undefined)
  {shckte='';}

  if (shckti==undefined)
  {shckti='www.shck.de';}

  shcknw = window.open('', '','resizable=1');

  with (shcknw)
  {
    document.open();
    document.write('<!--\n\t© Christian Köchy\n\thttp://www.shck.de\n\tmail@shck.de\n-->\n\n');
    document.write('<title>'+shckti+'</title>');
    document.write('<meta http-equiv=\"imagetoolbar\" content=\"no\">');
    document.write('<body leftmargin=\"0\" topmargin=\"0\" marginwidth=\"0\" marginheight=\"0\"
    scroll=\"no\" onload=\"opener.shckrez(document.images[0].width,document.images[0].height)\">')
    document.write('<a href=\"javascript:self.close()\">');
    document.write('<img src=\"'+shckp+'\" border=\"0\" alt=\"'+shckte+'\">')
    document.close();
  }
}

function shckrez(x,y)
{
if (navigator.appName == 'Microsoft Internet Explorer')
{shcknw.resizeTo(x+10,y+29);}

else
{
	if(navigator.appVersion.substring(0,1) < "5")
		{shcknw.resizeTo(x,y);}
	else
		{shcknw.resizeTo(x+8,y+28);}
}

shckx=(screen.availWidth/2)-(x/2);
shcky=(screen.availHeight/2)-(y/2);
shcknw.moveTo(shckx,shcky);
}
</script>

Wir erinnern uns, dass wir mit javascript:shckbp('bild_002.jpg','titel','alt-text')
das Popup aufrufen.

Um nicht jedes Mal den Titel hinzuschreiben oder generell keinen „alt-text“ anzuzeigen,
habe ich zwei Bedingungen integriert, die es ermöglichen, bei nicht Eingabe des Titels
oder „alt-textes“ bestimmte Werte zu übernehmen.

Mit ’var undefined’ wird ‘undefined’ als Variable deklariert.

Wird zum Beispiel das Popup nur mit javascript:shckbp('bild_002.jpg') aufgerufen,
dann wird durch die Bedingungen

Code:

  if (shckte==undefined)
  {shckte='';}

  if (shckti==undefined)
  {shckti='www.shck.de';}

der Titel (www.shck.de) und der „alt-text“ (nichts - also wirklich kein Text) des Popups festgelegt.

Mit

Code:

shcknw = window.open('', '','resizable=1');
with (shcknw)
  {...}

wird ein neues Fenster (resizable=1 -> in der Größe veränderbar) geöffnet.

Mit dem document.write wird in das geöffnete Fenster geschrieben.

Code:

document.write('<body leftmargin=\"0\" topmargin=\"0\" marginwidth=\"0\" marginheight=\"0\"
scroll=\"no\" onload=\"opener.shckrez(document.images[0].width,document.images[0].height)\">')

Das bewirkt, dass das Bild nachher im Fenster ganz links erscheint. Mit dem onload-Befehl wird der
shckrez-Funktion im opener-Fenster (also das Fenster, das das Popup geöffnet hat) die Höhe und Breite des
Bildes, welches in dem Popup erscheint, übergeben.

Diese Werte sind wichtig, da die shckrez-Funktion ein „resize“ (Anpassen der Fenstergröße) ausführt.

Die if- und else-Abfrage des Internet Explorers hat den Zweck, das Popup-Fenster akkurat
anzupassen, da Netscape dies nicht so genau macht.

Mit shcknw.moveTo(shckx,shcky) wird nach vorheriger automatischer Abfrage der Bildschirmdaten
das Popup in der Mitte des Bildschirms zentriert.

Mit document.write('<a href=\"javascript:self.close()\">') erreicht man bei einem Klick auf das Bild im
Popup, dass sich das Fenster schließt.

Ich hoffe, ich konnte das Tut gut herüberbringen.

Bei Fragen einfach eine Mail an mail@shck.de.

Wenn ihr die Funktion so oder abgeändert nehmt, dann lasst bitte als kleine Gegenleistung das
Copyright im Zusammenhang mit der Funktion so stehen. Der Copyrighthinweis in der document.write-Zeile
kann aber beliebig verändert oder gelöscht werden.

Viel Spaß beim Einsparen von überflüssigen Popup-Seiten!

Das Script mit Beispielbildern gibts hier zum Download:

dassoud · 15-04-2002, 20:41

klasse!

und der nn 4.77 macht mit.

cool wäre auch, wenn immer nur ein einziges fenster aufgehen würde.

und vielleicht dem popup-fenster noch den focus geben?

super, daß auch im html-forum tutorials gepostet werden!

dassoud

shck · 15-04-2002, 20:50

Zitat:

cool wäre auch, wenn immer nur ein einziges fenster aufgehen würde.

kein problem, einfach die zeile

shcknw = window.open('', '','resizable=1');

ändern und dem fenster einem namen geben.

so in etwa:

shcknw = window.open('', 'xyz','resizable=1');

dassoud · 15-04-2002, 21:00

jau:

Code:

shcknw = window.open('', 'pop','resizable=1');

  with (shcknw)
  {
  	focus();
    document.open();
	document.write('<!--\n\t© Christian Köchy\n\thttp://www.shck.de\n\tmail@shck.de\n-->\n\n');
	document.write('<title>'+shckti+'</title>');
	document.write('<meta http-equiv=\"imagetoolbar\" content=\"no\">');
	document.write('<body leftmargin=\"0\" topmargin=\"0\" marginwidth=\"0\" marginheight=\"0\" scroll=\"no\" onload=\"opener.shckrez(document.images[0].width,document.images[0].height)\">')
	document.write('<a href=\"javascript:self.close()\">');
	document.write('<img src=\"'+shckp+'\" border=\"0\" alt=\"'+shckte+'\">')
	document.close();
	
  }
}

...nun funzt nur leider der resize nicht mehr (auch ohne focus()).

dassoud

shck · 15-04-2002, 21:06

das mit dem namen funktioniert schon.

warum möchtest du denn die focus-funktion verwenden, das popup ist doch schon beim aufrufen aktiv?

dassoud · 15-04-2002, 21:25

hm, bei mir funzt das resizen bei einem einzigen fenster nicht mehr, komisch (hatte das auch mal genauso gemacht).

den focus auf das fenster beim öffnen finde ich besser, weil manche das popup minimieren, dann auf ein neues bild klicken und sich dann wundern, warum kein fenster aufgeht.

schon oft erlebt...

dassoud

shck · 15-04-2002, 21:28

so, jetzt nochmal eine überarbeitete version mit focus und fenster-namen.

@dassoud: danke für den hinweis mit dem focus.

dassoud · 16-04-2002, 08:07

ah, schade, kann's grad nicht runterladen (firewall).

klasse, daß du dir nochmal die mühe gemacht hast!

dassoud

Toxical · 22-05-2002, 14:21

klasse sache shck, eine anregung hätte ich aber noch

kann man irgendiwe, nachdem die shckrez() ausgeführt wurde , das fenster auf resizable=no stellen?

damit man es eben danach nicht noch vergrössern/-kleinern kann, das wär cool

aber sonst is echt ne klasse Sache

shck · 22-05-2002, 15:20

das ist kein problem. schau mal in die zeile mit

Code:

shcknw = window.open('', '','resizable=1');

da kannst du resizable=1 auf 0 ändern oder ganz weg lassen.

anmerkung: ich hatte diese option als notlösung gedacht, falls mal ein exoten-browser nicht genau das fenster anpasst, dann kann man immer noch vergrößern um das bild zu sehen.

shck · 26-08-2002, 15:13

ich hab die funktion shckrez nochmal optimiert.

jetzt läuft das resizen auch mit AOL und OPERA genial sauber.

Code:

function shckrez(x,y)
{
if (navigator.appName.toLowerCase() == 'microsoft internet explorer')
  {
	
 if ((navigator.userAgent.toLowerCase().indexOf('aol')==-1) && (navigator.userAgent.toLowerCase().indexOf('opera')==-1))
     {shcknw.resizeTo(x+10,y+29);}  
    
 if (navigator.userAgent.toLowerCase().indexOf('opera')!=-1)
     {shcknw.resizeTo(x+12,y+31);}

 if (navigator.userAgent.toLowerCase().indexOf('aol')!=-1)
     {shcknw.resizeTo(x+4,y+4);}
  
  }


else
{
	if(navigator.appVersion.substring(0,1) < "5")
		{shcknw.resizeTo(x,y);}
	
	else
		{shcknw.resizeTo(x+8,y+28);}
}

shckx=(screen.availWidth/2)-(x/2);
shcky=(screen.availHeight/2)-(y/2);

shcknw.moveTo(shckx,shcky);
}

26-08-2002, 23:35

Hey, das Skript ist echt klasse... Werde es bestimmt irgendwo einbauen könnten... THX @ shck

daep · 08-10-2002, 18:37

ein super script, kann ich gut gebrauche.
lasse dein copyright hinweis drin.

<a href="javascript:shckbp('bild_002.jpg','titel','alt-text')">
<img border="0" src="bild_002_small.jpg" width="100" height="69"></a>

Pixelshocker · 10-01-2003, 10:51

echt klasse sache...

schiebts doch mal ins tut-forum...

bobby · 10-01-2003, 12:57

Zitat:

Geschrieben von Pixelshocker
echt klasse sache...
schiebts doch mal ins tut-forum...

das ist doch schon längstens im tut-forum drinn

15-04-2002, 20:41	#2 (permalink)
dassoud ontheoutsidelookingin Registriert seit: Jun 2001 Ort: Dortmund Beiträge: 5.897	klasse! und der nn 4.77 macht mit. cool wäre auch, wenn immer nur ein einziges fenster aufgehen würde. und vielleicht dem popup-fenster noch den focus geben? super, daß auch im html-forum tutorials gepostet werden! dassoud __________________ 33rpm

15-04-2002, 21:06	#5 (permalink)
shck ich bin ein guter Registriert seit: Aug 2001 Ort: Burg Beiträge: 1.235	das mit dem namen funktioniert schon. warum möchtest du denn die focus-funktion verwenden, das popup ist doch schon beim aufrufen aktiv? __________________ \___http://www.shck.de___\ .oO(3.Platz Flashforum-Bannerwettbewerb '02) :.TUTORIAL: autom. angepasstes Image Popup ohne PHP

15-04-2002, 21:25	#6 (permalink)
dassoud ontheoutsidelookingin Registriert seit: Jun 2001 Ort: Dortmund Beiträge: 5.897	hm, bei mir funzt das resizen bei einem einzigen fenster nicht mehr, komisch (hatte das auch mal genauso gemacht). den focus auf das fenster beim öffnen finde ich besser, weil manche das popup minimieren, dann auf ein neues bild klicken und sich dann wundern, warum kein fenster aufgeht. schon oft erlebt... dassoud __________________ 33rpm

16-04-2002, 08:07	#8 (permalink)
dassoud ontheoutsidelookingin Registriert seit: Jun 2001 Ort: Dortmund Beiträge: 5.897	ah, schade, kann's grad nicht runterladen (firewall). klasse, daß du dir nochmal die mühe gemacht hast! dassoud __________________ 33rpm

22-05-2002, 14:21	#9 (permalink)
Toxical Neuer User Registriert seit: Dec 2001 Beiträge: 124	klasse sache shck, eine anregung hätte ich aber noch kann man irgendiwe, nachdem die shckrez() ausgeführt wurde , das fenster auf resizable=no stellen? damit man es eben danach nicht noch vergrössern/-kleinern kann, das wär cool aber sonst is echt ne klasse Sache __________________ Hast du die Grundlagen erworben, wirst das neue du begreifen. Was als alt gilt, was als neu - die Zeit wird es nicht verbergen. Die Ungetrübtheit des Geistes wage zu erhalten durch die Jahre! Wer wird makellos gelangen bis ans Ende seines Werkes? Funakoshi Gichin

22-05-2002, 15:20	#10 (permalink)
shck ich bin ein guter Registriert seit: Aug 2001 Ort: Burg Beiträge: 1.235	das ist kein problem. schau mal in die zeile mit Code: shcknw = window.open('', '','resizable=1'); da kannst du resizable=1 auf 0 ändern oder ganz weg lassen. anmerkung: ich hatte diese option als notlösung gedacht, falls mal ein exoten-browser nicht genau das fenster anpasst, dann kann man immer noch vergrößern um das bild zu sehen. __________________ \___http://www.shck.de___\ .oO(3.Platz Flashforum-Bannerwettbewerb '02) :.TUTORIAL: autom. angepasstes Image Popup ohne PHP

26-08-2002, 23:35	#12 (permalink)
JPF Gast Beiträge: n/a	Hey, das Skript ist echt klasse... Werde es bestimmt irgendwo einbauen könnten... THX @ shck

08-10-2002, 18:37	#13 (permalink)
daep Neuer User Registriert seit: Oct 2002 Beiträge: 1	ein super script, kann ich gut gebrauche. lasse dein copyright hinweis drin. <a href="javascript:shckbp('bild_002.jpg','titel','alt-text')"> <img border="0" src="bild_002_small.jpg" width="100" height="69"></a> Geändert von daep (08-10-2002 um 19:45 Uhr)

10-01-2003, 10:51	#14 (permalink)
Pixelshocker .........riiichtiiiiich Registriert seit: Dec 2002 Ort: Hessen Beiträge: 772	echt klasse sache... schiebts doch mal ins tut-forum... __________________ www.pixelshocker.de

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln