Galerie Erweiterung

Fragen und Antworten zur clientseitigen Programmiersprache JavaScript

Galerie Erweiterung

Beitragvon G-RuN am Di 25. Jan 2011, 17:13

Hi,

zu erst mal ein Lob an Eure Galerie.

Nun habe ich allerdings eine Frage um die Galerie eventuell zu erweitern.
Derzeit wird auf meiner Seite der Thumbcontainer mit 4 Thumbnails angezeigt und beim Click auf das entsprechende Thumbnail das zugehörige Grossbild in der Detailanzeige. Durch die Masse an Bildern, würde ich nun gern folgendes haben wollen:
Alle Bilder sind mit Datum benannt und nun möchte ich mit einem Dropdown Menü das Datum auswählen und mittels eines Refresh Buttons zu der entsprechenden Thumbnail Serie springen. Ist das machbar? Und wenn ja wie?

Grüße
G-Run
G-RuN
 
Beiträge: 6
Registriert: Di 25. Jan 2011, 17:03

Beitragvon alm am Di 25. Jan 2011, 18:27

Hallo,

sicher ist das möglich. Das kann ohne Reload und ohne Refresh-Button gelöst werden. In diesem Falle sind aber einige Erweiterungen im Script nötig.

Die Frage ist nur, ob es nicht praktischer und einfacher ist, wenn jede Serie eine eigene Seite aufrufen würde. Den Reload - eigentlich ein Wechsel der aktuellen Seite s. Eigenschaft location.href - kann man via dem Event onChange der Dropdown-Box ausführen. Die Dateien mit den unterschiedlichen Galerien können in Files mit dem entsprechenden Datum untergebracht werden. Das Dropdown-Menu kann per JavaScript mit den Datumswerten gefüllt werden und in die JS-Datei der Galerie ausgelagert werden. Dann muss die Liste mit den Galerien nur an einer Stelle gepflegt werden.


Gruß
Alex
EvoComp.de
Beachten Sie unsere Beispiele zu JavaScript, PHP und Ajax, sowie unser PHP MySQL Tutorial
alm
 
Beiträge: 81
Registriert: Do 21. Feb 2008, 16:22
Posts

Beitragvon G-RuN am Mi 26. Jan 2011, 11:02

Hi,

erst mal vielen Dank für die Antwort.

Den Refreshbutton ist aber angedacht zu behalten, da ich für Tag / Monat / Jahr jeweils eine Drop-Down Liste habe um das Datum flexibel auswählen zu können.

Ich bin mir jetzt nicht sicher, ob ich dich richtig verstanden habe, aber meinst du damit für jeden Tag praktisch eine eigene HTML seite?
Wenn dem so ist, kann ich das leider nicht machen, da die Bilder automatisiert bei mir Tag für Tag ankommen, in die enstprechenden Ordner verteilt werden und damit für die Seite bereit stehen. Über PHP lese ich die Ordnerstrukturen aus und baue mir den String für die addPhoto Funktion in JavaScript zusammen.

Mein erster Gedanke war nun über Ajax das Datum an PHP zu übertragen, den String erneut zusammenbauen zu lassen und das DIV in diesem Falle neu laden zu lassen. Allerdings missfällt mir dieser Gedanke einwenig, da sich die Arbeit quasi doppelt macht (erstes Laden aller Bilder, dann erneutes Laden des entsprechenden Tages). Und das was ich probiert habe, führt nicht ganz zu dem gewünschten Ergebnis. Sprich die Funktionen erneut ausführen zu lassen.

Der zweite Gedanke war, es mittels dem Bildindex zu lösen und habe gehofft hier damit Hilfe zu finden :D bzw. vielmehr die Kombi aus Datum und Index.
Ist das Realistisch? :D

BTW: Bin noch ein ziemlicher Anfänger was JS und die Kombi aus HTML und JS betrifft ^^

Grüße,
Goran
G-RuN
 
Beiträge: 6
Registriert: Di 25. Jan 2011, 17:03

Beitragvon alm am Fr 28. Jan 2011, 10:28

Hallo,

bin davon ausgegangen, dass es nur mittels JavaScript gelöst werden kann. Wenn die Bilder jeweils von einem PHP-Script ausgelesen werden, dann sollte es kein Problem sein, die Dropdown-Box automatisch mit den Datumsangaben zu füllen. Auch die Bilder für die Galerie zum entsprechenden Datum können via Parameterübergabe des PHP-Scripts ausgewählt werden.

Aber auch die Ajax-Variante ist eine Möglichkeit. Hierzu muss nur eine Funktion "dropPhotos" dafür sorgen, dass die Bilderliste geleert wird und der Intervall zur Aktualisierung gestoppt wird. Danach die durch Ajax gelieferte Liste von Bildern mit deren Daten via addPhoto in die Bilderliste einfügen und den Intervall wieder starten.

Gruß
Alex
EvoComp.de
Beachten Sie unsere Beispiele zu JavaScript, PHP und Ajax, sowie unser PHP MySQL Tutorial
alm
 
Beiträge: 81
Registriert: Do 21. Feb 2008, 16:22
Posts

Beitragvon G-RuN am Fr 28. Jan 2011, 11:36

Hi,

also habe es nun durch eine weitere Parameterübergabe gelöst und nun springt mir bei der Datumswahl, sofern das Datum der Bilder verfügbar, zu der entprechenden Serie.

Danke für die Antworten :)

Gruß,
Goran
G-RuN
 
Beiträge: 6
Registriert: Di 25. Jan 2011, 17:03

Beitragvon G-RuN am Mo 31. Jan 2011, 13:12

Hi nochmal,

kannst du mir vielleicht code zusammenschreiben, wie die Funktion "dropPhotos" auszusehen hat und wie der Start & Stopp des Intervalls funktioniert?
Kann mir das gerade irgendwie schlecht vorstellen.

Benötige doch Ajax für eine andere Funktion.
Im Vorfeld danke schon mal :)

Gruß,
Goran
G-RuN
 
Beiträge: 6
Registriert: Di 25. Jan 2011, 17:03

Beitragvon alm am Mo 31. Jan 2011, 20:36

Hallo,

das Script ist sehr ausführlich dokumentiert. Sollte eigentlich kein Problem sein. Einfach die Variablen zu Anfang des Scripts wieder auf den Ursprungszustand setzen und dann die addPhoto-Funktion mit den durch das Ajax-Script gelieferten Daten aufrufen. Zum Starten und Beenden von Intervallen gibt es Beispiele unter http://www.evocomp.de/beispiele/javascr ... val-3.html. Dort ist alles erklärt, was zur Lösung benötigt ist. Gestartet wird der Intervall wieder durch erneuten Aufruf von initialisiereGalerie.

Gruß,
Alex
EvoComp.de
Beachten Sie unsere Beispiele zu JavaScript, PHP und Ajax, sowie unser PHP MySQL Tutorial
alm
 
Beiträge: 81
Registriert: Do 21. Feb 2008, 16:22
Posts

Beitragvon G-RuN am Di 1. Feb 2011, 16:53

Hi,

Sorry wenn ich da nochmal nachfragen muss, aber so ganz hab ich das noch nicht verstanden.

Dies ist meine Funktion zum ersetzen der Bilderserie mit einer anderen Bilderserie (bsp. Statt Bilder aus Ordner 1 entsprechend Bilder aus Ordner 2 zu nehmen)
Der Aufruf über Ajax, mit meinen neuen Pfaden usw. fuktioniert soweit.
Code: Alles auswählen
  function output()
    {
    if (XMLHTTP.readyState == 4)
      {     
      var img_str = XMLHTTP.responseText;     
      var img_arr = img_str.split(";");     
     
      dropPhotos();     
      for (var count = 0; count < img_arr.length-1; count++)
        {
        var element = img_arr[count].split(",");
        addPhoto(element[0],element[1],element[2],element[3],element[4]);                               
        }
          //erzeuge_thumbnails ();   
       thumbnails_auffrischen ();
       grosses_bild_anzeigen (1);
       window.setInterval ("ausrichten ()", 5);     
      }


Ansich funktioniert auch das "ersetzen" der Bilder, nur mit dem Nachteil das die Anzahl der Bilder sich nicht ändert, obwohl diese anders ist. Demnach müsste ich eigentlich das <div> mit der id = "thumbs" doch theoretisch leeren um dann innerhalb der funktion output() zusätzlich erzeuge_thumbnails() aufrufen zu können, damit die <li> Elemente neu erstellt werden können und damit auch die korrekte Anzahl an Bildern anzeigen, oder hab ich da etwas falsch verstanden? :D

Mein Ansatz zum leeren des <div> Elements innerhalb der dropPhotos() Funktion dafür wäre eigentlich
Code: Alles auswählen
function dropPhotos()
  {
  Photos =[];
  document.getElementById("thumbs".innerHtml="";
  }

jedoch ohne Erfolg. Alternativ habe ich auch schon euer JavaScript DIV Beispiel ausprobiert zum DIV Inhalt ändern.
Brachte aber auch nichts. (Keine Fehlermeldung, keine Veränderung)

Ist mein Ansatz überhaupt richtig, so wie ich mir das denke?

Und der momentane Intervall dient eigentlich nur der Ausrichtung der Thumbnails oder? Habe den Zusammenhang dafür noch nicht ganz verstanden.

Hoffe ihr könnt mir helfen :)

Grüße,
Goran
G-RuN
 
Beiträge: 6
Registriert: Di 25. Jan 2011, 17:03

Beitragvon G-RuN am Di 1. Feb 2011, 17:11

Hat sich erledigt. Mir haben noch die Zuweisung von der Variablen anzahl_bilder und anzahl_thumbnails gefehlt.

Grüße,
Goran
G-RuN
 
Beiträge: 6
Registriert: Di 25. Jan 2011, 17:03


Zurück zu JavaScript

cron