Andreas Cloos: Bildergalerie

SELF-Forum

Bildergalerie

Andreas Cloos Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo Zusammen,

ich habe meine Seite mal wieder umgebaut... Langeweile halt. Dabei habe ich mir auch die Galerie vorgenommen und etwas Javascript zusammengefrickelt (was ich eigentlich gar nicht kann).

Das Prinzip ist recht einfach: Thumbnails als Vorschau, der Klick öffnet das Bild in einem neuen Fenster, wo neben dem Photo auch noch ein wenig Text steht.

Was ich für mich auch versucht habe zu verwirklichen, ist die Möglichkeit, ein Galerie zu haben, die ich möglichst einfach um neue Bilder erweitern kann. PHP/Datenbank stehen leider nicht zu Verfügung.

Quelltext im Head:

<script type="text/javascript">
<!--
function PopUp(b,h,x,y) {
FotoFenster = window.open(x, "Fotos", "width="+b+"px,height="+h+"px");
FotoFenster.document.write ('<html><head><link rel="stylesheet" type="text/css" href="css/standard.css"></head><body>');
FotoFenster.document.write ('<center><img src="'+x+'" border="0"></center><p class="text">');
FotoFenster.document.write (y+', © 2003 by Andreas Cloos, <a href="JavaScript:window.self.close()">Fenster schließen</a></p></html>');
FotoFenster.focus();
}
//-->
</script>

Ein Link als Beispiel:
<a href="javascript:PopUp('300','420','img/gatos/kaethe_001.jpg','Käthe auf dem Kratzbaum 1')">
<img src="img/gatos/kaethe_001_t.jpg" alt="Käthe auf dem Kratzbaum 1" border="0" style="float:right; margin-left:10px; margin-bottom:10px">
</a>

Es wird also ein neues Fenster aufgemacht und "on the fly" mit HTML-Quelltext befüllt. Damit erspare ich mir das anlegen von einzelnen Dateien für das sich neu öffnende Fenster und kann aber trotzdem dem neuen Fenster eine Größe zuweisen.

Fragen dazu:

Ausprobiert habe ich das ganze unter Windows mit dem Mozilla (1.2), IE (6) und Opera (7). Netscape 4.x und Opera 5.x können die Seite erst gar nicht richtig darstellen (wg. der divs, die sollten aber valide sein), Opera 6 habe ich nicht. Funktioniert das ggf. auch unter Linux mit dort aktuellen Browesern? Lynx liefert eine überwiegend recht benutzbare Seite soweit ich das beurteilen kann.

Wenn man auf ein Thumbnail klickt wird zwar das Fenster geöffnet und es funktioniert auch alles so wie es soll, aber es bleibt dauerhaft die Sanduhr zu sehen. Woran kann das liegen, eigentlich ist der Ladevorgang ja irgendwann abgeschlossen?

Angucken kann man sich das ganze zB unter http://www.cloos.li/gal_gatos.htm

--
Greetz,
Andreas
sh:( fo:) ch:| rl:| br:> n4:# ie:{ mo:) va:) de:] zu:) fl:( ss:| ls:<
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bildergalerie

    Struppi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    <script type="text/javascript">
    <!--
    function PopUp(b,h,x,y) {
    FotoFenster = window.open(x, "Fotos", "width="+b+"px,height="+h+"px");

    Ohne 'px'

    FotoFenster = window.open(x, "Fotos", "width="+b+",height="+h);

    FotoFenster.document.write ('<html><head><link rel="stylesheet" type="text/css" href="css/standard.css"></head><body>');
    FotoFenster.document.write ('<center><img src="'+x+'" border="0"></center><p class="text">');
    FotoFenster.document.write (y+', © 2003 by Andreas Cloos, <a href="JavaScript:window.self.close()">Fenster schließen</a></p></html>');

    Da fehlt noch ein FotoFenster.document.close();

    Einfacher wäre das ganze:
    function PopUp(b,h,x,y)
    {

    var FotoFenster = window.open(x, "Fotos", "width="+b+",height="+h);
    var html = '<html><head>'

    • '<link rel="stylesheet" type="text/css" href="css/standard.css">'
    • ' </head><body>'
    • '<center><img src="' + x + '" border="0"></center>'
    • '<p class="text">'
    • y + ', © 2003 by Andreas Cloos, '
    • '<a href="JavaScript:window.self.close()">'
    • 'Fenster schließen</a></p></html>'
      ;
      with(FotoFenster)
      {
          document.open();
          document.write(html);
          document.close();
          focus();
      }
      }

    FotoFenster.focus();
    }
    //-->
    </script>

    Ein Link als Beispiel:
    <a href="javascript:PopUp('300','420','img/gatos/kaethe_001.jpg','Käthe auf dem Kratzbaum 1')">

    Besser so:
    <a href="img/gatos/kaethe_001.jpg"
    onclick="popUp('300','420',this.href,'Käthe auf dem Kratzbaum 1');return false;">

    Es wird also ein neues Fenster aufgemacht und "on the fly" mit HTML-Quelltext befüllt. Damit erspare ich mir das anlegen von einzelnen Dateien für das sich neu öffnende Fenster und kann aber trotzdem dem neuen Fenster eine Größe zuweisen.

    Ich hab sowas mal gemacht, was die Fnestergröße automatisch anpasst: http://home.arcor.de/struebig/js/popup/index.htm

    Struppi.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln