Forum.EvoComp.de

[GoPeter]

Hallo,
ich bin gerade dabei die Galerie mit der Lightbox 2 zu verknüpfen, da ich die Bilder im Vollformat gerne in diesem schicken aufpoppenden Fenster angezeigt haben möchte und nicht in einem extra div-container unterhalb der Thumbnails. Dazu habe ich die galerie.js wie folgt editiert (Zeile 8 und 9 sind verändert).

Code: Alles auswählen

   // 'anzahl_thumbnails' Thumbnails erzeugen
   for (i = 0; i < anzahl_thumbnails; i++)
   {
      // Ein Thumbnail besteht aus einem LI-Tag, ...
      eintrag = document.createElement ("li");
      // einem Link ...
      link = document.createElement ("a");
      // , der per JavaScript das entsprechende Bild austauscht
      link.rel = "lightbox";
      link.href = "" + Photos[(i+1)-1]["datei_gross"];
      // und einem IMG-Tag fuer den eigentlichen Thumbnail
      bild = document.createElement ("img");
      bild.border = "0";
      bild.id = "thumbnail" + (i + 1);


Und in meiner index, in der ich die Galerie verändere, halt den normalen Lightbox-Kram eingefügt (Stylesheets, Script's etc pp)

An sich funktioniert die ganze Geschichte auch ganz gut (GoPeter --> Sorry für die langen Ladezeiten...wurde noch nix optimiert und Preloader ist auch noch nicht drin)

Die ersten drei Bilder funktionieren. Jedoch zählt der oben gebaute Counter nicht weiter, wenn man blättert. Also hab ich mir folgendes Gedacht:

Ganz oben im Dokument wird eine Variable definiert:

Code: Alles auswählen

i2 = 0;


Dann lass ich die Funktion pgdown einfach die Variable weiterzählen:

Code: Alles auswählen

i2 += 3;

Und ändere den link.href:

Code: Alles auswählen

link.href = "" + Photos[i+1+i2]["datei_gross"];

Jedoch passiert nix. Alles wie vorher. Aber warum? Eigentlich müsste es doch pro Klick auf den Pfeil um 3 weiterzählen, also auch die nächsten 3 URL's in der index.html ansprechen, die ich mit "datei_gross" ausgelesen hab (welche wiederrum vom Parameter "bild" herkommt).

Ich hoffe ihr versteht mein Problem und könnt mir helfen

[alm]

Hallo und willkommen im Forum,

ich nehme an, dass das Script wegen der auftretenden Fehler die Verarbeitung abbricht. Schau mal in die Fehlerkonsole. Dort wird Dir auffallen, dass das Script versucht die Navigationselemente anzupassen. Das geht allerdings schief, da die Elemente aus dem HTML-Code gelöscht wurden (Navigationselemente "weiter", "zurück" ... in thumbcontainer und dem Container mit den großen Bildern). Der Fehler wird vermieden, wenn die Elemente drin bleiben und statt dessen im Stylesheet (visibility:hidden) ausgeblendet werden. Eine andere Möglichkeit wäre, an den entsprechenden Stellen im Code deren Aktualisierung zu verhindern. Also überall, wo die nicht benötigten Elemente angesprochen werden, die Zugriffe auszukommentieren - als Richtlinie zur Lokalisierung der entsprechenden Zeilen einfach die in der Fehlerkonsole auftretenden Fehler nach und nach abarbeiten. Ersteres ist aber einfacher und sollte weniger Probleme machen.

Schöne Bilder und auch die Galerie selbst sieht gut aus. Wusste gar nicht, dass man die Lightbox so einfach in die Galerie einbauen kann.

Gruß
Alex

[GoPeter]

Ich hab jetzt die originalen Navigationselemente wieder eingebaut - trotzdem kein Erfolg Die URL-Links zählen nicht weiter.

Und Danke War aber noch nicht alles ^^

[alm]

Hmm... ich kann auch nicht wirklich nachvollziehen, warum diese Zählung überhaupt nötig ist. Im Code der Galerie finde ich aber auch nichts davon.
Hab mich noch nicht mit Lightbox beschäftigt, aber eigentlich macht die Galerie das doch schon. Die geänderte Funktion wird auch nur bei der Erzeugung der Thumbnails ausgeführt. In thumbnails_auffrischen muss natürlich das Bild ausgetauscht werden, da sonst immer die bei der Initialisierung gesetzten Bilder aktuell bleiben.
Versuchs mal mit

Code: Alles auswählen

document.getElementById ('thumbnail' + (i + 1)).href = Photos[index_erstes_bild + i]["datei_gross"];


in der For-Schleife. Die href-Zeile in der thumbnails_erzeugen sollte eigentlich überflüssig sein. Nur die Geschichte mit dem rel ist wohl an dieser Stelle nötig. Habe übrigens immer noch die Fehler wegen der fehlenden Elemente...

[GoPeter]

Ja, ich habs nicht hochgeladen Nur aufn Rechner ausgeführt.
Naja die Zählung ist nötig, weil die ID's der großen Bilder durch meine Zählfunktion weitergezählt werden sollen und dann beim Blättern auf der 2. Seite das erste Bild ja die ID 4 haben muss. Die Galerie an sich zählt leider nicht weiter, da immer die Funktion zeige_grosses_bild (1) bis (3) erscheint.

Aber ich versuch dein Code erstmal.

//e

Wenn ich deinen Code benutze bleibt die Seite weiß.
--> Grund: document.getElementById("thumbnail + (i + 1)) is null

[alm]

Das zählen ist eben auch die Aufgabe des Scripts... Sonst würden schließlich auch die Detailbilder nicht korrekt ausgegeben. Ich nehme an, dass Lightbox immer dann anspringt, wenn auf ein Bild mit dem gesetzten Rel-Attribut geklickt wird. Das Bild wird in der Href angegeben. Normalerweise nutzt die Galerie ja JS-Code zur Auswahl des Detailbildes. Da hier aber nur der entsprechende Link angegeben wird und die JS-Funktion zur Aktualisierung des Detailbildes nicht genutzt werden soll, muss ja bei der Aktualisierung das HRef ausgetauscht werden. Genau das übernimmt die entsprechend benannte Funktion. Hier werden die Thumbnails und deren Titel ja bereits ausgetauscht.

[alm]

Wenn ich deinen Code benutze bleibt die Seite weiß.
--> Grund: document.getElementById("thumbnail + (i + 1)) is null

Sorry, aber wenn Du das nicht hochlädst, dann kann ich dazu nicht besonders viel sagen... Hier fehlt beispielsweise ein Anführungszeichen...

[GoPeter]

Nene, das weiß ich ja. Die gibt ja auch die Detailbilder in dem extra div-container richtig wieder. Und die Lightbox springt auch nur an, wenn das rel-Attribut gesetzt wird. Das schon richtig. Aber die Lightbox braucht einen Link zum Detailbild - und so eine Funktion fehlt mir leider. Deshalb wollte ich über link.href diese spezielle URL weiterzählen lassen. Das normale Script zählt ja richtig weiter, aber mit der function grosse_bilder_zeigen nutzt mir mit der Lightbox nichts, weil die im Endeffekt keine URL setzt, sondern diesen <img>-Tag im "grosscontainer" füllt.

Ich brauche halt diese URL, welche ich mit dem Parameter "bild" in der index.html vergebe, direkt in dem Link.

/e

Ok, ich lads eben hoch.
Ja, das fehlt da - ist auch nur ein Auszug aus der Fehlerbox.

/e2

Habs hochgeladen. In der Fehlerkonsole siehst du jetzt den oben abgetippten Fehler.

[alm]

Ja! So funktioniert das... da können wir auch über ein und dieselbe Sache reden...
Du hast die Zeile nicht da eingefügt, wo ich geschrieben habe. Vergiss die Funktion! Da gehört nur die Zeile mit dem REL-Attribut rein. Diese Zeile gehört in die Funktion thumbnails_auffrischen! An der Stelle, wo Du es eingefügt hast, existieren die Thumbnail-Elemente, auf die mit dieser Anweisung verwiesen wird, ja noch nicht im HTML-Elementenbaum.
Also: Die Zeile dort löschen und dann hinter Zeile 107 einfügen. Dann klappts auch mit der Aktualisierung.

[GoPeter]

Ach scheiße
Okay, danke ^^ Ich versuchs mal!

/e

Wieder nichts. Habs auch online aktualisiert.

[alm]

Ich habe oben geschrieben IN der For-Schleife. Und wenn ich eine Zeilennummer angebe, dann beziehe ich mich auf die Version der Datei, die ich sehen kann. Wenn Du oben einen Zeile löschst, dann verschiebt sich das Ganze natürlich...

[GoPeter]

Huch. Hatte ich zuerst. Hat leider auch nicht funktioniert. Lads nochmal hoch.

/e

Ist oben.

/e2

Also das Problem dabei ist - mit dieser Funktion frische ich Details im <img>-Tag auf. Jedoch muss ich ja dieses Funktion im <a>-Tag auffrischen, da die Lightbox ja nur mit einem verlinkten Bild funktioniert; nach diesem Schema:

Code: Alles auswählen

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>


[alm]

Zum ersten: link.href = "" + Photos[i+1]["datei_gross"]; ist nicht richtig, da der Array-Index für die Photo-Objekte bei 0 beginnt (nur die Nummerierung der Thumbnail-IMGs beginnt bei 1).
=> link.href = "" + Photos[i]["datei_gross"]; ... Dein (i+1)-1 ist zwar nicht sinnvoll aber richtig gewesen.
Abgesehen davon muss nicht das IMG sondern das übergeordnete A-Tag aktualisiert werden. Mein Fehler...
Versuchs mal mit
document.getElementById ('thumbnail' + (i + 1)).parentNode.href = Photos[index_erstes_bild + i]["datei_gross"];

[GoPeter]

Zum ersten: link.href = "" + Photos[i+1]["datei_gross"]; ist nicht richtig, da der Array-Index für die Photo-Objekte bei 0 beginnt (nur die Nummerierung der Thumbnail-IMGs beginnt bei 1).
=> link.href = "" + Photos[i]["datei_gross"]; ... Dein (i+1)-1 ist zwar nicht sinnvoll aber richtig gewesen.

Ja, war nur ne fixe Idee. Sinnvoll war's allemal nicht ^^

Abgesehen davon muss nicht das IMG sondern das übergeordnete A-Tag aktualisiert werden. Mein Fehler...
Versuchs mal mit
document.getElementById ('thumbnail' + (i + 1)).parentNode.href = Photos[index_erstes_bild + i]["datei_gross"];

Jep, das meint ich ja.

Jedenfalls funktionierts jetzte Vielen Dank für deine Hilfe!
Werde natürlich alle meine Resourcen (also deine JS Galerie und Lightbox) erwähnen und verlinken.

Vielen Dank

--> Und wenn alles fertig ist (sind ja längst nicht alle Bilder bzw. bisher noch falsche Detailansichten) werd ich's hier posten.

[alm]

Eine Erwähnung wäre natürlich nett... Vielleicht ist es ja mal angebracht einen eigenen Sammel-Post für die fertigen Galerien auf zu machen. Wer will, kann dort seine Galerie eintragen. Auf diese Weise sind alle beisammen und man kann sich das Script in verschiedenen "Gewändern" anschauen.