dynamisches Fotoalbum

[Alex]

Hallo zusammen,

ich habe folgendes Problem:
Ich berichte auf meiner homepage u.a. über meine Rennrad-Urlaube in den Alpen. Dazu gibt es für jeden Urlaub ein entsprechendes Fotoalbum. Außerdem habe ich eine Tabelle mit allen Pässen, die ich bereits gefahren bin. Zu jedem Pass gibt es dann einen Link zu dem entsprechenden Fotoalbum. Das gefällt mir so aber nicht. Zum einen bin ich manche Pässe eben schon mehrfach gefahren, der Benutzer muss sich also durch 2 oder 3 Alben klicken um Fotos des Passes zu sehen. Zum anderen sind in den Fotoalben natürlich auch Bilder von anderen Pässen dieses Urlaubes zu sehen.

Ich hätte daher gerne so eine Art dynamisches Fotoalbum. Meine Vorstellung ist die, dass ich die Bilder in einer Datenbank mit einem Index für den Passnamen und einen für den Urlaub speichere. Klickt der Benutzer in der Pässeliste auf den Passnamen, soll eine Fotoalbum erzeugt werden, dass alle Bilder dieses Passes enthält. Klickt er in der Übersicht der Fotoalben auf einen bestimmten Urlaub, wird ein Fotoalbum mit allen Bildern dieses Urlaubes erzeugt. Ich hätte dann also nur noch eine Seite mit einem Fotoalbum und eine Datenbank mit den Bildern. Nach einem neuen Urlaub müsste ich dann nur noch die Bilder in die Datenbank stellen und nicht jedes Mal neue statische Fotoalben erzeugen. Ich hoffe es war einigermaßen verständlich was mir vorschwebt.

Habt ihr mir mal einen Tipp, mit welchen Mitteln (html, javascript, mysql etc.) so was zu am besten zu realisieren wäre und evtl. einen Link der sich mit dem Thema befasst?

Danke und Grüße
Alex

[hotti]

hi,

[..]Nach einem neuen Urlaub müsste ich dann nur noch die Bilder in die Datenbank stellen und nicht jedes Mal neue statische Fotoalben erzeugen. Ich hoffe es war einigermaßen verständlich was mir vorschwebt.

Klar. Beim Einstellen müssen zu jedem Bild die Informationen Urlaub, Pass mitgeliefert werden.

Das Backend könnte z.B. so aussehen, wobei das um die entsprechenden Felder ergänzt werden muss.

Habt ihr mir mal einen Tipp, mit welchen Mitteln (html, javascript, mysql etc.) so was zu am besten zu realisieren wäre und evtl. einen Link der sich mit dem Thema befasst?

Siehe Link. Ein passendes DB-Design dazu und der Besucher kann Bilderserien generieren nach Urlaub oder nach Pässen. Da sind dann ach die Kreuz- und Querverweise drin.

MfG

[Alex]

hi,

[..]Nach einem neuen Urlaub müsste ich dann nur noch die Bilder in die Datenbank stellen und nicht jedes Mal neue statische Fotoalben erzeugen. Ich hoffe es war einigermaßen verständlich was mir vorschwebt.

Klar. Beim Einstellen müssen zu jedem Bild die Informationen Urlaub, Pass mitgeliefert werden.

Das Backend könnte z.B. so aussehen, wobei das um die entsprechenden Felder ergänzt werden muss.

Habt ihr mir mal einen Tipp, mit welchen Mitteln (html, javascript, mysql etc.) so was zu am besten zu realisieren wäre und evtl. einen Link der sich mit dem Thema befasst?

Siehe Link. Ein passendes DB-Design dazu und der Besucher kann Bilderserien generieren nach Urlaub oder nach Pässen. Da sind dann ach die Kreuz- und Querverweise drin.

MfG

Hallo hotti,
danke mal für den Link. Ich komme gerade leider nicht dazu, mir das anzuschauen, weil ich grad ein ernstes Problem mit meiner Pässeliste habe. Darum muss ich mich jetzt erstmal kümmern. Ich melde mich dann aber wieder, sobald das Problem gelöst ist.

VG
Alex

[hotti]

hi,

Hallo hotti,
danke mal für den Link. Ich komme gerade leider nicht dazu, mir das anzuschauen, weil ich grad ein ernstes Problem mit meiner Pässeliste habe. Darum muss ich mich jetzt erstmal kümmern. Ich melde mich dann aber wieder, sobald das Problem gelöst ist.

Ja, würde mich freuen, bring Fotos vom Flüelapass mit...

Viele Grüße :)

[Alex]

hi,

Hallo hotti,
danke mal für den Link. Ich komme gerade leider nicht dazu, mir das anzuschauen, weil ich grad ein ernstes Problem mit meiner Pässeliste habe. Darum muss ich mich jetzt erstmal kümmern. Ich melde mich dann aber wieder, sobald das Problem gelöst ist.

Ja, würde mich freuen, bring Fotos vom Flüelapass mit...

Viele Grüße :)

Hallo hotti,

hab mir das jetzt mal angeschaut. Das wäre sicher ein nettes Feature wenn ich denn mal soweit komme, dass ich das wirklich mit ner Datenbank gelöst bekomme. Da bin ich aber noch meilenweit davon entfernt :-) Ich werde das jetzt erstmal nur mit reinem javascript versuchen und mich vielleicht nebenher auch mal intensiver mit der Sprache beschäftigen. Bisher habe ich nur Scripte geklaut und dann angepasst. Aber auch das ist ziemlich knifflig, wenn man die Sprache nicht wirklich beherrscht.

VG
Alex

[Bernd]

Ich hätte daher gerne so eine Art dynamisches Fotoalbum. Meine Vorstellung ist die, dass ich die Bilder in einer Datenbank mit einem Index für den Passnamen und einen für den Urlaub speichere.
Klickt der Benutzer in der Pässeliste auf den Passnamen, soll eine Fotoalbum erzeugt werden, dass alle Bilder dieses Passes enthält.
Ich hätte dann also nur noch eine Seite mit einem Fotoalbum und eine Datenbank mit den Bildern. Nach einem neuen Urlaub müsste ich dann nur noch die Bilder in die Datenbank stellen und nicht jedes Mal neue statische Fotoalben erzeugen.
Habt ihr mir mal einen Tipp, mit welchen Mitteln (html, javascript, mysql etc.) so was zu am besten zu realisieren wäre und evtl. einen Link der sich mit dem Thema befasst?

Nabend,
Ich bin mir sicher, dass Javascript das alles erledigen kann.
Das sähe dann z.B. so aus:

  
fotoListe = [];  
// Pass 1:  
fotoListe[0] = [];  
fotoListe[0][0] = 'Pass1Bild1.jpg';  
                        //...  
// Pass 2:  
fotoListe[1] = [];  
//...  
  
currentListe = null;  
currentPosition = 0;  
  
function changePic()  
{  
document.getElementById('Bild').src = currentListe[currentPosition];  
}  

  
<!-- Links in deiner 'Pässeliste' -->  
<a href="#" onClick="javascript:currentListe=fotoListe[0]; changePic();">Pass 1</a><br>  
<a href="#" onClick="JavaScript:currentListe=fotoListe[1]; changePic();">Pass 2</a><br>  
...  
<!-- img einfach dort einfügen wo du dann das Album anzeigen willst -->  
<img id="Bild" />  

So wäre der grobe,grobe,grobe Grundriss.
(Was natürlich zu ändern wäre (falls du es sauber getrennt haben willst), sind die Event-Handler, die im Script-Bereich mit addEventListener() hinzuzufügen sind.)
Nun bräuchtest du nur noch ein paar Buttons mit Funktionen wie 'next Pic', 'last Pic' etc.

Ich habe selber vor einigen Monaten nach diesem Schema einige Alben erstellt - läuft gut und fehlerfrei.
Theoretisch unschön wird es wenn du die Bilder verschiebst; aber ich denke dann kannst du mit der  »Ersetzen«-Funktion  des Editors arbeiten und die ganzen Pfadangaben korregieren.
Allerdings wird es meines Erachtens extrem unschön wenn du ein Bild aus dem Array entfernen möchtest  - aus einem laaaangen Array. Habe bisher keine Idee wie man die Nummern dann 'zeitschonend' korregieren kann.
Nichtsdestotrotz: es läuft.

Grüße,
  Bernd

[Alex]

Nabend,
Ich bin mir sicher, dass Javascript das alles erledigen kann.
Das sähe dann z.B. so aus:

fotoListe = [];
// Pass 1:
fotoListe[0] = [];
fotoListe[0][0] = 'Pass1Bild1.jpg';
                        //...
// Pass 2:
fotoListe[1] = [];
//...

currentListe = null;
currentPosition = 0;

function changePic()
{
document.getElementById('Bild').src = currentListe[currentPosition];
}

> ~~~html
  

> <!-- Links in deiner 'Pässeliste' -->  
> <a href="#" onClick="javascript:currentListe=fotoListe[0]; changePic();">Pass 1</a><br>  
> <a href="#" onClick="JavaScript:currentListe=fotoListe[1]; changePic();">Pass 2</a><br>  
> ...  
> <!-- img einfach dort einfügen wo du dann das Album anzeigen willst -->  
> <img id="Bild" />  
> 

So wäre der grobe,grobe,grobe Grundriss.
(Was natürlich zu ändern wäre (falls du es sauber getrennt haben willst), sind die Event-Handler, die im Script-Bereich mit addEventListener() hinzuzufügen sind.)
Nun bräuchtest du nur noch ein paar Buttons mit Funktionen wie 'next Pic', 'last Pic' etc.

Ich habe selber vor einigen Monaten nach diesem Schema einige Alben erstellt - läuft gut und fehlerfrei.
Theoretisch unschön wird es wenn du die Bilder verschiebst; aber ich denke dann kannst du mit der  »Ersetzen«-Funktion  des Editors arbeiten und die ganzen Pfadangaben korregieren.
Allerdings wird es meines Erachtens extrem unschön wenn du ein Bild aus dem Array entfernen möchtest  - aus einem laaaangen Array. Habe bisher keine Idee wie man die Nummern dann 'zeitschonend' korregieren kann.
Nichtsdestotrotz: es läuft.

Grüße,
  Bernd

Hallo Bernd,

danke für den Tipp. So ganz steige ich noch nicht durch. Ich kenne mich mit Javascript nicht wirklich gut aus. Die Scripte die auf meiner Webseite laufen sind alle "geklaut" und lediglich von mir angepasst worden. Wenn ich das richtig verstehen, würden mir bei deinem Vorschlag zwei Funktionalitäten fehlen.

1. Beim Klick auf einen Pass in der Pässeliste würde eine Seite mit dem ersten Bild aufgehen, und durch Klicken auf Next/Prev würde auf der Seite eben das Bild entsprechend gewechselt. Ich hätte allerdings gerne, dass nach dem Klick auf den Pass erst eine Seite mit allen kleinen Vorschaubildern des Passes aufgeht und von dort dann erst in das Fotoalbum gesprungen werden kann. Dürfte dann wohl noch etwas komplizierter werden.

2. Ich bräuchte nicht nur Fotoalben für die Pässe, sondern auch für einzelne Urlaube, die eben dann wieder anders zusammengestellt werden. Wobei das wohl dann genauso programmiert werden könnte.

Ich müsste aber wenn ich neue Bilder habe, jeweils das Javascript anpassen. Genau das wollte ich eigentlich vermeiden. Meine Wunschvorstellung ist, dass ich qausi eine Seite als Vorlage habe, in welche die Vorschaubilder geladen werden aus dem heraus dann das Fotoalbum erzeugt wird. So dass ich bei neuen Bildern, gar nichts programmieren muss und nur die Bilder in die Datenbank lade. Problem könnte natürlich sein, dass ich mich auch mit MySQL und was man da vielleicht sonst so benötigt nicht auskenne :-)

Ich werde jetzt mal versuchen, das so wie von dir vorgeschlagen zu machen. Weiter ausbauen kann ich ja immer noch und so hab ich dann auf jeden Fall wieder was gelernt.

VG
Alex

[Matthias Apsel]

Om nah hoo pez nyeetz, Alex!

Bitte vermeide Vollzitate. Sie sind in diesem Forum weder notwendig noch erwünscht. Danke.

Matthias

[Bernd]

Nabend,

danke für den Tipp. So ganz steige ich noch nicht durch. Ich kenne mich mit Javascript nicht wirklich gut aus. Die Scripte die auf meiner Webseite laufen sind alle "geklaut" und lediglich von mir angepasst worden.

Durch 'klauen' & anpassen lernt man ;)

Wenn ich das richtig verstehen, würden mir bei deinem Vorschlag zwei Funktionalitäten fehlen.

1. Beim Klick auf einen Pass in der Pässeliste würde eine Seite mit dem ersten Bild aufgehen, und durch Klicken auf Next/Prev würde auf der Seite eben das Bild entsprechend gewechselt.

Nicht ganz... Durch einen Klick auf einen Pass in der Pässeliste wird dem <img>-Element (auf  »derselben«  Seite) zuerst dessen src-Attribut auf das 1. Bild des Passes im Array gesetzt.
Willst du dein Bild auf einer anderen Seite darstellen wird es komplizierter.

Ich hätte allerdings gerne, dass nach dem Klick auf den Pass erst eine Seite mit allen kleinen Vorschaubildern des Passes aufgeht und von dort dann erst in das Fotoalbum gesprungen werden kann. Dürfte dann wohl noch etwas komplizierter werden.

Da liegst du ganz richtig... Die Vorschaubilder aus dem Array zu generieren ist dagegen noch ziemlich simpel.
Ich weiß gerade nicht ganz ob man da etwas auf die elegante Art und Weise mit Javascript machen kann. Wie hast du es aufgebaut?
Erstellst du für jeden Pass eine eigene Seite?
--> Dann benötigst du für jede Seite ein neues Array in dem jeweils die Pfadangaben des jeweiligen Passes gespeichert sind. So kannst du nur mit Javascript auskommen.
Oder du machst es ein bisschen schlauer und erstellst 1 Array mit allen Pfadangaben und packst es in eine externe Script-Datei auf die du dann alle Einzelseiten zugreifen lässt. Das einzige, was du dann in jeder Seite ändern musst, ist folgendes: currentListe = fotoListe[?]. Du setzt also für jede Seite den jeweiligen Pass fest.

Oder ist es genau 1 Seite, die beim klicken auf einen Pass-Link ihren Inhalt von demselben abhängig macht?
--> So müsstest du dann ja der 'neuen' Seite dann übermitteln auf welchen Pass-Link geklickt wurde. Meines Wissens nach klappt das nicht mit reinem Javascript - dann kommt PHP ins Spiel (und damit habe ich mich bisher sehr wenig auseinandergesetzt..). (Falls jemand aber weiß wie es mit reinem Javascript ginge: hier sind bestimmt einige die das brennend interessiert)

2. Ich bräuchte nicht nur Fotoalben für die Pässe, sondern auch für einzelne Urlaube, die eben dann wieder anders zusammengestellt werden. Wobei das wohl dann genauso programmiert werden könnte.

Exakt.. ziemlich ähnlich:

passListe = [];  
urlaubListe = [];

Ich müsste aber wenn ich neue Bilder habe, jeweils das Javascript anpassen.
So dass ich bei neuen Bildern, gar nichts programmieren muss und nur die Bilder in die Datenbank lade.

Ob du nun in deinem Javascript das Array modifizierst

urlaubListe = [];  
urlaubListe[0] = '1.urlaubPic.jpg';

zu:

urlaubListe = [];  
urlaubListe[0] = '1.urlaubPic.jpg';  
urlaubListe[1] = '2.urlaubPic.jpg';  
//...

oder in deiner Datenbank Einträge hinzufügst ist doch einerlei oder? Irgendwo musst du doch was hinzufügen...

Meine Wunschvorstellung ist, dass ich qausi eine Seite als Vorlage habe, in welche die Vorschaubilder geladen werden aus dem heraus dann das Fotoalbum erzeugt wird.

Oben habe ich dir 2 Möglichkeiten geschildert.
Die 1. ist ein größerer Aufwand mit der Erstellung der einzelnen Seiten. ABER: behalte im Hinterkopf, dass du 1x einen großen Aufwand betreiben musst um für alle schon vorhandenen Pässe die Seiten zu erstellen. Danach ist es lediglich 1 Seite die mit jedem neuen Pass hinzukommt.
Die 2. klappt meines Wissens nach nur mit PHP - da müsste dich dann jemand anderes unterstützen.

Grüße,
  Bernd

[Alex]

Hallo Bernd,

vielen Dank für die vielen Tipps. Das bringt mich für den Anfang schon mal weiter. Ich arbeite mich jetzt gerade durch das Javascript Tutorial auf dieser Seite und dann werde ich mal schauen, wie weit ich komme.
Meine Pässeliste gibt es hier. Bisher sind dort in der zweitletzten Spalte eben Links zu den Fotoalben der Urlaube hinterlegt. Ich hätte da jetzt gerne nur noch einen Link pro Pass der dann auf eine einzige Seite leitet, in der dann ein neues Fotoalbum mit den Bildern dieses Passes generiert wird. Wusste bisher z.B. nicht, dass so etwas mit Javascript nicht geht.
Das wäre für den Benutzer schöner, weil er eben nur Bilder dieses einen Passes sehen würde. Aber auch für mich ziemlich einfach, weil ich die neuen Bilder dann nur noch in die Arrays packen müsste. Das ist aber wie gesagt meine Wunschvorstellung. Ich muss jetzt eben schauen, wie weit ich da mit meinen bescheidenen Kenntnissen komme.

Vg
Alex

[Bernd]

Nabend,
ich habe mich privat mal umgehört und mir wurde erzählt, dass eine Wertübergabe mit Javascript doch möglich ist. So habe ich mal nachgeschaut: siehe hier, Abschnitt: Wertübergabe mittels URL.
Lass was von dir hören, ob du es soweit alleine schaffst oder noch ein wenig Hilfe brauchst das umzusetzen.

Grüße,
  Bernd

[Bernd]

Nabend,

aus privatem Interesse habe ich mal ein paar Zeilen geschrieben:
(Die Seite, auf der die Pässe angeklickt werden können):
Style:

#foo { display: none; }  

Script:

document.addEventListener('DOMContentLoaded',  
    function()  
    {  
    var input = document.createElement('input');  
    input.id = 'foo';  
    input.type = 'text';  
    input.name = 'pass';  //Eigenschaft die bei der Vorschaubilder-Seite abgefragt werden kann  
    document.body.appendChild(input);  
  
    for (var i = 0; i < document.getElementsByTagName('a').length; i++)  
      document.getElementsByTagName('a')[i].addEventListener('click',  
          function()  
          {  
          document.getElementById('foo').value = this.name;  
          changeLocation();  
          });  
    });  
  
function changeLocation()  
{  
var foo = document.getElementById('foo');  
var x = location.href;  
var y = x.split('/');  
var z = '';  
for (var i = 0; i < y.length - 1; i++)  
  z = z + y[i] + '/';  //Für Zieladresse im selben Verzeichnis  
//Ansonsten selber nachbessern  
var bar = 'Name_Der_Vorschaubilder_Seite.htm';  
z = z + bar;  
z = z + '?' + foo.name + '=' + foo.value;  
location.href = z;  
}  

HMTL:

<a name="Pass1">Link Nummer 1</a><br>  
<a name="Pass2">Link Nummer 2</a><br>  
<a name="Pass3">Link Nummer 3</a><br>  

(Die Seite, der du etwas übergeben möchtest):
Script: (einfach den Link in meinem letzten Post anklicken)
Dann kannst du so den Wert überprüfen um dann letztendlich die korrekte passListe benutzen zu können:

//'pass' von input.name  ,  'Pass3' von <a name ~ >  
if (liste['pass'] == 'Pass3')  
  {  
  alert('Hier kommen jetzt die Bilder von Pass3');  
  currentListe = passListe[2];  
  }  

Grüße,
  Bernd

[Alex]

Hallo Bernd,

danke für die Tipps. Ich hab die letzten Tage schon viel ausprobiert und auch wenn es teilweise mühsam war, habe ich jetzt die Seite mit den Vorschaubildern so gut wie fertig. Jetzt bastel ich gerade an der zweiten Seite (dem eigentlichen Fotoalbum). Das sollte aber eigentlich die leichtere Aufgabe sein. Ich bin jedenfalls guter Dinge, dass ich es jetzt hinbekomme. Hätte im Vorfeld gar nicht damit gerechnet, das es so schnell klappt :-)

LG
Alex