Blättern in Fotoalbum UND individuelle Foto-Auswahl

[juewi]

Ich setze meinen Thread hier weiter da nun JS das Hauptthema ist:

Patrick Andrieu hat mir in diesem Thread zu diesem Script verholfen:

  
var linksumme = document.links;  
window.onload = function() {  
for (var i = 0; i < linksumme.length; i++) {  
  if (linksumme[i].className == 'fotolink') {  
    linksumme[i].onclick = function() {  
      document.aktuelles_foto.src = this.href;  
      return false;  
      }  
    }  
  }  
}

Das Script bringt folgendes - hier auszutesten:
Jeder Link wird eingelesen und mit eindeutigem Index versehen. Bei onclick auf einen Link mit der Klasse "fotolink" (sind alles Thumbnails und die Links sind alles Fotos) wird eine Funktion ausgeführt und der Link unter diesem Index wird dazu verwendet um die Quelle für die derzeitige Grafik mit Namen "aktuelles_foto" damit auszutauschen und somit das neue Foto anzuzeigen.

Funktioniert perfekt!

Jetzt gehts noch darum:
Der Code sieht - danke an Struppi! - leicht erweitert so aus:

  
var linksumme = document.links;  
window.onload = function() {  
for (var i = 0; i < linksumme.length; i++) {  
  if (linksumme[i].className == 'fotolink') {  
    linksumme[i].angeklickt = i; // eigenes Objekt "angeklickt", um aktuellen Index auslesen zu können  
    linksumme[i].onclick = function() {  
      document.aktuelles_foto.src = this.href;  
      alert("aktueller Link: " + this.href + "; dieser hat folgende Indexzuweisung: " + this.angeklickt);  
      return false;  
      }  
    }  
  }  
}

Damit lese ich erstmal über ein eigenes Objekt "angeklickt" den derzeit verwendeten Index-Wert aus. Ziel wäre es, von diesem ausgehend auch eine vor- und zurück-Blätter-Variante einzubauen (vorbereitet unter den Thumbnails). Also quasi wahlweise Thumbklicks und auch Blätterfunktion zu ermöglichen. Und dazu muss ich eben den aktuell verwendeten Index-Wert "i" auslesen.

1.) Mit dem Objekt "angeklickt" kann ich den Index-Wert zwar über alert ausgeben lassen aber mathematisch kann ich den nicht verwenden (oder doch?). Und warum wird durch die Verwendung eines eigenen Objektes der aktuell verwendete Index-Wert "i" angezeigt, aber beim direkten Auslesen von "i" kommt immer nur die Summe aller Links raus???

2.) Kann ich eine Variable dieses window-onload-Scripts auch in anderen Funktionen verwenden? Also zB "i" oder this.zaehler?

Danke für eure Unterstützung!

LG, Jürgen

[molily]

Damit lese ich erstmal über ein eigenes Objekt "angeklickt"

Das ist kein »eigenes Objekt«, sondern schlicht eine Objekteigenschaft beim Elementobjekt.

den derzeit verwendeten Index-Wert aus. Ziel wäre es, von diesem ausgehend auch eine vor- und zurück-Blätter-Variante einzubauen (vorbereitet unter den Thumbnails).

Dann solltest du nicht den Indexwert im Array document.links verwenden. Denn da können Lücken sein, weil du nur die Elemente daraus nimmst, die eine bestimmte Klasse haben. Das Element in document.links[i - 1] ist nicht notwendig der Bild-Link vorher.

Und dazu muss ich eben den aktuell verwendeten Index-Wert "i" auslesen.

Dazu musst du ihn erst einmal irgendwo speichern - über die Ausführung des click-Handlers hinweg, sodass er beim nächsten Klick zur Verfügung steht.

Du kannst ihn z.B. in einer globalen Variable speichern oder besser am Elementobjekt document.aktuelles_foto. Da kannst du ebenfalls eine Objekteigenschaft anlegen:
document.aktuelles_foto.aktuellerIndex = i;

Jetzt solltest du nur noch die Schleife verbessern, sodass du mit i+1 und i-1 arbeiten kannst.
Du kannst z.B. alle Fotolinks in eine Liste legen und der eine ID geben. Das hast du offenbar schon. Dann machst du
var bilderlinks = document.getElementById("thumbliste").getElementsByTagName("a");
und durchläufst diesen Array. Der Index sollte sich dann immer auf diese Liste beziehen.
Die ganzen Klassen kannst du dir dann sparen. Sowohl in JS und CSS kannst du sie immer noch eindeutig ansprechen.

1.) Mit dem Objekt "angeklickt"

Es ist kein Objekt, sondern eine stinknormale Zahl (Typ http://de.selfhtml.org/javascript/objekte/number.htm@title=Number).

kann ich den Index-Wert zwar über alert ausgeben lassen aber mathematisch kann ich den nicht verwenden (oder doch?).

Klar. Es ist ein Number-Wert und bleibt ein Number-Wert.

Und warum wird durch die Verwendung eines eigenen Objektes der aktuell verwendete Index-Wert "i" angezeigt, aber beim direkten Auslesen von "i" kommt immer nur die Summe aller Links raus???

Das hat dir Struppi schon zu erklären versucht.
Die Schleife läuft halt und zählt i hoch. Bei jedem Schleifendurchlauf registriert es einen Event-Handler. Der hat Zugriff auf die Variable i der äußeren onload-Funktion, auch wenn diese Funktion schon abgelaufen ist (Closure). Wenn der Event-Handler gefeuert wird, ist der Wert von i eben der, der er beim letzten Schleifendurchlauf war, also der höchste.

Wenn du jetzt in der Closure nicht den Endwert, sondern den Wert von i zum Zeitpunkt des Zuweisens des Event-Handlers haben willst, musst du jeweiligen Schleifenwert zwischenspeichern. Das geht beim Durchlaufen von Elementlisten zur Registrierung von Event-Handler z.B. so wie Struppi es vorgeschlagen hat, indem du den Wert einfach am Elementobjekt speicherst.

Im Forumsarchiv findest du dazu Infos unter den Stichwörtern »Schleifen und Closures«.

2.) Kann ich eine Variable dieses window-onload-Scripts auch in anderen Funktionen verwenden? Also zB "i" oder this.zaehler?

Die Frage verstehe ich nicht.
Lokale Variablen aus der onload-Funktion überleben die Ausführung nicht, sofern du sie nicht irgendwo speicherst bzw. sie von Closures eingeschlossen werden.

Mathias

[juewi]

...
Mathias

Vielen lieben Dank Mathias für deine ausführlichen Erklärungen und Tipps. Hab sie mit Interesse und ständiger Begriffssuche in Selfhtml studiert und muss leider zum Schluss kommen: Schuster bleib bei Deinen Leisten ... es wird mir in großen Teilen zu abstrakt, das bringt mir nix und euch kostets Zeit.

Daher versuch ich einen für mich verständlichen Weg zu gehen und bitte euch, ob ihr mir da ein wenig auf die Sprünge helfen könntet. Ich weiss - Peanuts für euch - doch lieber ein wenig unorthodox aber mit Verständnis als ausgefeilt aber ohne Durchblick.

*** Nochmal kurz das Ziel: ***
der User soll wahlweise/abwechselnd über Klick auf Thumbnails Fotos anzeigen lassen und aber auch eine Blätterfunktion nutzen können.
(Hier die Testseite - Script lass ich derweilen im HTML drin)

*** So solls gehen: ***

• Bei Thumbklick wird für jedes Thumb eine gewisse Zahl "bildnummer" an die Funktion übergeben und mit dieser die Quelle für die Grafik ergänzt - DAS funktioniert.
• "bildnummer" soll nun für die Blätter-Funktionen als auch für die Thumbklick-Funktion wechselweise verwendet werden. Also wenn gerade mit Thumbklick Foto 30 ausgewählt wurde soll nun Foto 31 kommen, d.h. die "bildnummer" 30 vom Thumbklick soll in der Funktion "naechstes" verwendet und um 1 erhöht werden.

*** Folgendes geht aber leider nicht: ***

• Egal was über Thumbklick ausgewählt wurde, das Blättern geht immer nur vom ersten Foto 1001 weg. Das Blättern mit ++ und -- an sich allerdings funktioniert dann.
• Die else-Schleife sieht vor, dass zB bei Erreichen des letzten Bildes (1042) ein Weiterblättern nicht möglich ist (.value="") -> funktioniert zwar aber seltsamerweise wird das Test-alert bei JEDEM Blättern mitausgegeben???

So sieht das Script aus:
---------------------------------------------------------------------------

  
var minimum = 1001  
var maximum = 1042  
var bildnummer = minimum  
// =============================================  
// Direktklick auf Thumb  
// =============================================  
function thumbklick(bildnummer)  
{  
document.aktuelles_foto.src = "fotos/menschen/" + bildnummer + ".jpg";  
alert(bildnummer);  
}  
// =============================================  
// Blättern auf ERSTES Foto in der Galerie  
// =============================================  
function erstes(){  
bildnummer = minimum;  
document.aktuelles_foto.src = "fotos/menschen/" + bildnummer + ".jpg";  
document.getElementById('vorheriges').value=""; //Zurückblättern verhindern  
alert(bildnummer);  
}  
// =============================================  
// Blättern auf VORHERIGES Foto in der Galerie  
// =============================================  
function vorheriges()  
{  
if (bildnummer > minimum)  
{  
bildnummer --  
document.aktuelles_foto.src = "fotos/menschen/" + bildnummer + ".jpg";  
alert(bildnummer);  
}  
if (bildnummer == minimum)  
document.getElementById('vorheriges').value=""; //Zurückblättern verhindern  
alert("nicht möglich, da erstes Foto! -> " + bildnummer);  
}  
// =============================================  
// Blättern auf NÄCHSTES Foto in der Galerie  
// =============================================  
function naechstes()  
{  
if (bildnummer < maximum)  
{  
bildnummer ++  
document.aktuelles_foto.src = "fotos/menschen/" + bildnummer + ".jpg";  
alert(bildnummer);  
}  
if (bildnummer == maximum)  
document.getElementById('naechstes').value=""; //Vorblättern verhindern  
alert("nicht möglich, da letztes Foto! -> " + bildnummer);  
}  
// =============================================  
// Blättern auf LETZTES Foto in der Galerie  
// =============================================  
function letztes()  
{  
bildnummer = maximum;  
document.aktuelles_foto.src = "fotos/menschen/" + bildnummer + ".jpg";  
document.getElementById('naechstes').value=""; //Vorblättern verhindern  
alert(bildnummer);  
}  

So sieht das HTML mit dem klickbaren Thumb aus:
---------------------------------------------------------------------------

  
<a href="fotos/menschen/1001.jpg"  
   onclick="thumbklick(1001); return false;">  
<img src="thumbs/menschen/1001.jpg" alt=""</a>  

So sieht das HTML mit dem "auszutauschenden" Foto aus:
---------------------------------------------------------------------------

  
<img alt=""  
 name="aktuelles_foto" src="fotos/menschen/1001.jpg">  

Ich vermute, dass ich evtl. wo einen gar nicht sooo schweren Denkfehler betreffend Variable "bildnummer" drinhabe - aber ich komm einfach nicht dahinter...

Danke an alle die sich meiner noch annehmen ;-)

[molily]

*** Folgendes geht aber leider nicht: ***

• Egal was über Thumbklick ausgewählt wurde, das Blättern geht immer nur vom ersten Foto 1001 weg. Das Blättern mit ++ und -- an sich allerdings funktioniert dann.

function thumbklick(bildnummer)
{
document.aktuelles_foto.src = "fotos/menschen/" + bildnummer + ".jpg";
alert(bildnummer);

Neue Position speichern:
window.bildnummer = bildnummer;

Oder auch die lokale Variable anders nennen als die globale, dann ginge z.B.
bildnummer = neueBildnummer;

• Die else-Schleife sieht vor, dass zB bei Erreichen des letzten Bildes (1042) ein Weiterblättern nicht möglich ist (.value="") -> funktioniert zwar aber seltsamerweise wird das Test-alert bei JEDEM Blättern mitausgegeben???

if (bildnummer == minimum)
document.getElementById('vorheriges').value=""; //Zurückblättern verhindern
alert("nicht möglich, da erstes Foto! -> " + bildnummer);

Die if-Anweisung hat nur einen Befehl in seinem Block. Klar, deshalb wird die Zeile mit alert immer ausgeführt, darauf hat das if keinen Einfluss.
Willst du beide in den Block tun, dann verwende if (...) { ... }

Aber welchen Zweck soll der erste Befehl überhaupt bewirken?
document.getElementById('vorheriges') ergibt ein li-Element. Das hat zwar ein value-Attribut, aber wieso setzt du es? In einer ungeordneten Liste wird ohnehin keine Nummerierung angezeigt.
Willst du das Element irgendwie ausgrauen? Das ginge über eine Klasse und CSS.

Mathias

[juewi]

»» *** Folgendes geht aber leider nicht: ***
»» - Egal was über Thumbklick ausgewählt wurde, das Blättern geht immer nur vom ersten Foto 1001 weg. Das Blättern mit ++ und -- an sich allerdings funktioniert dann.
»» ...
Oder auch die lokale Variable anders nennen als die globale, dann ginge z.B.
bildnummer = neueBildnummer;

In der gleichen Minute selbst draufgekommen ;-)

»» - Die else-Schleife sieht vor, dass zB bei Erreichen des letzten Bildes (1042) ein Weiterblättern nicht möglich ist (.value="") -> funktioniert zwar aber seltsamerweise wird das Test-alert bei JEDEM Blättern mitausgegeben???
Aber welchen Zweck soll der erste Befehl überhaupt bewirken?...

Ähhh, bei genauerem Hinsehen eigentlich absoluter Nonsens, danke für den Hinweis.

Jetzt funktionierts! *Schulterklopf*

Danke für Deine Hilfe!

[juewi]

*** Folgendes geht aber leider nicht: ***

• Egal was über Thumbklick ausgewählt wurde, das Blättern geht immer nur vom ersten Foto 1001 weg. Das Blättern mit ++ und -- an sich allerdings funktioniert dann.

Hoppla - Problem selbst gelöst. Blindes-Huhn-Prinzip ;-)

Bleibt nur noch:

• Die else-Schleife sieht vor, dass zB bei Erreichen des letzten Bildes (1042) ein Weiterblättern nicht möglich ist (.value="") -> funktioniert zwar aber seltsamerweise wird das Test-alert bei JEDEM Blättern mitausgegeben???

[molily]

Daher versuch ich einen für mich verständlichen Weg zu gehen und bitte euch, ob ihr mir da ein wenig auf die Sprünge helfen könntet. Ich weiss - Peanuts für euch - doch lieber ein wenig unorthodox aber mit Verständnis als ausgefeilt aber ohne Durchblick.

Für mich stellt sich das anders da. Du machst es dir viel komplizierter als nötig. Der Ansatz der automatischen Vergabe der Event-Handler ist in vielerlei Hinsicht von Vorteil. Du willst das Script ja auf mehreren Seiten verwenden, deshalb ist es blöd, dass du die Bildnummern immer händisch auf jede Seite schreiben musst. Und ewig viel HTML händisch ändern musst, weil du die Inline-Event-Handler eintragen musst.

Es ist nicht so undurchblickbar, wie du vielleicht denken magst, nachdem du ins kalte Wasser geworfen wurdest und mit komplizierten JavaScript-Interna konfrontiert wurdest. Das meiste musst du aber nicht im Detail verstehen, nur grob anwenden können. Wenn ich morgen dazu komme, mache ich dir gerne ein Beispiel.

Mathias

[juewi]

Für mich stellt sich das anders da. Du machst es dir viel komplizierter als nötig. Der Ansatz der automatischen Vergabe der Event-Handler ist in vielerlei Hinsicht von Vorteil. Du willst das Script ja auf mehreren Seiten verwenden, deshalb ist es blöd, dass du die Bildnummern immer händisch auf jede Seite schreiben musst. Und ewig viel HTML händisch ändern musst, weil du die Inline-Event-Handler eintragen musst.

Jein. Die Änderung oder Vervielfältigung des HTML-Codes beschränkt sich im wesentlich darauf mit "Suchen + Ersetzen" zB "fotos/menschen" mit "fotos/natur" auszutauschen - nicht mal 1 Minute, egal wieviele Fotos.
Aber eines hab ich nicht bedacht, da hast Du recht: dass in diesem Script jetzt eben zB dieses "foto/menschen" verwendet wird und natürlich in ausgelagerter Form NICHT für alle Seiten verwendet werden kann - MIST! Und wieder ein Steinchen im Weg, zum Durchdrehen!

Es ist nicht so undurchblickbar, wie du vielleicht denken magst, nachdem du ins kalte Wasser geworfen wurdest und mit komplizierten JavaScript-Interna konfrontiert wurdest. Das meiste musst du aber nicht im Detail verstehen, nur grob anwenden können. Wenn ich morgen dazu komme, mache ich dir gerne ein Beispiel.

Wenn Du Dir das antun möchtest sehr gern aber ich kann nicht versprechen dass ich´s versteh ;-)

[Patrick Andrieu]

Hallo juewi!

Aber eines hab ich nicht bedacht, da hast Du recht: dass in diesem Script jetzt eben zB dieses "foto/menschen" verwendet wird und natürlich in ausgelagerter Form NICHT für alle Seiten verwendet werden kann - MIST! Und wieder ein Steinchen im Weg, zum Durchdrehen!

In unserem alten Thread hatte ich ein Beispiel mit einem Perl-Skript gezeigt, das das Verzeichnis einliest und daraus dynamisch mittels SSI (.shtml) die Verlinkungen einträgt (spart Tipparbeit für Faule *g*). Das ginge sicher auch mit PHP.

Wenn ich morgen dazu komme, mache ich dir gerne ein Beispiel.
Wenn Du Dir das antun möchtest sehr gern aber ich kann nicht versprechen dass ich´s versteh ;-)

Ich bin natürlich auf alles neugierig, was Mathias hier postet. Da lernt man immer was!

Viele Grüße aus Frankfurt/Main,
Patrick

[Patrick Andrieu]

Hallo Jürgen, hallo myself!

Ich bin natürlich auf alles neugierig, was Mathias hier postet. Da lernt man immer was!

Ich bin aber noch neugieriger darauf, ob ich sowas hinkriege!

------------------------------------------------------
galerie.js:

var gallery = new function () {  
  var direction = 0;  
  this.getFirst = function(img,link) {  
      img.src = link.href;  
  }  
  this.getLast = function(img,link) {  
      img.src = link.href;  
  }  
  this.paging = function(img,link) {  
      img.src = link.href;  
  }  
  this.start = function() {  
      window.onload = function () {  
        var bilderlinks = document.getElementById('thumbliste').getElementsByTagName('a');  
        var summe = bilderlinks.length;  
        var buttons = document.getElementById('blaettern').getElementsByTagName('LI');  
        var img = document.aktuelles_foto;  
        for (var i = 0; i < summe; i++) {  
          bilderlinks[i].ind= i;  
          bilderlinks[i].onclick = function() {  
            direction = this.ind;  
            img.src = this.href;  
            return false;  
          }  
        }  
        buttons[0].onclick = function() {  
           direction = 0;  
           gallery.getFirst(img,bilderlinks[direction]);  
        }  
        buttons[1].onclick = function() {  
          direction = direction > 0 ? direction-1 : 0;  
          gallery.paging(img,bilderlinks[direction]);  
        }  
        buttons[2].onclick = function() {  
          direction = direction < summe-1 ? direction+1 : direction;  
          gallery.paging(img,bilderlinks[direction]);  
        }  
        buttons[3].onclick = function() {  
          direction = summe-1;  
          gallery.getLast(img,bilderlinks[direction]);  
       }  
     }  
  }  
}  
gallery.start();

------------------------------------------------------

Bei dem Skript müsstest Du aus dem HTML-Code Deiner menschen2.html alle onclick(...) return false; herausnehmen, auch aus den li-Elementen der Liste mit der ID »blaettern«. Die IDs der einzelnen Listenpunkte sind jetzt auch überflüssig. Wenn Dir was unklar ist, nur zu mit Fragen!

Ich habe dieses Mal keine Testseite für meinen Webspace erstellt, ich habe es aber lokal getestet und bisher keine Bugs festgestellt. Vielleicht baust Du eine menschen3.html zum Testen dieses Skripts.

In der CSS notierst Du noch:

cursor:pointer; bei ul#blaettern li {}

und nimmst es aus ul#blaettern li:hover raus (dann klappt's auch mim IE6, der :hover nur für Links kennt).

Aber warte vor dem endgültigen Einbau, Struppi und/oder Mathias werden sicherlich Verbesserungen vorschlagen!

Was mir noch aufgfallen ist... warum hast Du:

<div id="kopf"><br>  
<br>  
</div>

stethen? Wozu die <br>?

Viele Grüße aus Frankfurt/Main,
Patrick

[Patrick Andrieu]

Re!

Aber warte vor dem endgültigen Einbau, Struppi und/oder Mathias werden sicherlich Verbesserungen vorschlagen!

Derweil habe ich die erste. Ich hatte übersehen, dass drei Funktionen das selbe tun...

So geht's auch:

---

var gallery = new function () {  
  var direction = 0;  
  this.paging = function(img,link) {  
      img.src = link.href;  
  }  
  this.start = function() {  
      window.onload = function () {  
        var bilderlinks = document.getElementById('thumbliste').getElementsByTagName('a');  
        var summe = bilderlinks.length;  
        var buttons = document.getElementById('blaettern').getElementsByTagName('LI');  
        var img = document.aktuelles_foto;  
        for (var i = 0; i < summe; i++) {  
          bilderlinks[i].ind= i;  
          bilderlinks[i].onclick = function() {  
            direction = this.ind;  
            img.src = this.href;  
            return false;  
          }  
        }  
        buttons[0].onclick = function() {  
           direction = 0;  
           gallery.paging(img,bilderlinks[direction]);  
        }  
        buttons[1].onclick = function() {  
          direction = direction > 0 ? direction-1 : 0;  
          gallery.paging(img,bilderlinks[direction]);  
        }  
        buttons[2].onclick = function() {  
          direction = direction < summe-1 ? direction+1 : direction;  
          gallery.paging(img,bilderlinks[direction]);  
        }  
        buttons[3].onclick = function() {  
          direction = summe-1;  
          gallery.paging(img,bilderlinks[direction]);  
       }  
     }  
  }  
}  
gallery.start();

---

Viele Grüße aus Frankfurt/Main,
Patrick

[Patrick Andrieu]

Rere!

Mathias sagte: »Außerdem würde ich die Blätter-Navigation mit JavaScript einfügen, da sie ohnehin nur mit JavaScript funktioniert und nicht direkt im HTML-Quelltext liegen sollte, wenn sie keine Funktionalität hat.«, ein berechtigter Einwand ;)

So geht's jetzt auch mit meinem Beispiel:

»» ------------------------------------------------------

var gallery = new function () {

var direction = 0;
  this.paging = function(img,link) {
      img.src = link.href;
  }
  this.start = function() {
      window.onload = function () {

// ADD HIER:
           document.getElementById('blaettern').style.display = "block";
// ENDE ADD

var bilderlinks = document.getElementById('thumbliste').getElementsByTagName('a');
        var summe = bilderlinks.length;
        var buttons = document.getElementById('blaettern').getElementsByTagName('LI');
        var img = document.aktuelles_foto;
        for (var i = 0; i < summe; i++) {
          bilderlinks[i].ind= i;
          bilderlinks[i].onclick = function() {
            direction = this.ind;
            img.src = this.href;
            return false;
          }
        }
        buttons[0].onclick = function() {
           direction = 0;
           gallery.paging(img,bilderlinks[direction]);
        }
        buttons[1].onclick = function() {
          direction = direction > 0 ? direction-1 : 0;
          gallery.paging(img,bilderlinks[direction]);
        }
        buttons[2].onclick = function() {
          direction = direction < summe-1 ? direction+1 : direction;
          gallery.paging(img,bilderlinks[direction]);
        }
        buttons[3].onclick = function() {
          direction = summe-1;
          gallery.paging(img,bilderlinks[direction]);
       }
     }
  }
}
gallery.start();

>   
> »» ------------------------------------------------------  
  
Und im CSS für ul#blaettern:  
  
display:none;  
  
  
Viele Grüße aus Frankfurt/Main,  
Patrick

-- 
\_ - jenseits vom delirium - \_  
![](http://www.atomic-eggs.com/fuernA.jpg)  
   [Diblom](http://www.atomic-eggs.com/pics/diblom.png)   [[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash](http://www.atomic-eggs.com/)]  
[J'ai 10 ans!](http://www.atomic-eggs.com/wae/wae_10.shtml#a5) | Achtung [Agentur](http://www.atomic-eggs.com/cwi/cwi_5.shtml#a5)! | Nichts ist unmöglich? [Doch!](http://www.atomic-eggs.com/cwi/cwi_4.shtml) | [Heute](http://www.atomic-eggs.com/cgi-bin/date_today.pl) schon ge[gök](http://goek.atomic-eggs.com/goek_goek.html)t?

[Patrick Andrieu]

Für's Archiv:

Ich habe dieses Mal keine Testseite für meinen Webspace erstellt

Jetzt doch. Hier ist zunächst die statische Seite, das heißt die »normale« Bildergalerie mit JavaScript (ohne JavaScript werden die Bilder »nackt« im Browser angezeigt und der User muss zurückblättern). Hier ist das Skript »gallery.js« fast genau das Selbe, wie das vorher gepostete:

»statische« Galerie

Als nächstes, ganz im Sinne meines älteren Beitrags, eine komplett serverseitig generierte Bildergalerie. Hier übernimmt ein Perl-Skript die Aufgaben:

1. die Seite anhand eines Templates zu generieren
2. den Inhalt des DIV »thumbs« anhand der im Bildverzeichnis enthaltenen Bilder zu generieren (Autor spart sich die Tipperei ellenlanger Listen)
3. dafür zu sorgen, dass die Galerie ohne JavaScript funktioniert

serverseitig generierte Galerie

Das JavaScript für diese serverseitig generierte Seite musste angepasst werden, weil this.href nicht mehr der nackte Pfad zum anzuzeigenden Bild ist, sondern der Pfad zum Perl-Skript »gallery2.pl«.

So muss:

img.src = link.href // so steht's im JS der statischen Seite

aufgrund der anderen Pfade:

var path = link.href.split('=').pop();
img.src = path;

notiert werden. So wird der neue Pfad:

/z_testdir/scripts/perl/gallery2.pl?path=/roadster/urlaub_2004/bild.jpg

am Istlgeichzeichen gesplittet. Ergibt ein Array mit zwei Elementen: der String VOR dem »=« und der danach - und eben den wird »geholt« durch pop() und der Variablen »path« zugewiesen.

Das Script »gallery2.pl« nutzt das Perl-Modul HTML::Template, um anhand eben eines Templates die Galerie zu generieren.

Im Laufe der nächsten Tagen werde ich versuche, vor allem das JavaScript im Style von Mathias durch Kommentare zu erläutern.

Viele Grüße aus Frankfurt/Main,
Patrick

[dedlfix]

echo $begrüßung;

Auf Wunsch folgt die Serverseite auch noch mal als PHP-Version.

Als nächstes, ganz im Sinne meines älteren Beitrags, eine komplett serverseitig generierte Bildergalerie. Hier übernimmt ein Perl-Skript die Aufgaben: [...]

Ein Teil des Galerie-Scripts. Das Template ist das selbe wie bei der Perl-Variante.

<?php  
// Minimal benötigte PHP-Version: 4.3.0  
#error_reporting(E_ALL);  
  
require_once 'common.php';  
  
// Dateiname der Template-Datei, relativ zu diesem Script oder absolut angeben.  
define('TEMPLATE_FILENAME', 'gallery.tpl');  
  
// URL zu diesem Script  
define('SCRIPT_URL', $_SERVER['SCRIPT_NAME']);  
// SCRIPT_URL enthält beispielsweise /gallery2.php  
  
// PHP-Fehlermeldungstext in $php_errormsg schreiben lassen  
ini_set('track_errors', 1);  
  
  
/**  
 * Erstellt aus dem Template die HTML-Ausgabe.  
 *  
 * @param string $templateFilename   Dateiname der Template-Datei  
 * @param array $images              Array mit Bildinformation  
 * @param string $galleryDirectory   Galerie-Verzeichnis relativ zum Basis-Verz.  
 * @param string $showImageFilename  Dateiname des anzuzeigenden Bildes  
 * @return string  
 */  
function createHtmlFromTemplate($templateFilename, $images, $galleryDirectory, $showImageFilename) {  
  if (false === $template = @file_get_contents($templateFilename)){  
    error('Template nicht gefunden', $php_errormsg);  
    return '';  
  }  
  
  $href = sprintf('%s?%s=%s', SCRIPT_URL, URL_PARAMETER_NAME, $galleryDirectory);  
  $galleryDirectory = trim(GALLERY_BASE_DIRECTORY, '/') . '/' . trim($galleryDirectory, '/') . '/';  
  
  $templateLoopPattern = '#<TMPL_LOOP +NAME=THUMBS>(.*?)</TMPL_LOOP>#s';  
  if (preg_match_all($templateLoopPattern, $template, $matches)) {  
    $replacements = array();  
    foreach ($matches[1] as $nr => $match) {  
      foreach ($images as $imageFilename => $imageInfo) {  
        $templateLoopVars = array(  
          '<TMPL_VAR NAME=SCRIPT>' => $href . $imageFilename,  
          '<TMPL_VAR NAME=THPATH>' => $galleryDirectory . getThumbnailFilename($imageFilename),  
          '<TMPL_VAR NAME=PICNAME>' => basename($imageFilename),  
        );  
        $replacements[$nr][] = strtr($match, $templateLoopVars);  
      }  
    }  
  
    foreach ($replacements as $replacement)  
      $template = preg_replace($templateLoopPattern, implode('', $replacement), $template, 1);  
  }  
  
  $templateVars = array(  
    '<TMPL_VAR NAME=PICNAME>' => $showImageFilename,  
    '<TMPL_VAR NAME=DIRPATH>' => $galleryDirectory,  
  );  
  $template = strtr($template, $templateVars);  
  
  return $template;  
}  
  
  
// Wurde ein Dateiname statt eines Verzeichnisses angegeben?  
if (is_file(REAL_GALLERY_DIRECTORY)) {  
  // Dateiname und Verzeichnis trennen  
  $showImageFilename = basename(REAL_GALLERY_DIRECTORY);  
  $realGalleryDirectory = dirname(REAL_GALLERY_DIRECTORY);  
} else  
  $realGalleryDirectory = REAL_GALLERY_DIRECTORY;  
  
if (!is_dir($realGalleryDirectory))  
  error('Galerie-Pfad ist kein Verzeichnis', $realGalleryDirectory);  
  
// Galerie-Basis-Pfad aus Galerie-Verzeichnis entfernen.  
if (strpos($realGalleryDirectory, REAL_GALLERY_BASE_PATH) === 0)  
  $galleryDirectory = rtrim(substr($realGalleryDirectory, strlen(REAL_GALLERY_BASE_PATH)), '/') . '/';  
else  
  trigger_error('Galerie-Verzeichnis außerhalb des DocumentRoot.', E_USER_ERROR);  
  // Wenn dieser Fehler ausgelöst wird, muss ein Zugriffsscript für die  
  // Bilddateien erstellt werden. Außerdem müssen einige Anpassungen bezüglich  
  // der Pfad-Ermittlung in diesem Script vorgenommen werden. Dies zu tun  
  // obliegt dem (fortgeschrittenen) Anwender.  
// $galleryDirectory enthält beispielsweise default/  
  
  
// Array mit Bilddateinamen und -informationen anlegen  
// $images = array(filename => imageInformation, ...)  
$images = array();  
// Alle Dateien auf Bildinhalt testen  
foreach (glob($realGalleryDirectory . '/*', GLOB_NOSORT) as $filename)  
  // Wenn $filename kein Bild ist, erzeugt getimagesize() neben dem vom if  
  // berücksichtigten Rückgabewert false auch noch eine unerwünschte  
  // Notice-Meldung, die mit dem Fehlerkontrolloperator @ unterdrückt wird.  
  if ($imageInfo = @getimagesize($filename))  
    $images[basename($filename)] = $imageInfo;  
  
// "natürliches" Sortieren nach Dateinamen:  
// a1, a2, ..., a9, a10, ... statt a1, a10, a2, ...  
uksort($images, 'strnatcmp');  
// Alternativen:  
// uksort($images, 'strnatcasecmp'); // Groß-/Kleinschreibung ignorieren  
// ksort($images); // "ASCIIbetisches" Sortieren  
  
if (!isset($showImageFilename)) {  
  reset($images);  
  $showImageFilename = key($images);  
}  
  
// Erzeuge die HTML-Seite aus dem Template.  
echo createHtmlFromTemplate(TEMPLATE_FILENAME, $images, $galleryDirectory, $showImageFilename);  

Dazu gibt es eine Datei namens common.php. Sie enthält Dinge, die vom obigen Galerieanzeigescript benötigt werden als auch vom Thumnailerstellungsscript.

<?php  
  
if (!isset($_SERVER['DOCUMENT_ROOT'])) {  
  define('DOCUMENT_ROOT', '/data/wwwdocs/_test/picgal');  
  // Nicht alle Webserver stellen DOCUMENT_ROOT zur Verfügung.  
  #trigger_error('DOCUMENT_ROOT nicht vorhanden, bitte Konstante setzen', E_USER_ERROR);  
  #define('DOCUMENT_ROOT', '...');  
} else  
  define('DOCUMENT_ROOT', rtrim($_SERVER['DOCUMENT_ROOT'], '/'));  
// DOCUMENT_ROOT enthält beispielsweise /pfad/zum/docroot  
  
// Pfad zu den Galerien, relativ zum Galerie/Thumbnail-Script oder absolut angeben.  
define('GALLERY_BASE_DIRECTORY', 'galleries');  
  
// Nimm dies, wenn kein Galerie-Verzeichnis übergeben wurde  
define('DEFAULT_GALLERY_DIRECTORY', 'default');  
#define('DEFAULT_GALLERY_DIRECTORY', 'roadster/urlaub_2004');  
  
// Name des Parameters zur Scriptsteuerung  
define('URL_PARAMETER_NAME', 'path');  
  
  
// Verzeichnis der Thumbnails, relativ zum jeweiligen Galerie-Verzeichnis  
define('THUMBNAILS_DIRECTORY', 'thumbs');  
// Thumbnail-Dateinamen-Vorspann und -Anhängsel.  
define('THUMBNAIL_PREFIX', 'tn_');  
define('THUMBNAIL_SUFFIX', '');  
  
  
  
  
// Vollen Pfadnamen zum die Galerien enthaltenen Verzeichnis ermitteln  
// und einen(!) / anhängen  
define('REAL_GALLERY_BASE_PATH', rtrim(realpath(GALLERY_BASE_DIRECTORY), '/') . '/');  
// REAL_GALLERY_BASE_PATH enthält beispielsweise /pfad/zum/docroot/galleries/  
  
// Vollen Pfadnamen zur gewünschten Galerie ermitteln  
define('REAL_GALLERY_DIRECTORY', isset($_GET[URL_PARAMETER_NAME]) ?  
  realpath(REAL_GALLERY_BASE_PATH . trim($_GET[URL_PARAMETER_NAME], '/')) :  
  // Kein Parameter path übergeben, Default-Galerie verwenden.  
  REAL_GALLERY_BASE_PATH . trim(DEFAULT_GALLERY_DIRECTORY, '/'));  
// REAL_GALLERY_DIRECTORY enthält beispielsweise /pfad/zum/docroot/galleries/default  
  
// Führt der Pfad zu einem Ziel außerhalb von GALLERY_BASE_DIRECTORY?  
if (substr(REAL_GALLERY_DIRECTORY, 0, strlen(REAL_GALLERY_BASE_PATH)) != REAL_GALLERY_BASE_PATH)  
  die('Path violation.'); // Angriffsversuch kurz und schmerzlos beenden.  
  
  
  
/**  
 * Erstellt den Thumbnail-Dateinamen aus einem gegebenen Bilddateinamen.  
 *  
 * @param string $imageFilename  
 * @return string  
 */  
function getThumbnailFilename($imageFilename) {  
  $extension = pathinfo($imageFilename, PATHINFO_EXTENSION);  
  return trim(THUMBNAILS_DIRECTORY, '/') .  '/'.  
    THUMBNAIL_PREFIX .  
    substr($imageFilename, 0, - (strlen($extension) + 1)) . // ohne Extension  
    THUMBNAIL_SUFFIX .  
    '.' . $extension;  
}  
  
  
/**  
 * Bearbeiten von Fehlermeldungen  
 *  
 * Bitte Inhalt dieser Funktion ersetzen durch eine angemessene Fehlerbehandlung.  
 * Anwender sollten weder die Ursache noch Details dazu angezeigt bekommen.  
 *  
 * @param string $message  
 * @param string $details  
 */  
function error($message, $details = '') {  
  echo '<div>', $message, ' - ', $details, '</div>';  
}  

Das Script »gallery2.pl« nutzt das Perl-Modul HTML::Template, um anhand eben eines Templates die Galerie zu generieren.

So etwas ähnliches gibt es für PHP beispielsweise bei PEAR. Da das Template aber sehr einfach gehalten war, hab ich kurzerhand eine Template-Funktion selbst geschrieben.

Was mir auch noch aufgefallen ist: Dein Perl-Script dürfte eine Sicherheitslücke enthalten. Du stellst zwar dem als Parameter übergebenen Pfad zur Galerie ein $ENV{DOCUMENT_ROOT} voran, prüfst aber nicht weiter, ob so etwas wie /../ im Pfad vorkommt. Ich nehme an, opendir verhindert das auch nicht. In meiner PHP-Version lasse ich den realen Pfad auflösen und prüfe den gegen ein konfiguriertes Verzeichnis.

Ebenso ungeprüft ist der Dateiname, der für den Nicht-Javascript-Fall als Parameter übergeben wird. Der muss nur auf gif|jpe?g|png enden und wird dann einfach ins HTML eingefügt.

Eine weitere Ungereimtheit ist, dass für die Thumbnail nur die auf .jpg endenden Dateien berücksichtigt werden.

Verbesserungspotential gibt es noch beim Bildformat. Das ist jetzt für die Thumbnails auf 4:3 festgeklopft. Das könnte man noch als variable Größe ins Template einbauen. Dann müssten auch Hochkant-Bilder nicht mehr "hingelegt" werden und Bilder mit anderen Seitenverhältnissen könnte man ebenfalls berücksichtigen. In dem Fall wäre auch mein Thumbnailerstellungsscript zu überarbeiten.

Die Pfadangaben im Perl-Script könnten auch noch etwas zentraler notiert werden, dann lassen sie sich besser bearbeiten (obwohl das Script aufgrund seiner geringen Größe ja schon recht übersichtlich ist).

echo "$verabschiedung $name";

[dedlfix]

echo $begrüßung;

Ich soll nicht so lange Postings erstellen, sagt die Forumssoftware, deswegen gibt es das Thumbnailerstellungsscript extra (ich hab es allerdings nur mit JPEG getestet). Es ist vorgesehen, dass dies einmalig für eine Galerie auszuführen ist. Das Thumbnail-Verzeichnis muss dazu vom Ausführenden (=Webserver) beschreibbar sein. Besser ist es, diesen Vorgang in der Entwicklungsumgebung auszuführen und die Thumbnails zusammen mit den großen Bildern hochzuladen, dann können sie wie alle anderen Dateien unter der Kennung des Users auf dem Server liegen.

<?php  
#error_reporting(E_ALL);  
  
header('Content-Type: text/plain');  
  
// Zum Erstellen der Thumbnails nachfolgende Zeile auskommentieren,  
// anschließend Kommentarzeichen wieder entfernen.  
die('Forbidden');  
  
// Aufruf des Scripts: makeThumbnails?path=galerieVerzeichnis  
// Diverse Konfiguationsmöglichkeiten gibt es in common.php.  
  
  
require_once 'common.php';  
  
// Größe der Thumbnails. 105:79 = 4:3 = 640:480  
define('SIZE_X', 105);  
define('SIZE_Y', 79);  
  
// Hochformat-Bilder werden nach links gedreht  
  
  
if (!is_dir(REAL_GALLERY_DIRECTORY))  
  error('Galerie-Pfad ist kein Verzeichnis', REAL_GALLERY_DIRECTORY);  
  
// Galerie-Basis-Pfad aus Galerie-Verzeichnis entfernen.  
if (strpos(REAL_GALLERY_DIRECTORY, REAL_GALLERY_BASE_PATH) === 0)  
  $galleryDirectory = rtrim(substr(REAL_GALLERY_DIRECTORY, strlen(REAL_GALLERY_BASE_PATH)), '/') . '/';  
else  
  trigger_error('Galerie-Verzeichnis außerhalb des DocumentRoot.', E_USER_ERROR);  
  // Wenn dieser Fehler ausgelöst wird, muss ein Zugriffsscript für die  
  // Bilddateien erstellt werden. Außerdem müssen einige Anpassungen bezüglich  
  // der Pfad-Ermittlung in diesem Script vorgenommen werden. Dies zu tun  
  // obliegt dem (fortgeschrittenen) Anwender.  
// $galleryDirectory enthält beispielsweise default/  
  
// Alle Dateien auf Bildinhalt testen  
foreach (glob(REAL_GALLERY_DIRECTORY . '/*', GLOB_NOSORT) as $filename)  
  // Wenn $filename kein Bild ist, erzeugt getimagesize() neben dem vom if  
  // berücksichtigten Rückgabewert false auch noch eine unerwünschte  
  // Notice-Meldung, die mit dem Fehlerkontrolloperator @ unterdrückt wird.  
  if ($imageInfo = @getimagesize($filename)) {  
    $thumbnailFilename = REAL_GALLERY_DIRECTORY . '/' . getThumbnailFilename(basename($filename));  
  
    list($width, $height, $type) = $imageInfo;  
    switch ($type) {  
      case IMAGETYPE_JPEG:  
        $image = imagecreatefromjpeg($filename);  
        break;  
      case IMAGETYPE_GIF:  
        $image = imagecreatefromgif($filename);  
        break;  
      case IMAGETYPE_PNG:  
        $image = imagecreatefrompng($filename);  
        break;  
      default:  
        error('Unbekannter Bild-Typ', $type);  
        continue;  
    }  
  
    if ($width > $height) { // Querformat  
      $thumbnail = imagecreatetruecolor(SIZE_X, SIZE_Y);  
      imagecopyresampled($thumbnail, $image, 0, 0, 0, 0, SIZE_X, SIZE_Y, $width, $height);  
    } else { // Hochformat  
      $thumbnailH = imagecreatetruecolor(SIZE_Y, SIZE_X);  
      imagecopyresampled($thumbnailH, $image, 0, 0, 0, 0, SIZE_Y, SIZE_X, $width, $height);  
  
      // drehe 90° nach links  
      $thumbnail = imagecreatetruecolor(SIZE_X, SIZE_Y);  
      for ($x = 0; $x < SIZE_Y; $x++)  
        for ($y = 0; $y < SIZE_X; $y++)  
          imagesetpixel($thumbnail, $y, SIZE_Y - $x - 1,  
            imagecolorat($thumbnailH, $x, $y));  
    }  
  
    switch ($type) {  
      case IMAGETYPE_JPEG:  
        $result = imagejpeg($thumbnail, $thumbnailFilename);  
        break;  
      case IMAGETYPE_GIF:  
        $result = imagegif($thumbnail, $thumbnailFilename);  
        break;  
      case IMAGETYPE_PNG:  
        $result = imagepng($thumbnail, $thumbnailFilename);  
        break;  
    }  
  
    imagedestroy($image);  
    imagedestroy($thumbnail);  
  
    echo $thumbnailFilename, ($result ? " erzeugt\n" : " fehlgeschlagen\n");  
    flush();  
  }  
  
  
echo "Fertig.\n";

echo "$verabschiedung $name";

[Patrick Andrieu]

Hallo dedlfix!

Hm, ich sehe Deine Postings erst jetzt, gestern abend war ich noch zu sehr mit dem neuen Troll beschäftigt ;)

Vielen lieben Dank für die Mühe, und dass Du mitgemacht hast!

Ich werde mir alles nun in Ruhe anschauen, versuchen, es zu verstehen (Du hast viel kommentiert, danke) und es in meinem Testverzeichnis /z_testdir/scripts/php zum Laufen zu bringen - und auch den Hinweisen auf die Lücken im Perl-Skript nachgehen.

Heute wird vermutlich nichts mehr, da ich nachher weg muss. Hoffentlich bleibt uns der Thread noch wenige Tage erhalten, dann poste ich hier das Ergebnis (oder Fragen *g*).

Vielen dank nochmals und

viele Grüße aus Frankfurt/Main,
Patrick

[Patrick Andrieu]

Hallo dedlfix!

Solele... Heute hatte ich endlich Zeit...

Dein Skript funktionierte einwandfrei (nach dem ich erstmals ewig probieren musste, wie ich die Pfade anzugeben hatte) solange... man JavaScript deaktiviert hatte. Mit JavaScript wollte die Galerie-Funktion nicht, weil Dein Skript andere Pfade generierte als die, die das JavaScript erwartet:

Die Pfade in der Perl-Galerie sehen so aus:

<a href="/z_testdir/scripts/perl/gallery2.pl?path=/roadster/urlaub_2004/1230_warten1.jpg">

während die von Deinem Skript so aussahen:

<a href="/z_testdir/scripts/php/gallery.php?path=urlaub_2004/1230_warten1.jpg">

Da ich keine Lust hatte, das JavaScript zu ändern (weil da am Pfad gesplittet und gepoppt [!][ja!] wird), was mich 5mn gekostet hätte, habe ich als PHP-Laie, der erstmal suchen mußte, was trim(), rtrim(), und was weiß ich noch was für seltsame PHP-Funktionen wie und was machen, lieber ganze drei Stunden dazu verbracht, Dein Skript so zu ändern, dass er mir das liefert, was ich will.

Aber zunächst... das Skript in Deinem zweiten Posting dient nur dazu, die Thumbnails automatisch generieren zu lassen, ja? Da ich in meinem Beispiel davon ausgegangen bin, dass ein am Skript interessierter Galerie-Baslter bereits seine Thumbnails erstellt hat, habe ich es nicht verwendet - und auch nicht getestet. Sehen wir das als Zugabe, ja?

Diese DOCUMENT_ROOT-Abfrage und das Definieren der gleichnamigen Konstante zu Beginn des Skripts »common.php« ist wofür? Die Konstante wird nämlich nicht mehr gebraucht (taucht nirgends mehr auf). Das macht meine Version jetzt. Auch musste ich eine Konstante DIR_PATH definieren, um mal damit konkatenieren oder mal substringen zu können. Ist sicher nicht das gelbe von Ei [1], so aber erhalte ich die Thumbsverlinkungen und Bild-Referenzierung im DIV »show« so, wie ich sie haben will.

So sieht die »common.php« aus:

----------------- Konfigurationsskript »common.php« -----------------

<?php

if (!isset($_SERVER['DOCUMENT_ROOT'])) {
  define('DOCUMENT_ROOT', '/data/wwwdocs/_test/picgal');
} else {
  define('DOCUMENT_ROOT', rtrim($_SERVER['DOCUMENT_ROOT'], '/'));
}

define('GALLERY_BASE_DIRECTORY', DOCUMENT_ROOT.'/roadster');
define('DIR_PATH', '/roadster/');

// Nimm dies, wenn kein Galerie-Verzeichnis übergeben wurde
define('DEFAULT_GALLERY_DIRECTORY', '/urlaub_2004');

// Name des Parameters zur Scriptsteuerung
define('URL_PARAMETER_NAME', 'path');

// Verzeichnis der Thumbnails, relativ zum jeweiligen Galerie-Verzeichnis
define('THUMBNAILS_DIRECTORY', 'th');
// Thumbnail-Dateinamen-Vorspann und -Anhängsel.
define('THUMBNAIL_PREFIX', '');
define('THUMBNAIL_SUFFIX', '_t');

// Vollen Pfadnamen zum die Galerien enthaltenen Verzeichnis ermitteln
// und einen(!) / anhängen
define('REAL_GALLERY_BASE_PATH', rtrim(realpath(GALLERY_BASE_DIRECTORY), '/') . '/');
// REAL_GALLERY_BASE_PATH enthält beispielsweise /pfad/zum/docroot/galleries/

// Vollen Pfadnamen zur gewünschten Galerie ermitteln
define('REAL_GALLERY_DIRECTORY', isset($_GET[URL_PARAMETER_NAME]) ?
        //realpath(REAL_GALLERY_BASE_PATH) : // . trim($_GET[URL_PARAMETER_NAME], '/')) :
        substr(REAL_GALLERY_BASE_PATH,0,-strlen(DIR_PATH)).$_GET[URL_PARAMETER_NAME] . '/' :
        REAL_GALLERY_BASE_PATH . trim(DEFAULT_GALLERY_DIRECTORY, '/'));


// Führt der Pfad zu einem Ziel außerhalb von GALLERY_BASE_DIRECTORY?

if (substr(REAL_GALLERY_DIRECTORY, 0, strlen(REAL_GALLERY_BASE_PATH)) != REAL_GALLERY_BASE_PATH) {
  die('Path violation.'); // Angriffsversuch kurz und schmerzlos beenden.
}

/**
 * Erstellt den Thumbnail-Dateinamen aus einem gegebenen Bilddateinamen.
 *
 * @param string $imageFilename
 * @return string
 */
function getThumbnailFilename($imageFilename) {
  $extension = pathinfo($imageFilename, PATHINFO_EXTENSION);
  return trim(THUMBNAILS_DIRECTORY, '/') .  '/'.
    THUMBNAIL_PREFIX .
    substr($imageFilename, 0, - (strlen($extension) + 1)) . // ohne Extension
    THUMBNAIL_SUFFIX .
    '.' . $extension;
}


/**
 * Bearbeiten von Fehlermeldungen
 *
 * Bitte Inhalt dieser Funktion ersetzen durch eine angemessene Fehlerbehandlung.
 * Anwender sollten weder die Ursache noch Details dazu angezeigt bekommen.
 *
 * @param string $message
 * @param string $details
 */
function error($message, $details = '') {
  echo '<div>', $message, ' - ', $details, '</div>';
}

---

und so »gallery.php« (hier bereinigt von Kommentaren, die mir zwar sehr geholfen haben, beim Anpassen jedoch irritiert haben):

----------------- Galerieskript »gallery.php« -----------------

<?php
error_reporting(E_ALL);
require_once 'common.php';
define('TEMPLATE_FILENAME', '../../files/gallery.tpl');
define('SCRIPT_URL', $_SERVER['SCRIPT_NAME']);


ini_set('track_errors', 1); // PHP-Fehlermeldungstext in $php_errormsg schreiben lassen

function createHtmlFromTemplate($templateFilename, $images, $galleryDirectory, $showImageFilename) {
  if (false === $template = @file_get_contents($templateFilename)){
    error('Template nicht gefunden', $php_errormsg);
    return '';
  }

  $href = sprintf('%s?%s=%s', SCRIPT_URL, URL_PARAMETER_NAME, $galleryDirectory);

  $templateLoopPattern = '#<TMPL_LOOP +NAME=THUMBS>(.*?)</TMPL_LOOP>#s';
  if (preg_match_all($templateLoopPattern, $template, $matches)) {
    $replacements = array();
    foreach ($matches[1] as $nr => $match) {
      foreach ($images as $imageFilename => $imageInfo) {
        $templateLoopVars = array(
          '<TMPL_VAR NAME=SCRIPT_URI>' => $href . $imageFilename,
          '<TMPL_VAR NAME=THPATH>' => $galleryDirectory . getThumbnailFilename($imageFilename),
          '<TMPL_VAR NAME=PICNAME>' => basename($imageFilename),
        );
        $replacements[$nr][] = strtr($match, $templateLoopVars);
      }
    }
    foreach ($replacements as $replacement)
      $template = preg_replace($templateLoopPattern, implode('', $replacement), $template, 1);
  }

  $templateVars = array(
    '<TMPL_VAR NAME=SCRIPT>' => 'PHP',
    '<TMPL_VAR NAME=SCRIPT_URL>' => SCRIPT_URL,
    '<TMPL_VAR NAME=PICNAME>' => $showImageFilename,
    '<TMPL_VAR NAME=DIRPATH>' => $galleryDirectory,
  );
  $template = strtr($template, $templateVars);

  return $template;
}

if (is_file(rtrim(REAL_GALLERY_DIRECTORY,'/'))) {         // Wurde ein Dateiname statt eines Verzeichnisses angegeben?
  // Dateiname und Verzeichnis trennen
  $showImageFilename = basename(REAL_GALLERY_DIRECTORY);
  $realGalleryDirectory = dirname(REAL_GALLERY_DIRECTORY);
} else {
  $realGalleryDirectory = REAL_GALLERY_DIRECTORY;
}

  if (!is_dir($realGalleryDirectory))
  error('Galerie-Pfad ist kein Verzeichnis', $realGalleryDirectory);


// Galerie-Basis-Pfad aus Galerie-Verzeichnis entfernen.
if (strpos($realGalleryDirectory, REAL_GALLERY_BASE_PATH) === 0) {
  $galleryDirectory = DIR_PATH.rtrim(substr($realGalleryDirectory, strlen(REAL_GALLERY_BASE_PATH)), '/') . '/';
}
else {
  echo "ELSE: realGalleryDirectory: ", $realGalleryDirectory;
  trigger_error('Galerie-Verzeichnis außerhalb des DocumentRoot.', E_USER_ERROR);
}

$images = array();
foreach (glob($realGalleryDirectory . '/*', GLOB_NOSORT) as $filename) {
  if ($imageInfo = @getimagesize($filename)) {
    $images[basename($filename)] = $imageInfo;
  }
}
uksort($images, 'strnatcmp');

if (!isset($showImageFilename)) {
  reset($images);
  $showImageFilename = key($images);
}

// Erzeuge die HTML-Seite aus dem Template.
echo createHtmlFromTemplate(TEMPLATE_FILENAME, $images, $galleryDirectory, $showImageFilename);

---

[1] Vielleicht bringst Du Verbesserungen!

Also an dieser Stelle erneut vielen Dank für das Skript! Dass ich solange gebraucht habe, die paar Änderungen einzubauen, hat damit zu tun, dass ich in der common.php mit diesen ganzen Pfadangaben und -manipulationen nicht durchgeblickt habe, und mir alles mittels echo ausgeben lassen musste. Dann, wie erwähnt, musste ich bei ca. 5 oder 6 Funktionen suchen, was diese bewirken - lediglich mit substr() war ich einigermaßen vertraut ;)

############################################################ Und nun für die künftigen Archivleser, alles zusammengefaßt!

Ziel war es, eine einfache JavaScript-Bildergalerie zu bauen - auf Wunsch des OP mit Thumbnails zum Anklicken und Buttons zum Vor- und Zurückblättern.

Die einfache Bildergalerie ist hier: http://www.atomic-eggs.com/z_testdir/html/gallery.html

CSS und JavaScript: http://www.atomic-eggs.com/z_testdir/files/gallery.css http://www.atomic-eggs.com/z_testdir/html/gallery.js

Wer nur eine Bildergalerie für seine Site braucht, kann sich davon inspirieren lassen.

Die Galerie hat aber den Nachteil, dass für Besucher ohne JavaScript die Bilder »standalone« im Browser angezeigt werden. Der Besucher muss zur Galarieseite zurückblättern, um weitere Bilder anzuschauen.

Und wer wie der OP Fotograf ist, und sicher mehrere Galerien vorstellen möchte, wird es sehr schnell satt haben, die vielen Thumbs händisch im Code zu notieren. Computer sind dazu da, sich die Arbeit leichter zu machen, dafür muss man sich einmal anstrengen, entsprechende Automatismen zu schreiben, die man später immer wieder verwenden kann.

So entstand die Galerie mit Perl. Diese Galerie wird komplett anhand einer Template-Datei serverseitig generiert. Das Perl-Skript liest das jeweilige Verzeichnis ein, listet die darin enthaltenen Bilddateien (hier: .jpg) auf, generiert in einer Schleife die Verlinkung der Thumbnails im entsprechenden DIV-Element.

Ist JavaScript aktiv, bietet die Galerie die selben Funktionen wie die »einfache, statische« Version. Ist JavaScript deaktiviert, kann kein »onclick«-Event stattfinden, der Linkziel wird stattdessen aufgerufen und dieser lautet wie ganz oben im Posting:

/scriptverzeichnis/gallery.pl?path=/galerienverzeichnis/galerie1/bild10.jpg

Das Skript empfängt den Parameter, zerlegt in seinen Bestandteilen, und generiert die Seite neu mit dem entsprechenden Bild (hier Bild10.jpg) im Anzeige-DIV.

Untereinander werden die Galerie ähnlich verlinkt - halt ohne Bilddateinamen:

/scriptverzeichnis/gallery.pl?path=/galerienverzeichnis/galerie3

Das Skript merkt sich - hier ist es egal, ob die Galerien mit oder ohne JavaScript besucht werden -, dass kein Dateinamen im Parameter vorhanden ist, und generiert die Galerieseite mit den Bilder aus dem Verzeichnis »galerie3«.

Dank dedlfix wurde das Ganze nun um die PHP-Version erweitert, die nach dem selben Prinzip funktioniert: Empfangen des Paramters, Verzeichnis einlesen, Thumbs-Verlinkungen generieren etc...

Die PHP- und die Perl-Variante nutzen die selbe Templatedatei (hier wurde sogar dafür gesorgt, dass PHP oder Perl je nach Version oben rechts (in roter Farbe) eingeblendet wird) und die selbe JavaScript-Datei (die aber im Vergleich zur externen JavaScript-Datei der »statischen« Galerie wegen der anderslautenden Linkzielen geändert werden musste):

• Perl-generierte JavaScript-Galerie • PHP-generierte JavaScript-Galerie

zum Testen mit und ohne JavaScript!

-> Forstezung nächste Antwort...

Viele Grüße aus Frankfurt/Main, Patrick

[Patrick Andrieu]

Fortsezung Antwort von: Patrick Andrieu, 08. April 2009, 20:03!

Das gemeinsame Template:

• Template

Die JavaScript- und CSS-Dateien:

• http://www.atomic-eggs.com/z_testdir/files/gallery.js
• http://www.atomic-eggs.com/z_testdir/files/gallery.css

Der PHP-Code:

• s. oben

Der Perl-Code:

• gallery2.pl

Viel Spaß wem's gebrauchen kann!

Fragen nur im Forum (Thema beachten: Perl oder PHP oder JavaScript) mit Hinweis zu diesem Thread!

Viele Grüße aus Frankfurt/Main,
Patrick

[juewi]

Fortsezung Antwort von: Patrick Andrieu, 08. April 2009, 20:03!
...
Viel Spaß wem's gebrauchen kann!

»»

Patrick

Nachdem Junior das Bleiberecht in meiner Gattin verlängern lässt und keine Anstalten macht rauszukommen, werd ich in der nächsten Zeit mich an eurer Gemeinschaftsproduktion versuchen (Sobald meine Domain wieder offen ist).
Wär der Hammer, wenn allein die Änderung der Foto-Dateien in den Ordnern reicht, um die Galerie neu zu bestücken. Genial ...

LG aus Graz, Jürgen

[Patrick Andrieu]

Hallo juewi!

Nachdem Junior das Bleiberecht in meiner Gattin verlängern lässt und keine Anstalten macht rauszukommen,

Erinnert mich irgendwie an irgenjemanden... ;)

Ich bin 15 Tage später als geplant geboren worden - und auch noch an einem Donnerstag (was in Frankreichs Grundschule damals freier Tag war), auch noch mit offenen Händen und ausgestreckten Fingern - wo doch die meisten Babies geballte Fäuste haben: Da sagte meine Mutter: »Oh je, das wird ein Fauler Sack«....

Hm, irgendwie hat sie Recht behalten... ;)

werd ich in der nächsten Zeit mich an eurer Gemeinschaftsproduktion versuchen (Sobald meine Domain wieder offen ist).

Zumal Du jetzt die Wahl der Waffen, äh, der Sprachen hast: Entweder Perl oder PHP - was eben auf deinem Server läuft!

Wär der Hammer, wenn allein die Änderung der Foto-Dateien in den Ordnern reicht, um die Galerie neu zu bestücken. Genial ...

Nicht »Wär«, Ist! Es _ist_ eine ungeheure Erleichterung!

Viele Grüße aus Frankfurt/Main,
Patrick

[juewi]

...
Solele... Heute hatte ich endlich Zeit...
...
Patrick

Aus Sicht des Fotografen, der möglichst vielen Usern dieselbe Galerie-Funktionalität bieten möchte und für Änderungen nicht immer neu notieren will: unglaublich beeindruckend, was mit durchdachten Automatismen und dem dazugehörigen Know-How möglich ist! Gratulation!

LG, Jürgen
(der, dem sein Webspace hoffentlich gleich wieder "unversperrt" sein wird)

[dedlfix]

echo $begrüßung;

Dein Skript funktionierte einwandfrei (nach dem ich erstmals ewig probieren musste, wie ich die Pfade anzugeben hatte) solange... man JavaScript deaktiviert hatte. Mit JavaScript wollte die Galerie-Funktion nicht, weil Dein Skript andere Pfade generierte als die, die das JavaScript erwartet:

Die Pfade in der Perl-Galerie sehen so aus:
<a href="/z_testdir/scripts/perl/gallery2.pl?path=/roadster/urlaub_2004/1230_warten1.jpg">
während die von Deinem Skript so aussahen:
<a href="/z_testdir/scripts/php/gallery.php?path=urlaub_2004/1230_warten1.jpg">

Das liegt aber an der Pfad-Einstellung. Wenn du kein Basisverzeichnis hast, in dem alle Galerien zu liegen kommen oder dies eins ist, das nicht exklusiv für die Galerien gedacht ist, dann kann man die Pfadangabe im URL-Parameter nicht so leicht dagagen prüfen. Stattdessen müsste man eine Prüfung der erlaubten Galerie-Verzeichnisse einfügen.

Wenn der Pfad insgesamt so aussieht /roadster/urlaub_2004/... in echt /z_testdir/scripts/php/roadster/urlaub_2004/... ergibt, kann man durch Angabe von / als Pfad das Scriptverzeichnis auslesen. Viel kann nicht passieren, weil mein Script eh nur nach Bildern Ausschau hält ...

[...] als PHP-Laie, der erstmal suchen mußte, was trim(), rtrim(), und was weiß ich noch was für seltsame PHP-Funktionen wie und was machen,

Hmm, Javascript hat kein trim(), aber dass Perl auch keins hat wundert mich. Zumindest weiß Selfhtml nichts von trim(). Allerdings verwende ich die trim()s mit einem weniger bekannten zweiten Parameter, mit dem man auch andere Zeichen als die üblichen Whitespace wegtrimmen kann. Das Getrimme soll dafür sorgen, dass bei allen Schreibweisen am Ende eine korrekte Anzahl von / im Pfad vorkommen.

Aber zunächst... das Skript in Deinem zweiten Posting dient nur dazu, die Thumbnails automatisch generieren zu lassen, ja? [...] Sehen wir das als Zugabe, ja?

Gut, dann war das quasi überflüssig, es zu erstellen.

Diese DOCUMENT_ROOT-Abfrage und das Definieren der gleichnamigen Konstante zu Beginn des Skripts »common.php« ist wofür? Die Konstante wird nämlich nicht mehr gebraucht (taucht nirgends mehr auf).

Ihr Anwendungsfall ist mir beim Umgestalten während des Entwurfprozesses entschwunden. Die Erstellerei kann damit auch entfallen.

Das mit den Verzeichnissen hatte ich mir so gedacht:
GALLERY_BASE_DIRECTORY zeigt auf das Basisverzeichnis aller Galerien. In meinem Fall war das "galleries", also relativ zum Scriptverzeichnis und übersetzt in dein Pfadsystem wäre das /z_testdir/scripts/perl/galleries. Für die Galerie "roadster/urlaub_2004" ergäbe sich damit dieser absolute Pfad: /z_testdir/scripts/perl/galleries/roadster/urlaub_2004. Du hättest eigentlich nur 'galleries' durch '' austauschen müssen. Und wenn du den führenden / für das Javascript-Script brauchst, dann müsste noch ein / zwischen = und %s in der Zeile $href = sprintf('%s?%s=%s', ... in der Funktion createHtmlFromTemplate() eingefügt werden müssen.

Der führende / hat jedenfalls keine Bedeutung. Ob er nun da ist oder nicht ... die Galerie(n) befinden sich immer im gleichen Verzeichnis und der Weg muss mit oder ohne / stets der gleiche sein. Deswegen hab ich ihn nicht mit ausgegeben.

Auch musste ich eine Konstante DIR_PATH definieren, um mal damit konkatenieren oder mal substringen zu können.

DIR_PATH ist nicht gerade ein sprechender Bezeichner. Mit dem Namen kann das ein Pfad zu jedem möglichen Verzeichnis sein.

Noch einen Pfadbestandteil würde ich allerdings nicht einführen wollen. Notwendige Anpassungen sollte eher in der createHtmlFromTemplate() erfolgen

Ist sicher nicht das gelbe von Ei [1], so aber erhalte ich die Thumbsverlinkungen und Bild-Referenzierung im DIV »show« so, wie ich sie haben will.

Für "show" ist $templateVars (ebenfalls in createHtmlFromTemplate()) zuständig.

Also an dieser Stelle erneut vielen Dank für das Skript! Dass ich solange gebraucht habe, die paar Änderungen einzubauen, hat damit zu tun, dass ich in der common.php mit diesen ganzen Pfadangaben und -manipulationen nicht durchgeblickt habe, und mir alles mittels echo ausgeben lassen musste.

Dabei hab ich doch extra jeweils ein Beispiel darunter geschrieben, was aus dem Pfad werden soll.

echo "$verabschiedung $name";

[Patrick Andrieu]

Hallo dedlfix!

»» [Pfade]
Das liegt aber an der Pfad-Einstellung. Wenn du kein Basisverzeichnis hast, in dem alle Galerien zu liegen kommen oder dies eins ist, das nicht exklusiv für die Galerien gedacht ist, dann kann man die Pfadangabe im URL-Parameter nicht so leicht dagagen prüfen. Stattdessen müsste man eine Prüfung der erlaubten Galerie-Verzeichnisse einfügen.
Wenn der Pfad insgesamt so aussieht /roadster/urlaub_2004/

Ja.

in echt /z_testdir/scripts/php/roadster/urlaub_2004/

Nein:

/kunden/homepages/12/d123456879/htdocs/aec (1. Zahlen geändert; 2. für den Virtual Host atomic-eggs.com [aec])

ist mein DOCUMENT_ROOT wie es $ENV{DOCUMENT_ROOT} in Perl ausspuckt und wie es $_SERVER[DOCUMENT_ROOT] in PHP auch tut.

Die Galerien befinden sich demnach in:

/kunden/homepages/12/d123456879/htdocs/aec/roadster

und NICHT in:

/kunden/homepages/12/d123456879/htdocs/aec/z_testdir/scripts/php/roadster

Mit diesem ganzen DOCUMENT_ROOT-Gacke und die verschiedenen Interpretationen duch die Webhostern kämpfe ich, seit dem ich mein GB öffentlich gemacht habe.

Ich verstand es bisher immer so, dass DOCUMENT_ROOT das Webseitenverzeichnis ist. Das hat bei mir bisher bei 3 verschiedenen Hostern geklappt, anscheinend gibt es aber welche, bei denen das DOCUMENT_ROOT ein paar Ebenen höher liegt, als das für den User mittels FTP und HTTP erreichbaren »Webseitenverzeichnis«.

Seltsam auch bei PHP (und bei mir, also bei 1&1 gehostet):

$ENV{DOCUMENT_ROOT} (Perl) oder $_SERVER[DOCUMENT_ROOT] (PHP) ergeben:

/kunden/homepages/12/d123456879/htdocs/aec

aber... realpath(irgenwas) ergibt:

/homepages/12/d123456879/htdocs/aec

???

»/kunden« ist weg... da kann man solche überprüfungen einbauen, von wegen wenn das in dies nicht enthalten ist, dann path violation! Dann stimmt es nie und nimmer nie!

Ich will für die Neufassung meines GBs eine Installationsroutine machen, die scheitert im reinen Perl aber daran, dass sich das »Webseitenverzeichnis« nicht ermitteln läßt. Leider werde ich auf PHP zurückgreifen müssen, um die Pfade zu ermitteln, weil... aargh, je nach Hoster Perl nur innerhalb des cgi-bin-Verzeichnisses ausführbar ist. Wie soll ich dann ein vom DOCUMENT_ROOT abweichendes »User-Verzeichnis« ermitteln lassen? Das geht nur mit PHP, weil dies überall ausführbar ist.

»» [...] als PHP-Laie, der erstmal suchen mußte, was trim(), rtrim(), und was weiß ich noch was für seltsame PHP-Funktionen wie und was machen,
Hmm, Javascript hat kein trim(),

ja...

aber dass Perl auch keins hat wundert mich. Zumindest weiß Selfhtml nichts von trim().

perldoc -f trim sagt: NADA!

Allerdings verwende ich die trim()s mit einem weniger bekannten zweiten Parameter, mit dem man auch andere Zeichen als die üblichen Whitespace wegtrimmen kann

Das hat mich auch gewundert, nachdem ich nach trim() im Internet suchte,  aber ich hatte dann Deine Absicht verstanden.

Das Getrimme soll dafür sorgen, dass bei allen Schreibweisen am Ende eine korrekte Anzahl von / im Pfad vorkommen.

Ja? ;)

»» Aber zunächst... das Skript in Deinem zweiten Posting dient nur dazu, die Thumbnails automatisch generieren zu lassen, ja? [...] Sehen wir das als Zugabe, ja?
Gut, dann war das quasi überflüssig, es zu erstellen.

Aber nein! Das klingt jetzt so enttäuscht von Dir... Das Skript wird im Artikel schon seine Verwendung finden. Nichts, was Du hier schreibst und empfiehlst, ist überflüssig. Und schon gar nicht deswegen, weil ich es gerade hier nicht gebraucht habe.

»» Diese DOCUMENT_ROOT-Abfrage und das Definieren der gleichnamigen Konstante zu Beginn des Skripts »common.php« ist wofür? Die Konstante wird nämlich nicht mehr gebraucht (taucht nirgends mehr auf).
Ihr Anwendungsfall ist mir beim Umgestalten während des Entwurfprozesses entschwunden. Die Erstellerei kann damit auch entfallen.

OK.

Das mit den Verzeichnissen hatte ich mir so gedacht:
GALLERY_BASE_DIRECTORY zeigt auf das Basisverzeichnis aller Galerien. In meinem Fall war das "galleries",[...]

gekürzt

Das Problem ist, dass wir nicht wissen, so wir denn sowas etwas allgemeiner anbieten wollen, ob die User einen speziellen Galerie-Verzeichnis haben. So könnte es sein, dass ein User eine Galerie in /abc, eine zweite in /def hat - und dennoch ein Skript dafür benutzen möchte...

OK, Deine Variante ist in dem Fall super sicher, da es dagegen geprüft wird. In dem Fall müssten wir die Erläuterungen anpassen.

DIR_PATH ist nicht gerade ein sprechender Bezeichner. Mit dem Namen kann das ein Pfad zu jedem möglichen Verzeichnis sein.

Mag sein, Beat hat mich schon mal auf meine komischen Bezeichner hingewiesen, damals, bei der ersten Version meines Date::Today-Moduls (s. Sig unter »Heute«: mittlerweile habe ich die Bezeichner an Date::Calc angepasst).

Dass ich solange gebraucht habe, die paar Änderungen einzubauen, hat damit zu tun, dass ich in der common.php mit diesen ganzen Pfadangaben und -manipulationen nicht durchgeblickt habe, und mir alles mittels echo ausgeben lassen musste.
Dabei hab ich doch extra jeweils ein Beispiel darunter geschrieben, was aus dem Pfad werden soll.

?

And I send you all my thanks and a bang on the ear (Frei nach »Waterboys«)

Viele Grüße aus Frankfurt/Main,
Patrick

[dedlfix]

echo $begrüßung;

Ich verstand es bisher immer so, dass DOCUMENT_ROOT das Webseitenverzeichnis ist. Das hat bei mir bisher bei 3 verschiedenen Hostern geklappt, anscheinend gibt es aber welche, bei denen das DOCUMENT_ROOT ein paar Ebenen höher liegt, als das für den User mittels FTP und HTTP erreichbaren »Webseitenverzeichnis«.

De facto ist das DocumentRoot definiert als das reale Verzeichnis im Dateisystem, das bei http://example.com/datei dem Verzeichnis entspricht, in dem "datei" liegt (wenn man von einer 1:1-Zuordnung von Ressourcen auf Dateien ausgeht). Bei einem Webhoster muss nicht zwangsläufig das DcumentRoot dem Kundenverzeichnis entsprechen. Oft ist das so, aber das hat schließlich den Nachteil, dass dann alle Kundendateien aus dem Web erreichbar sind (wenn man das Ausliefern nicht in der Verzeichniskonfiguration verbietet). Empfehlenswert ist, im Kundenverzeichnis Unterverzeichnisse anzulegen und die DocumentRoots dorthin zeigen zu lassen.

/kunden/kundeX/                   = KundenRoot (und oftmals auch DocumentRoot)
/kunden/kundeX/domainA/           = DocumentRoot der Domain A
/kunden/kundeX/domainA/galleries/ = Galerien-Verzeichnis im DocumentRoot
/kunden/kundeX/galleries/         = Galerien-Verzeichnis außerhalb des DocumentRoots

Die letzte Möglichkeit lassen wir mal aus, das kann der Fortgeschrittene selbst implementieren.

Der Kunde hat mit FTP Zugriff auf /kunden/kundeX/, also sein KundenRoot mit all seinen DocumentRoots darin. DocumentRoot sollte wohl besser DomainDocumentRoot heißen.

Seltsam auch bei PHP (und bei mir, also bei 1&1 gehostet):
$ENV{DOCUMENT_ROOT} (Perl) oder $_SERVER[DOCUMENT_ROOT] (PHP) ergeben:
/kunden/homepages/12/d123456879/htdocs/aec
aber... realpath(irgenwas) ergibt:
/homepages/12/d123456879/htdocs/aec

Das ist ein vermutlich historisch bedingtes "Problem". Meine Interpretation dazu ist, dass es früher mal ein reales Verzeichnis /kunden/homepages/ gab, das mittlerweile um die überflüssig gewordene Ebene /kunden/ gekürzt wurde und heute nur noch /homepages/ heißt. Dummerweise gab es Konfigurationen und Kundenscripte, die fest kodiert /kunden/homepages/ verwendeten und nun weiterhin funktionieren mussten. Also legte man in / einen Symlink namens kunden an, der auf / verweist. Verwendet man /kunden ist das real gesehen gleich /, beziehungsweise /kunden/homepages/ entspricht real /homepages/. Im Apachen ist das DocumentRoot immer mit /kunden konfiguriert. Und realpath() löst nicht nur .. auf sondern auch solche Symlinks.

»/kunden« ist weg... da kann man solche überprüfungen einbauen, von wegen wenn das in dies nicht enthalten ist, dann path violation! Dann stimmt es nie und nimmer nie!

Deswegen setze ich auch nicht auf die direkten Angaben im Script sondern löse sie mit realpath() in ihre schnörkellose, real existierende Form auf.

Ich will für die Neufassung meines GBs eine Installationsroutine machen, die scheitert im reinen Perl aber daran, dass sich das »Webseitenverzeichnis« nicht ermitteln läßt. Leider werde ich auf PHP zurückgreifen müssen, um die Pfade zu ermitteln, weil... aargh, je nach Hoster Perl nur innerhalb des cgi-bin-Verzeichnisses ausführbar ist. Wie soll ich dann ein vom DOCUMENT_ROOT abweichendes »User-Verzeichnis« ermitteln lassen? Das geht nur mit PHP, weil dies überall ausführbar ist.

Das Userverzeichnis (oder KundenRoot) lässt sich nicht ermitteln. Es gibt keine Konvention, dafür eine Umgebungsvariable oder dergleichen zu erstellen, wie es beim DocumentRoot der Fall ist.

» Gut, dann war das quasi überflüssig, es zu erstellen.
Aber nein! Das klingt jetzt so enttäuscht von Dir...

Achwas. Ich verwende beim Tippen immer emotionslose Buchstaben.

Das Problem ist, dass wir nicht wissen, so wir denn sowas etwas allgemeiner anbieten wollen, ob die User einen speziellen Galerie-Verzeichnis haben. So könnte es sein, dass ein User eine Galerie in /abc, eine zweite in /def hat - und dennoch ein Skript dafür benutzen möchte...

Wir definieren einfach die Best Practice, die wird im Artikel beschrieben und wenn jemand davon abweicht, ist das seine Anpassungsangelegenheit. Ich hab es ja einigermaßen flexibel implementiert (denke ich).

Best Practice wäre meiner Ansicht nach ein Basisverzeichnis für alle Galerien und darin in beliebiger Tiefe die Galerie-Verzeichnisse.

echo "$verabschiedung $name";

[Patrick Andrieu]

Hallo dedlfix!

[...]

Vielen Dank für Deine Antwort.

Ich habe im Moment leider wenig Zeit (sieht man daran, dass ich sonst innerhalb weniger Studen geantwortet hätte): Monatelang Bewerbungen geschrieben und nichts tat sich und auf einmal, durch Zufall, habe ich mehr zu tun, als mir (fast) lieb wäre...

Jedenfalls konnte ich die letzten 2 oder 3 Tage kaum Forum lesen.

Wir definieren einfach die Best Practice, die wird im Artikel beschrieben und wenn jemand davon abweicht, ist das seine Anpassungsangelegenheit. Ich hab es ja einigermaßen flexibel implementiert (denke ich).

Best Practice wäre meiner Ansicht nach ein Basisverzeichnis für alle Galerien und darin in beliebiger Tiefe die Galerie-Verzeichnisse.

Ich bin damit einverstanden und werde auch in der Perl-Version ein Default-Gallery-Directory einbauen.

Alles weitere, wenn der Thread Richtung Archiv verschwunden sein sollte, per E-Mail.

Vielleicht ergibt sich auch eine Gelegenheit, dass wir uns mal treffen. Ich bin zwar meistens im Rhein-Main-Gebiet unterwegs, aber wer weiß? ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[juewi]

Hallo Jürgen, hallo myself!

»»

Ich bin aber noch neugieriger darauf, ob ich sowas hinkriege!

galerie.js:
...

»»

genial!
Auf die Schnelle in 1 Minute eingebaut -> www.juergen-wiedner.at/menschen2.html

und funktioniert traumhaft!!! und der HTML-Code im thumbliste-div ist ja enorm erschlankt!
Ich hab zwar noch keine Ahnung wie oder warum ;-))) aber ich versuch mal den Code zu knacken und wieder für mich selbst zu erklären wenns erlaubt ist.

In der CSS notierst Du noch:
cursor:pointer; bei ul#blaettern li {}
und nimmst es aus ul#blaettern li:hover raus (dann klappt's auch mim IE6, der :hover nur für Links kennt).

Ah ja, danke - an die Möglichkeit hab ich nicht gedacht.

<div id="kopf"><br>

<br>
</div>

> stethen? Wozu die <br>?  

Codeleiche ;-) schon beseitigt.  
  
  

> Viele Grüße aus Frankfurt/Main,  
> Patrick  

Ebensolche retour aus Graz, Jürgen  
  
PS: Sorry für die späte Reaktion aber ich wollte endlich die Seite funktionsfähig online stellen - fürs erste funktioniert sie \*juchu\* ;-)

[Patrick Andrieu]

Hallo juewi!

genial!

Merci... ;)

Auf die Schnelle in 1 Minute eingebaut -> www.juergen-wiedner.at/menschen2.html
und funktioniert traumhaft!!! und der HTML-Code im thumbliste-div ist ja enorm erschlankt!
Ich hab zwar noch keine Ahnung wie oder warum ;-))) aber ich versuch mal den Code zu knacken und wieder für mich selbst zu erklären wenns erlaubt ist.

Nun ja, das ist (zuminddest eine Teilmenge dessen) was man unter »unobstrusives« JavaScript versteht. Ich denke, Mathias wird es hier sicher besser erklären als ich, aber darunter versteht man unter Anderem:

• JavaScript soll sich nicht aufdränge (unobstruviv)
• JavaScript erhöht den Komfort einer Webseite, sollte aber
  nicht Zweck sein
• JavaScript- und HTML-Code sollten strikt getrennt voneinander bleiben,
  weswegen in diesen Beispielen kein JavaScript-Code im HTML notiert ist
  (sondern ausgelagert, auch keine Event-Handler-Attribute in den Tags - wie
  »onload«, »onclick«, »onmouseover«... etc.).

Mathias' Code solltest Du übrigens auch ausprobieren. Beide sind ziemlich ähnlich, doch auch verschieden - das Ergebnis ist aber das Selbe!

Ebensolche retour aus Graz, Jürgen

Ich war ein paar Mal in Österreich, weiß aber nicht mehr, ob ich bereit in Graz war. Ich weiß mit Sicherheit noch, dass ich in:

• Hallein (bei Salzburg)
• Salzburg
• Gmünden
• Linz
• Wien
• Klagenfurt
• Bad Kleinkirchheim

so... das dürfte alles sein ;) Kannst Du ebenso viele frz. Städte aufliste, die Du besucht hast? ;)

PS: Sorry für die späte Reaktion

Keine Ursache. Ich weiß doch, was Dich bald erwartet: Windeln wechseln... und auf's erste Lächeln warten!

Viele Grüße aus Frankfurt/Main,
Patrick

[juewi]

• JavaScript- und HTML-Code sollten strikt getrennt voneinander bleiben,
  weswegen in diesen Beispielen kein JavaScript-Code im HTML notiert ist
  (sondern ausgelagert, auch keine Event-Handler-Attribute in den Tags - wie
  »onload«, »onclick«, »onmouseover«... etc.).

finde ich auch günstiger - verringert in gewissem Maß die Anfangsverwirrung von Einsteigern wie ich einer bin. Obwohl ich schon stolz auf meine (Er)Kenntnisse bin nachdem ich vor ziemlich genau 12 Monaten noch gedacht habe: "was soll denn HTML heissen? ..." ;-)

Mathias' Code solltest Du übrigens auch ausprobieren. Beide sind ziemlich ähnlich, doch auch verschieden - das Ergebnis ist aber das Selbe!

Kommt als nächstes dran - wird dann menschen3.html. Bis mir die Ziffern ausgehen ;-)

• Hallein (bei Salzburg)
• Salzburg
• Gmünden
• Linz
• Wien
• Klagenfurt
• Bad Kleinkirchheim

so... das dürfte alles sein ;) Kannst Du ebenso viele frz. Städte aufliste, die Du besucht hast? ;)

Ich befürchte ich bringe diese Anzahl nicht mal zustande mit den frz. Städten die ich KENNE ;-) Pardon.

Keine Ursache. Ich weiß doch, was Dich bald erwartet: Windeln wechseln... und auf's erste Lächeln warten!

Ja, meine Frau meinte schon, ob ich ihn nicht ausräuchern könnte - sie wäre schon lange genug schwanger gewesen.

------------------------------------------------------------------------
Zum Thema:
Die Variablendeklarationen und einige Kleinigkeiten in Deinem Script sind mir klar aber bei der Verschachtelung der Funktionen blick ich leider gar nicht durch, wann welche Funktion warum ausgeführt wird und auch was bewirkt ...

Ein paar Einzelheiten draus:

direction = direction < summe-1 ? direction+1 : direction;
ist das eine Art von IF-Schleife?

bilderlinks[i].ind= i;
nur der Vollständigkeit halber: wofür steht ind?

Vielleicht findest Du ja in einer Mußestunde Zeit um eine Abhandlung über das Script in übersetzter Form Scriptcode-Dummiedeutsch zu erstellen ;-)

[Patrick Andrieu]

Hallo juewi!

)

Ich befürchte ich bringe diese Anzahl nicht mal zustande mit den frz. Städten die ich KENNE ;-) Pardon.

Dann fangen wir mal damit an: ich komme aus der Nähe von Bordeaux http://www.atomic-eggs.com/scr/gironde/. Ja, Frankreich besteht nicht nur aus Paris. Paris ist ein unbedeutender Teil im vergleichen zur riesigen »France Profonde« (Frankreichs tiefste Provinz - weil für Pariser alles andere eh »Provinz« ist *g*)...

»» Keine Ursache. Ich weiß doch, was Dich bald erwartet: Windeln wechseln... und auf's erste Lächeln warten!
Ja, meine Frau meinte schon, ob ich ihn nicht ausräuchern könnte -

Hm, das Kind ausräuchern? Was habt Ihr in Österreich für rauhe Sitten ;)

direction = direction < summe-1 ? direction+1 : direction;
ist das eine Art von IF-Schleife?

Ja, eine Art Kurzform für:

if (...) {...}  
else {...}

Im Klartext:

if (direction kleiner als summe-1) { direction = direction+1; }  
else { direction = direction; } // also den Wert, den es hat, wenn es NICHT kleiner als summe-1 ist

bilderlinks[i].ind= i;
nur der Vollständigkeit halber: wofür steht ind?

Ja, mea Culpa. Ich bin in Sachen Variablen-Namen-Erfinden nicht so fit... Soll »index« meinen. Nur kann man nicht »index« nehmen, weil JavaScript-reserviert. Deswegen hatte Struppi in seiner Erklärung a[i]._index_ = i; genommen...

Vielleicht findest Du ja in einer Mußestunde Zeit um eine Abhandlung über das Script in übersetzter Form Scriptcode-Dummiedeutsch zu erstellen ;-)

Ja, das steht noch an, nur habe ich derzeit nur sporadisch Zeit. Kommt drauf an, was anderssweitig zu tun ist, und es kann sein, dass ich den ganzen Tag zu Hause bleiben darf - oder wie heute: den ganzen Tag unterwegs durchs deutsche Texas (Bayern) on the Road bin ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[juewi]

»» direction = direction < summe-1 ? direction+1 : direction;
»» ist das eine Art von IF-Schleife?

Ja, eine Art Kurzform für:

if (...) {...}

else {...}

>   
> Im Klartext:  
>   
> ~~~javascript

if (direction kleiner als summe-1) { direction = direction+1; }  

> else { direction = direction; } // also den Wert, den es hat, wenn es NICHT kleiner als summe-1 ist

Ok, mit eurer durchlauchten Erlaubnis ändere ich das noch auf eine für mich lesbare Notierung um; Steno war in der Schule auch nicht mein Lieblingsfach.

»» bilderlinks[i].ind= i;
»» nur der Vollständigkeit halber: wofür steht ind?
... Soll »index« meinen. Nur kann man nicht »index« nehmen, weil JavaScript-reserviert...

Ah ok, hätt ich auch selbst draufkommen können. Aber das mit der Reservierung isn guter Hinweis.

... oder wie heute: den ganzen Tag unterwegs durchs deutsche Texas (Bayern) on the Road bin ;)

Iss eine Weisswurscht für mich - schon lange keine mehr gehabt ;-)

So, Sandmann ruft, gute Nacht

LG, Jürgen

PS: Zur Info: Hab eine neuerlichen CSS-Thread eröffnet ...

[Patrick Andrieu]

Hallo juewi!

»» »» direction = direction < summe-1 ? direction+1 : direction;
»» Ja, eine Art Kurzform für:
»» ~~~javascript

if (direction kleiner als summe-1) { direction = direction+1; }

»» else { direction = direction; } // also den Wert, den es hat, wenn es NICHT kleiner als summe-1 ist

> Ok, mit eurer durchlauchten Erlaubnis ändere ich das noch auf eine für mich lesbare Notierung um; Steno war in der Schule auch nicht mein Lieblingsfach.  
  
Eigentlich ist die Kurzform einfacher zu lesen (meine ich):  
  
   `var somevar = bedingung ? wert_1 : wert_2;`{:.language-javascript}  
  
Ist »bedingung« erfüllt ? dann wert\_1 sonst wert\_2  
  

> »» ... oder wie heute: den ganzen Tag unterwegs durchs deutsche Texas (Bayern) on the Road bin ;)  
> Iss eine Weisswurscht für mich - schon lange keine mehr gehabt ;-)  
  
So weit »unten« war's da nicht, eher Franken...  
  
  
Viele Grüße aus Frankfurt/Main,  
Patrick

-- 
\_ - jenseits vom delirium - \_  
![](http://www.atomic-eggs.com/fuernA.jpg)  
   [Diblom](http://www.atomic-eggs.com/pics/diblom.png)   [[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash](http://www.atomic-eggs.com/)]  
[J'ai 10 ans!](http://www.atomic-eggs.com/wae/wae_10.shtml#a5) | Achtung [Agentur](http://www.atomic-eggs.com/cwi/cwi_5.shtml#a5)! | Nichts ist unmöglich? [Doch!](http://www.atomic-eggs.com/cwi/cwi_4.shtml) | [Heute](http://www.atomic-eggs.com/cgi-bin/date_today.pl) schon ge[gök](http://goek.atomic-eggs.com/goek_goek.html)t?

[juewi]

@@ Patrick:

Ohhh la la ... Jetzt hab ich erst Dein verstecktes ~~~javascript img.style.opacity = '0.5';

  
Ich hab bei meinem Vater - klassischer User: lahmes Internet und spärlichste Surf-Erfahrung - beobachtet, dass er zB auf meiner Seite nach Klick auf ein Thumbnail nicht weiss, ob da was kommt oder nicht und klickt halt fleissig weiter. Ergo: 10 Thumbnails durchgeklickt, 2 Fotos erhascht und demnach relativ enttäuscht ausgestiegen.  
Und so wollte ich schon immer einen Ladebalken für evtl. länger dauernde Grafik-Ladezeiten als Service für unbedarfte User einbauen, bin aber gescheitert.  
  
Jetzt bin ich auf die glorreiche Idee gekommen, ein Ladebalken-gif als Hintergrundbild im div bzw. in der Tabellenzelle einzubauen, dass durch Deinen Deckkraft-Code beim (ganzen oder teilweisen) Ausblenden des Bildes dieses gif quasi durchscheint. Was soll ich sagen: [funktioniert!](http://www.juergen-wiedner.at/menschen2.html) Yippie!  
  
Danke für diesen (wenn auch unabsichtlichen ;-)) äußerst wertvollen Denkanstoß!  
  
LG, Jürgen  
  
PS: Je nach verfügbarer Zeit werd ich meine Seiten noch sukzessive auf Deine schönere Codierung umstellen.

[Patrick Andrieu]

Hallo juewi!

@@ Patrick:

Ohhh la la ... Jetzt hab ich erst Dein verstecktes ~~~javascript

img.style.opacity = '0.5';

> Danke für diesen (wenn auch unabsichtlichen ;-)) äußerst wertvollen Denkanstoß!  
  
Bedank Dir bei Struppi, denn Ehre wem Ehre gebührt: Er hatte das in seiner Verbesserung meines ersten Beispiels eingebaut, [was mich zu einer Rückfrage nötigte](http://forum.de.selfhtml.org/archiv/2009/2/t183494/#m1216567), denn dank mein SuperTrooper-DSL-16000-Anschluß hatte ich den Sinn nicht verstanden - weil nie gesehen ;)  
  
Im Übrigen habe ich in diesem letzten Beispiel Anstöße sowohl von Mathias als auch von Struppi eingebaut. Demnach sind wir alle daran beteiligt, dass Du zufrieden bist ;)  
  

> Was soll ich sagen: [funktioniert!](http://www.juergen-wiedner.at/menschen2.html) Yippie!  
  
Schade... Bald wirst Du uns gar nicht mehr brauchen ;)  
Aber schön, ich denke, Du lernst schnell!  
  
  
Viele Grüße aus Frankfurt/Main,  
Patrick

-- 
\_ - jenseits vom delirium - \_  
![](http://www.atomic-eggs.com/fuernA.jpg)  
   [Diblom](http://www.atomic-eggs.com/pics/diblom.png)   [[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash](http://www.atomic-eggs.com/)]  
[J'ai 10 ans!](http://www.atomic-eggs.com/wae/wae_10.shtml#a5) | Achtung [Agentur](http://www.atomic-eggs.com/cwi/cwi_5.shtml#a5)! | Nichts ist unmöglich? [Doch!](http://www.atomic-eggs.com/cwi/cwi_4.shtml) | [Heute](http://www.atomic-eggs.com/cgi-bin/date_today.pl) schon ge[gök](http://goek.atomic-eggs.com/goek_goek.html)t?

[juewi]

Im Übrigen habe ich in diesem letzten Beispiel Anstöße sowohl von Mathias als auch von Struppi eingebaut. Demnach sind wir alle daran beteiligt, dass Du zufrieden bist ;)

Dafür bin ich euch auch sehr dankbar. Trotz Internetrecherche stößt man schnell an die Grenze zwischen Vorstellung und Unvermögen und da ist´s sehr toll, dass es euch hilfsbereiten Spezialisten gibt, die nervenstark sich meinen Dummie-Fragen stellen ;-)

Schade... Bald wirst Du uns gar nicht mehr brauchen ;)

Wenn Du wüsstest, welche OBTRUSIVEN Ideen ich haben kann! Keine Sorge also ;-)

Aber schön, ich denke, Du lernst schnell!

Naja, da ich ja mal hobbymäßig mit Pascal und VisualBasic eine Zeit lang herumgespielt habe sind mir einige Dinge bekannt aber wenns dann um Objekte, Eigenschaften, Methoden, verschachtelte Funktionen usw. geht steh ich im Wald. Naja, Rom wurde auch nicht an 1 Tag erbaut.

LG und schönen Sandmann noch

Jürgen

[juewi]

»» Schade... Bald wirst Du uns gar nicht mehr brauchen ;)
Wenn Du wüsstest, welche OBTRUSIVEN Ideen ich haben kann! Keine Sorge also ;-)

Und geht schon los ...

Kein must-have, interessiert mich aber und könnte gehen:

ob mit dem durch onclick eruierten Indexwert das dazugehörige Thumb angesprochen werden kann - zB opacity auf 50% runter.

Hab schon viel probiert aber - Fehlanzeige ;-(
Gäbe es vielleicht Winks mit Zaunpfählen?

[Patrick Andrieu]

Hallo juewi!

»» »» Schade... Bald wirst Du uns gar nicht mehr brauchen ;)
»» Wenn Du wüsstest, welche OBTRUSIVEN Ideen ich haben kann! Keine Sorge also ;-)

Soso, indiskrete also? ;)

ob mit dem durch onclick eruierten Indexwert das dazugehörige Thumb angesprochen werden kann - zB opacity auf 50% runter.

Auf die Schnelle losgeschossen... this.firstChild? Vorausgesetzt es sind keine Leerzeichen oder Zeilenumbrüche zwischen <a href="..."> und <img src="theThumnail">

Viele Grüße aus Frankfurt/Main,
Patrick

[juewi]

solange ich als Web-Amateur noch posten kann:

******************************************************************************
Vielen Dank an alle Beteiligten für eure kompetente und nette Unterstützung!!!
******************************************************************************

LG, Jürgen

[juewi]

solange ich als Web-Amateur noch posten kann:

******************************************************************************
Vielen Dank an alle Beteiligten für eure kompetente und nette Unterstützung!!!
******************************************************************************

LG, Jürgen

[Patrick Andrieu]

Hallo juewi!

Iss eine Weisswurscht für mich - schon lange keine mehr gehabt ;-)

Heute war ich in Gstadt am Chiemsee... Ist auf jeden Fall unterhalb des Weißwurst-Äquators ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[Kai345]

[latex]Mae  govannen![/latex]

[...] unterhalb des Weißwurst-Äquators ;)

beginnt Nord-Afrika.

Cü,

Kai

[molily]

Nun ja, das ist (zuminddest eine Teilmenge dessen) was man unter »unobstrusives« JavaScript versteht. Ich denke, Mathias wird es hier sicher besser erklären als ich

Nö. Nur, dass es unobtrusive heißt und nichts mit Obst zu tun hat. ;)

Mathias

[Patrick Andrieu]

Hallo molily!

»» Nun ja, das ist (zuminddest eine Teilmenge dessen) was man unter »unobstrusives« JavaScript versteht. Ich denke, Mathias wird es hier sicher besser erklären als ich
Nö.

Dann bin ich doch nicht so schlecht im Erklären, dafür...

Nur, dass es unobtrusive heißt

im Merken von Fremdwörtern. Normalerweise habe ich aufgrund meiner romanischer Herkunft die wenigsten Probleme, mit dem was hier als »Fremdwort« gilt, doch hier finde ich in der frz. Sprache keinen Äquivalent[1]...

und nichts mit Obst zu tun hat.

Vielleicht hatte ich eher _obs_zön im Kofp... ;)

[1] OK, die frz. Wikipedia übersetzt unobtrusive JavaScript mit JavaScript discret. Eine deutsche Übersetzung gibt es (noch) nicht.

Viele Grüße aus Frankfurt/Main,
Patrick

[Hans]

Hi,

genial!
Auf die Schnelle in 1 Minute eingebaut -> www.juergen-wiedner.at/menschen2.html

ich wollte mir das gerade mal anschauen. Da kommt aber leider:
"Die Domain "www.juergen-wiedner.at" wurde gesperrt."

Schade, aber was nich viel wichtiger ist, darf ein Hoster sowas?

Ich meine er schreibt ja nicht "Domain zur Zeit nicht verfügbar" oder schlicht "Offline". Er schreibt eher der Nesitzer hat was Böses gemacht oder nicht bezahlt, also ein regelrechter Pranger.

Hans

[Patrick Andrieu]

Hallo Hans!

Ich meine er schreibt ja nicht "Domain zur Zeit nicht verfügbar" oder schlicht "Offline". Er schreibt eher der Nesitzer hat was Böses gemacht oder nicht bezahlt, also ein regelrechter Pranger.

Den Grund erklärt Jürgen hier. Aber ich stimme Dir zu, der Hoster glänzt nicht gerade durch Spingerfitzengefühl[1] ;). Da denkt man sich als Besucher alles Mögliche...

[1] Ich hab's nicht absichtlich so geschrieben, sondern hatte tatsächlich einen Drungenzeher, jetzt finde ich's aber lustig...

Viele Grüße aus Frankfurt/Main,
Patrick

[Der Martin]

Hallo Patrick,

Spingerfitzengefühl[1] ;)
[1] Ich hab's nicht absichtlich so geschrieben, sondern hatte tatsächlich einen Drungenzeher

nicht eher einen Kningerfoten?

jetzt finde ich's aber lustig...

Ich auch. Ich hatte als Jugendlicher mal so eine Phase, wo ich schon fast mit Besessenheit Bachstuben und ganze Wechsen versilbelt habe, und ich hatte einen Rasenspieß dabei. Okay, meinen Mischmenten bin ich damit sicher manchmal auf die Gangen generven, aber die meisten konnten wie ich lüber drachen.

Tönen Schag auch,
 Martin

[Patrick Andrieu]

Hallo Mer Dartin!

meinen Mischmenten bin ich damit sicher manchmal auf die Gangen generven,

Fanche minden das bächtig m... ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[Der Martin]

Moin!

Hallo Mer Dartin!
»» meinen Mischmenten bin ich damit sicher manchmal auf die Gangen generven,
Fanche minden das bächtig m... ;)

"mlöd" klingt blöd, gell?
Aber ich sehe, du hast das Verzip prinstanden. :-)
Ich hab ja auch nicht immer den gleichen Unsann verzipft, sondern mir gelegentlich auch was Neues einfassen lallen.
Muz Leipsieb sträwkcür nesel. Sad etnnok hci hcua lam githcir tug. Nehcsiwzni nib hci redeiw sawte sua red Gnubü.

Nenie nenöhcs Hcowttim hcon,
 Nitram

[molily]

/* Objekt-Container (Object-Literal) */  
var galerie = {  
	/* Konfiguration */  
	  
	/* ID der Liste */  
	thumbnailListenId : "thumbliste",  
	  
	/* ID des Vollbildes */  
	vollbildId : "aktuelles_foto", // entsprechende ID musst du vergeben, derzeit ist hat es nur einen Namen  
	  
	/* Anfangs ist das erste Bild zu sehen */  
	aktuellesBildIndex : 0,  
	  
	/* Startfunktion */  
	start : function () {  
		// Führe Init-Funktion beim fertigen Laden aus.  
		// Hier wird nicht einfach mit window.onload gearbeitet, damit noch weitere  
		// Scripte window.onload für ihre Initialisierung nutzen können.  
		if (document.addEventListener) {  
			// Für standardkonforme Browser  
			document.addEventListener("load", galerie.init, false);  
			// Arbeite mit dem DOMContentLoaded-Event, der schon vor dem load-Event passiert,  
			// sobald der DOM-Zugriff auf alle Elemente möglich ist  
			document.addEventListener("DOMContentLoaded", galerie.init, false);  
			// Mit DOMContentLoaded kann das Script schon früh initialisiert werden.  
			// Dadurch ist die Thumbnail-Liste schon dann bedienbar, wenn noch nicht  
			// alle Bilder geladen sind.  
			// Hier werden zwei Handler registriert (load und DOMContentLoaded),  
			// aber die Initialisierung soll natürlich nur einmal ausgeführt werden.  
			// Wenn der Browser beide Events kennt, fragt die Init-Funktion ab,  
			// ob sie schon einmal aufgerufen wurde.  
		} else if (window.attachEvent) {  
			// IE-Alternative  
			window.attachEvent("onload", galerie.init);  
		}  
		  
		// Das ganze oben musst du nicht verstehen, es ist nur praktischer.  
		// Du könntest auch weiterhin das einfache  
		//    window.onload = galerie.init;  
		// verwenden.  
	},  
	  
	/* Initialisierung */  
	init : function () {  
		  
		// Wurde die galerie schon initialisiert? Dann breche ab.  
		if (galerie.initialisiert) {  
			return;  
		}  
		  
		// Speichere eine Referenz auf Vollbild (vereinfacht den späteren Zugriff)  
		galerie.vollbild = document.getElementById(galerie.vollbildId);  
		  
		// Hole alle Links in der Thumbnail-Liste  
		var thumbnailListe = document.getElementById(galerie.thumbnailListenId);  
		var linkListe = thumbnailListe.getElementsByTagName("a");  
		  
		// Speichere die Elementliste  
		galerie.linkListe = linkListe;  
		  
		// Speichere Anzahl der Bilder  
		galerie.bilderAnzahl = linkListe.length;  
		  
		// Durchlaufe die Elementliste  
		for (var i = 0, link; link = linkListe[i]; i++) {  
			// Speichere galerieIndex am Link  
			link.galerieIndex = i;  
			// Vergebe Event-Handler  
			link.onclick = galerie.thumbnailKlick;  
		}  
		  
		// Füge Blätternavigation dynamisch ins Dokument ein  
		// Erzeuge ein ul-Element  
		var blätterNavigation = document.createElement("ul");  
		blätterNavigation.id = "blaettern";  
		// Fülle die Liste über innerHTML  
		blätterNavigation.innerHTML =  
			"<li onclick='galerie.erstesBild()'>&lt;&lt;</li>" +  
			"<li onclick='galerie.vorherigesBild()'>&lt;</li>" +  
			"<li onclick='galerie.nächstesBild()'>&gt;</li>" +  
			"<li onclick='galerie.letztesBild()'>&gt;&gt;</li>";  
		// Hänge die Navigation nach der Thubmnail-Liste ins Dokument ein  
		thumbnailListe.parentNode.insertBefore(blätterNavigation, thumbnailListe.nextSibling);  
		  
		// Initialisierung fertig.  
		// Setze »Bereits initialisiert«-Flag  
		galerie.initialisiert = true;  
		  
	},  
	  
	/* Event-Handler, der beim Klick auf ein Thumbnail ausgeführt wird */  
	thumbnailKlick : function () {  
		// Setze neue Bildadresse  
		galerie.vollbild.src = this.href;  
		  
		// Speichere aktuelle Position  
		galerie.aktuellesBildIndex = this.galerieIndex;  
		  
		// Unterdrücke Standardaktion  
		return false;  
	},  
	  
	/* Blätterfunktionen */  
	  
	/* Helferfunktion zum Zeigen eines Bildes mit der aktuell gesetzten Nummer */  
	zeigeBild : function () {  
		// Schaue in der Linkliste nach dem Link mit dem aktuellen Bild-Index  
		// und verwende desse href-Attribut für das Vollbild  
		galerie.vollbild.src = galerie.linkListe[galerie.aktuellesBildIndex].href;  
	},  
	  
	nächstesBild : function () {  
		if (galerie.aktuellesBildIndex < galerie.bilderAnzahl) {  
			galerie.aktuellesBildIndex++;  
			galerie.zeigeBild();  
		}  
	},  
		  
	vorherigesBild : function () {  
		if (galerie.aktuellesBildIndex > 0) {  
			galerie.aktuellesBildIndex--;  
			galerie.zeigeBild();  
		}  
	},  
		  
	erstesBild : function () {  
		galerie.aktuellesBildIndex = 0;  
		galerie.zeigeBild();  
	},  
		  
	letztesBild : function () {  
		galerie.aktuellesBildIndex = galerie.bilderAnzahl - 1;  
		galerie.zeigeBild();  
	}  
};  
  
// Rufe Startfunktion auf  
galerie.start();

Auch hier erfolgt die Initialisierung automatisch, du musst im HTML-Code keine Event-Handler unterbringen, nur die nötigen IDs zum Ansprechen der Elemente.
Außerdem würde ich die Blätter-Navigation mit JavaScript einfügen, da sie ohnehin nur mit JavaScript funktioniert und nicht direkt im HTML-Quelltext liegen sollte, wenn sie keine Funktionalität hat.

Mathias

[Patrick Andrieu]

Hallo molily!

TIMTOWTDI (https://forum.selfhtml.org/?t=185128&m=1228242)!

Für Jürgen: TIMTOWDI ist ein Spruch unter Perl-Proggern, bedeutet There Is More Than One Way To Do It ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[juewi]

Hammer ....

Was soll ich sagen? Vielen vielen Dank Mathias für Deine Mühe und das mächtig prächtig aussenden Script, das auf Anhieb (Schrecksekunde wegen noch nicht vergebener ID für aktuelles_foto) funktioniert. Und das perfekt.
-> www.juergen-wiedner.at/menschen3.html

Verstehen tu ich´s überwiegend nicht aber ich schäm mich nicht dafür ;-)
JS-mäßig hab ich verglichen mit DEM Niveau gerade Kleinkindstatus.

Die Variante (was nicht alles möglich ist!!!) mit dem Einfügen der Blätter-Buttons über JS selbst finde ich genial.

Jedenfalls nochmal: vielen Dank für den Code und vor allem die ausführliche Dokumentation. Hab ich eine Beschäftigung wenn der Junge dann in Kürze uns die Nächte raubt ;-)

[juewi]

So vorm schlafengehen hab ich ´s noch geschafft, aus den Foto-Links die Ordner-Bezeichnungen "fotos" und "menschen" mit Indexzahlen zu extrahieren. So könnte ich u.U. es schaffen, das Script seitenübergreifend zu verfassen und auszulagern.

Nur irgendwie will aus diesem Script

  
window.onload = function() {  
var quelle = document.aktuelles_foto.src  
var trennen = quelle.split("/");  
var ordner = trennen[3]+"/"+trennen[4]+"/" //ergibt die Folge "fotos/menschen/"  
alert("extrahierte Link-Bestandteile: '" + trennen[3] + "' und '" + trennen[4] + "'")  
}  

die Variable "ordner" nicht anstelle von "fotos/menschen/" hier einbauen lassen:

statt~~~javascript

document.aktuelles_foto.src = "fotos/menschen/" + bildnummer + ".jpg";

will~~~javascript
  
document.aktuelles_foto.src = ordner + bildnummer + ".jpg";

nicht funktionieren -> wird nur undefined ausgeworfen.

[Struppi]

window.onload = function() {
var quelle = document.aktuelles_foto.src
var trennen = quelle.split("/");
var ordner = trennen[3]+"/"+trennen[4]+"/" //ergibt die Folge "fotos/menschen/"
alert("extrahierte Link-Bestandteile: '" + trennen[3] + "' und '" + trennen[4] + "'")
}

> die Variable "ordner" nicht anstelle von "fotos/menschen/" hier einbauen lassen:  
  
Ich bin mir nicht sicher, aber ich vermute, dir wurde schon erklärt was var macht. wenn nicht hättest du z.b. auch die Möglichkeit dies bei <http://de.selfhtml.org/javascript/sprache/variablen.htm#definieren@title=selfhtml> nachzulesen.  
  
Struppi.

[juewi]

Ich bin mir nicht sicher, aber ich vermute, dir wurde schon erklärt was var macht. wenn nicht hättest du z.b. auch die Möglichkeit dies bei http://de.selfhtml.org/javascript/sprache/variablen.htm#definieren@title=selfhtml nachzulesen.
Struppi.

Hey! Vielen Dank für die Wink mit dem Zaunpfahl ;-)

Dieser Teil in http://de.selfhtml.org/javascript/sprache/variablen.htm#definieren@title=selfhtml wars: "... Wenn Sie innerhalb von Funktionen Variablen ohne das Schlüsselwort var deklarieren, dann sind diese Variablen global..."
Dieser Unterschied war mir nicht bewusst.

Alleine weiss man oft überhaupt nicht, wo man Lösungsversuche ansetzen soll aber mit solch spitzen-Hinweisen macht´s echt Spass!

LG, Jürgen