Autom. angepasstes Image PopUp ohne PHP

Montag, 15. April 2002 by shck

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 v4.75 / v6.2) als auch mit dem Internet Explorer (v5.0 / 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:

<a href="javascript:shckbp('bild_002.jpg','titel','alt-text')"><img src="bild_002_small.jpg" alt="" /></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 nachfolgendem Befehl in jede HTML-Seite integriert werden, um so "Platz" zu schaffen (eine Script-Datei für alle HTML-Dateien):

<script 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:

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

function shckbp(shckp,shckti,shckte)
{ var undefined;
  if (shckti==undefined || (shckti=='')) {shckti='www.shck.de';}

  if (shckte==undefined || (shckti=='')) {shckte='';}
  
  x = (screen.availWidth/2)-(800/2); y=(screen.availHeight/2)-(600/2);

  shcknw = window.open('','','resizable=1,width=800,height=600,top='+y+',left='+x+'');

  with (shcknw)
  {
    focus();
    document.open();
    document.write('<!--\n\t© christian köchy\n\thttp://www.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" background="http://www.shck.de/shck_bg_01.gif" 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+'"></a></body>')
    document.close();
  }
}


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+12,y+31);}

    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);
}
</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:

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

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

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

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

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

Mit document.open/document.write wird in das geöffnete Fenster geschrieben und 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="java script:self.close()">') erreicht man bei einem Klick auf das Bild im Popup, dass sich das Fenster schließt.

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

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-HTML-Seiten!

5

DerbyStar

29.09.2005 um 16:59

Salute! hab' hier das javscript von dir, wo die bilder in einem neuen fenster mit höhe des bildes öffnen. aber bei mir ist es so, dass es im mozilla/firefox probleme gibt und ich immer scrollleisten habe, im IE funzt es einwandfrei!

kannst du mir weiterhelfen?

Kommentar by shck:

schau mal ins forum bzw. in die aktuelle script-version.

4

chrispit

06.05.2004 um 13:46

Sehr schönes Script.

Löst bei mir ein Problem, an dem ich schon Monate arbeite.

Danke. Solche Leute braucht das Land

3

DeXon

04.05.2004 um 14:48

hey,

super arbeit dein bild popup script, ist genau das was ich schon seit tagen versuchte umzusetzen!

mega danke an dich!

geb' dir auch 'nen bier aus... hehe

2

frank govaere

13.05.2003 um 19:46

Hi shck,

vielen dank für dein image-window-pop-up-skript. RICHTIG KLASSE!

1

Deus

11.03.2003 um 21:53

Hey shck, dein PopUp-Script in html ist perfekt! Und klappt sogar auf Anhieb. Danke für deine Hilfe!

So sind nicht alle. Und das ist auch gut so; sonst würd ja keiner sowas wie dich zu schätzen wissen!

Kommentar by shck:

vielen dank!