• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bildergalerie - mehrere Anfängerprobleme

Status
Für weitere Antworten geschlossen.
Damit müsste sich die Galerie dann auch relativ einfach an eine unterschiedliche
Zahl Thumbnails anpassen lassen
Ich meinte die Anzahl der angezeigten Thumbs. Habe mal ein Beispiel hochgeladen. j ist der Index für das Listenelement um das Vorschaubild. Dieser wird mit m bis m+3 verglichen. m ist die Nummer des ersten angezeigten Vorschaubilds. Da der Index bei 0 anfängt und die Nummer bei 1, wird nach dem Übertrag wieder 1 abgezogen.
Code:
        switch(j) {
            case bildNummer(m)-1:
                thumbListItem.className = "vorschaubild-1";
                break;
            case bildNummer(m+1)-1:
                thumbListItem.className = "vorschaubild-2";
                break;
            case bildNummer(m+2)-1:
                thumbListItem.className = "vorschaubild-3";
                break;
            case bildNummer(m+3)-1:
                thumbListItem.className = "vorschaubild-4";
                break;
            default:
                thumbListItem.className = "weggescrollt";
                break;
        }
Das müsste mit createElement() zu bewerkstelligen sein?
Ja, das ist die kompliziertere (aber bessere?) Variante. Weitere nützliche Dinge bei dieser Technik sind setAttribute und appendChild. Ob und warum das dem deutlich einfacherem Manipulieren von innerHTML vorzuziehen ist, kann ich nicht mit Sicherheit sagen.

Gruß
Junny
 
Werbung:
Hallo Junny,

und schon wieder: Danke!

Damit müsste sich die Galerie dann auch relativ einfach an eine unterschiedliche
Zahl Thumbnails anpassen lassen
Ich meinte die Anzahl der angezeigten Thumbs.
Die meinte ich auch, hatte mich aber schlampig ausgedrückt...
Das lässt sich aber auch bei Deiner jetztigen Lösung anpassen, wenn auch nicht
mittels einer Variablen, aber das macht nichts...
Das müsste mit createElement() zu bewerkstelligen sein?
Ja, das ist die kompliziertere (aber bessere?) Variante. Weitere nützliche Dinge bei dieser Technik sind setAttribute und appendChild. Ob und warum das dem deutlich einfacherem Manipulieren von innerHTML vorzuziehen ist, kann ich nicht mit Sicherheit sagen.

Gruß
Junny

Wie schon gesagt, werd ich mich damit erst befassen, wenn alles andere soweit läuft...

Bin gerade dabei, es in das Layout einzubauen (wird eine ziemliche <div>-Suppe...)
und hab jetzt ein ganz merkwürdiges Problem:
Auf der selben Seite ist auch eine Google-Map-API, die mit <body onload="load()"
onunload="GUnload()"> aufgerufen wird, nehme ich das aus dem <body>-Tag raus,
funktioniert die Galerie, habe ich es drin, tut der Browser so, als sei JavaScript
deaktiviert...
Ich kann aber nichts finden, wo sich die Scripte ins Gehege kämen?

Viele Grüße
Bernhard
 
Hast Du mal in der Fehlerkonsole geschaut, ob das Googlescript einen Fehler verursacht?

Gruß
Junny

edit: Man muss ja keine festgelegten Klassen im Stylesheet für die Vorschaubilder verwenden. Es reicht auch eine Klasse mit absoluter Positionierung und das Berechnen des Abstands von links sowie Setzen von style.left per Javascript.
 
Zuletzt bearbeitet:
Werbung:
Hast Du mal in der Fehlerkonsole geschaut, ob das Googlescript einen Fehler verursacht?

Gruß
Junny

Hallo Junny,

an die Fehlerkonsole denke ich noch viel zu selten...
Das Googlescript bringt sehr viele Warnungen, aber keine Fehler.

Das Problem tritt aber auch schon auf, wenn ich bei mir lokal teste
(Rechner ohne Internetverbindung, das Googlescript kann also gar
nicht geladen werden)...

Daher werde ich jetzt mal jeweils eine Zeile aus dem Google-Code löschen und jeweils schauen, was passiert.
Wenn die Galerie bei einer bestimmten Zeile funktioniert, dann nehme ich diese genauer unter die Lupe.
Ich vermute mal, dass irgendwo eine Variable die gleiche ist, oder so...

Viele Grüße
Bernhard

edit:
edit: Man muss ja keine festgelegten Klassen im Stylesheet für die Vorschaubilder verwenden. Es reicht auch eine Klasse mit absoluter Positionierung und das Berechnen des Abstands von links sowie Setzen von style.left per Javascript.

Das sind Schönheits-OPs, die ich irgendwann noch machen kann.
Der Aufwand, diese Galerie an die Anzahl der angezeigten Thumbnails anzupassen, ist so gering, dass das keine Rolle spielt...

Da werde ich vorher eher noch damit spielen, eine Variable für die gesamte Anzahl der Thumbs anzulegen, um damit die Breite der Thumbliste zu berechnen.

Nochmal edit: hab's gerade eben mal im IE getestet: da funktioniert es...

edit: Aktualisierung

selbst wenn ich den gesamten Google-Code rausschmeiße und nur das <body onload="load()"
onunload="GUnload()"> stehen lasse, funktioniert es nicht (auch wenn ich offline bin, also
definitiv nichts weiter geladen werden kann).

die Funktion load() ist direkt in den Head der Seite eingefügt:
Code:
<script type="text/javascript">
    //<![CDATA[
    function load() {
        if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
            var geocoder = null;
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            map.setCenter(new GLatLng(48, 11), 15, G_HYBRID_MAP);
            var point = new GPoint(11, 48);
            var html = "<h2></h2><p></p><a href='' target='_blank'><u>Routenplaner</u></a>"
            var xyz = new GMarker(point);
            GEvent.addListener(xyz, "click", function() {xyz.openInfoWindowHtml(html)});
            map.addOverlay(xyz);
        }
    }
    //]]>
    </script>
D.h. ich muss entweder den Google-Code anders laden, oder das Galerie-Script...

Grüße
Bernhard
 
Zuletzt bearbeitet:
Der Fehler wird durch <body onload="load()"> verursacht!

Hallo Junny,

hab mal ein bisschen gegoogelt:
Code:
window.onload = initGalerie;
das heißt doch, wenn ich das richtig verstehe, dass das Script erst ausgeführt
wird, wenn die Seite vollständig geladen ist?

Ich hab heute schon zigfach in die Fehlerkonsole geschaut und dabei ist mir
was aufgefallen: entferne ich das
Code:
onload="load()"
aus dem <body>-Tag, wird nicht nur die Google-Map nicht geladen, sondern ich
bekomme auch ein paar Warnungen für das Galerie-Script (assignment to undeclared variable).

Hab ich aber das komplette
Code:
<body onload="load()" onunload="GUnload()">
drin, bekomme ich Warnungen für das Google-Script, aber keine für das Galerie-Script.

Das heißt doch,
Code:
onload="load()"
verhindert das Laden des Galerie-Scriptes?

Wie müsste ich die Funktion load() aufrufen oder gegebenenfalls abändern, damit
sie erst nach dem vollständigen Laden des Galerie-Scriptes ausgeführt wird?

Grüße
Bernhard
 
hab mal ein bisschen gegoogelt:
Code:
window.onload = initGalerie;
das heißt doch, wenn ich das richtig verstehe, dass das Script erst ausgeführt
wird, wenn die Seite vollständig geladen ist?
Korrekt. Nachdem die Seite geladen wurde, wird die Funktion initGalerie aufgerufen, die das Script initialisiert. Generell solltest Du wissen, dass Befehle in Funktionen nur dann ausgeführt werden, wenn die jeweilige Funktion aufgerufen wird.

Ich hab heute schon zigfach in die Fehlerkonsole geschaut und dabei ist mir
was aufgefallen: entferne ich das
Code:
onload="load()"
aus dem <body>-Tag, wird nicht nur die Google-Map nicht geladen, sondern ich
bekomme auch ein paar Warnungen für das Galerie-Script (assignment to undeclared variable).
Das onload="load()" mach übrigens nichts anderes: Nach dem Laden der Seite wird die Funktion load aufgerufen (die das Googlescript initialisiert?).
Warnungen für das Galeriescript werden bei mir nicht angezeigt. Welchen Browser nutzt Du?

Das heißt doch,
Code:
onload="load()"
verhindert das Laden des Galerie-Scriptes?
Ohne die Seite zu sehen, kann darüber nur spekuliert werden.

Wie müsste ich die Funktion load() aufrufen oder gegebenenfalls abändern, damit
sie erst nach dem vollständigen Laden des Galerie-Scriptes ausgeführt wird?
Du könntest am Ende der initGalerie-Funktion die Funktion load aufrufen. Ist aber nicht die optimale Lösung, weil Du dann zwei voneinander unabhängige Scripte miteinander verbindest.

Gruß
Junny
 
Werbung:
Hallo Junny,

erstmal: mal wieder Danke für Deine Unterstüzung!
Ich beneide Dich drum, dass Du es geschafft hast, Dir JS selbst beizubringen.
Für mich ist es immer noch ein Buch mit sieben Siegeln...:-(
Das onload="load()" macht übrigens nichts anderes: Nach dem Laden der Seite wird die Funktion load aufgerufen (die das Googlescript initialisiert?).
Warnungen für das Galeriescript werden bei mir nicht angezeigt. Welchen Browser nutzt Du?
Firefox
Die Warnungen betreffen ausschließlich nicht deklarierte Variablen.
Sind für mich nachvollziehbar.
Heute ist's mir zu spät, dass ich sie noch hierher kopieren würde, kann ich aber morgen machen...
Wobei ich ja froh drum bin, weil ich so nachvollziehen kann, dass onload das Laden
des Galeriesripts blockt...
Ohne die Seite zu sehen, kann darüber nur spekuliert werden.
Nachdem ich mitbekommen habe, wie schnell hier Threads grundlos geschlossen werden,
hatte ich mich nicht getraut, es in einen neuen Beitrag zu schreiben:
in meinen vorhergehenden Beitrag hatte ich das meiner Ansicht nach wesentliche
hineineditiert: selbst wenn ich alles andere an Google-Code vollständig entferne,
bekomme ich die Galerie nur in der "ohne-JavaScript"-Version.

Ich werd morgen mal schauen, dass ich eine abgespeckte Version online verfügbar mache...
Du könntest am Ende der initGalerie-Funktion die Funktion load aufrufen. Ist aber nicht die optimale Lösung, weil Du dann zwei voneinander unabhängige Scripte miteinander verbindest.
Das wäre aber doch zumindest mal ein Versuch, den Fehler einzugrenzen.
Wenn es so läuft, dann kann man immer noch nach einer besseren Lösung suchen...
Grüße
Bernhard
P.S.: bei meiner Googlerei nach möglichen Ursachen bin ich auch auf ein
Google-Maps-API-Forum gestoßen. da werde ich auch mal nachfragen:
http://planet-gmaps.de/
 
Hallo Junny,

so, ich hab's geschafft, es funktioniert (noch nicht in allen Browsern getestet)!
Und zwar habe ich onload ergänzt:
Code:
<body onload="[B]initGalerie(),[/B]load()" onunload="GUnload()">
Ist das so korrekt? Oder muss ich jetzt
Code:
window.onload = initGalerie;
aus dem Galerie-Script löschen?

Gleich noch eine Frage, um noch ein bisschen was zu lernen (muss allerdings
zugeben, dass ich noch nicht danach gegoogelt oder Bücher gewälzt habe):

Für mein Layout ist es sinnvoll, den Pfeilen eine zusätzliche Klasse zu geben,
die habe ich erstmal hinter die beiden bereits vorhandenen geschrieben:
Code:
<a href="javascript:bild(num);" class="pfeil-li nur-bei-js galeriepfeil" id="bild-li">
das hat nicht funktioniert...
Da in dem Script
Code:
a.className = a.className.split(" nur-bei-js")[0];
steht, habe ich mir gedacht, ich schreibe die Klasse mal davor...
=> funktioniert, also scheint diese Script-Zeile nicht nur die Klasse "nur-bei-js"
zu entfernen, sondern auch alle Klassen, die danach kommen?
Liegt das an der [0]?

Hier noch die Warnungen:
Warnung: assignment to undeclared variable thumbList Zeile: 7
Warnung: assignment to undeclared variable thumbLink Zeile: 8
Warnung: assignment to undeclared variable a Zeile: 12
Warnung: assignment to undeclared variable j Zeile: 35
Warnung: assignment to undeclared variable thumbListItem Zeile: 7
i habe ich selbst schon ergänzt, in Zeile 2: var i = 0;

Viele Grüße
Bernhard

Edit: noch was ist mir aufgefallen, der IE < 6 kommt mit der Zuweisung
mehrer Klassen nicht zurecht, wird also die Pfeile immer anzeigen (noch
nicht getestet) und das auch noch an der falschen Position...
Dafür eine eigene CSS zu schreiben, ist kein Problem. Aber darin würde ich
ihm das Anzeigen der Pfeile verbieten, um Usern mit deaktiviertem JavaScript
keine Probleme zu machen. Damit hätten dann aber User mit nicht
deaktiviertem JavaScript ein Problem...
  • Kann ich dem IE < 6 das Laden des Scriptes verbieten?
  • Oder kann ich ihm ein zusätzliches JavaScript liefern, das das Problem mit den Pfeilen anders löst?
Edit: auch wenn Opera gewöhnlich kaum Probleme macht, hat er jetzt eins:
der kommt mit dem overflow:hidden nicht klar und lässt mich die gesamte
Seite um die entsprechende Breite scrollen...:-(

Kann ich das Script wie folgt abändern, oder gibt es eine bessere / elegantere Methode:
Code:
function initGalerie()
{
    thumbList = document.getElementById("thumbs");
    for(i=0; thumbLink = thumbList.getElementsByTagName("a")[i]; i++) {
        thumbLink.href = "javascript:bild("+(i+1)+");"
        thumbLink.target = "_self"
    }
    for(i=0; a = document.getElementsByTagName("a")[i]; i++) {
        if(a.className.search(" nur-bei-js") != -1)
            a.className = a.className.split(" nur-bei-js")[0];
    }
    document.getElementById("thumbs-scroller").style.overflow = "hidden";
     [B]document.getElementById("thumbs").style.width = "850px";[/B]
    scrollThumbs(0);
}
Hab's noch nicht getestet, denke aber, dass es funktionieren müsste, da ich
ja bei aktiviertem JavaScript ohnehin nur vier Thumbnails anzeige.
Etwas mehr könnte ich ihm auch noch geben...

Grüße
Bernhard
 
Zuletzt bearbeitet:
Und zwar habe ich onload ergänzt:
Code:
<body onload="[B]initGalerie(),[/B]load()" onunload="GUnload()">
Ist das so korrekt? Oder muss ich jetzt
Code:
window.onload = initGalerie;
aus dem Galerie-Script löschen?
Ja, das geht auch. Die Zeile im Script kannst Du dann löschen. Ich glaube aber, dass meine Variante sauberer war. Spielt aber eigentlich keine Rolle, wenns funktioniert. Nur rein aus Interesse: Verwendest Du vielleicht ein Frameset?

Für mein Layout ist es sinnvoll, den Pfeilen eine zusätzliche Klasse zu geben,
die habe ich erstmal hinter die beiden bereits vorhandenen geschrieben:
Code:
<a href="javascript:bild(num);" class="pfeil-li nur-bei-js galeriepfeil" id="bild-li">
das hat nicht funktioniert...
Da in dem Script
Code:
a.className = a.className.split(" nur-bei-js")[0];
steht, habe ich mir gedacht, ich schreibe die Klasse mal davor...
=> funktioniert, also scheint diese Script-Zeile nicht nur die Klasse "nur-bei-js"
zu entfernen, sondern auch alle Klassen, die danach kommen?
Liegt das an der [0]?
Ja, das ist eine sehr unsaubere Stelle des Scripts. Es wird einfach nur der Text genommen, der in der Klasse steht, und bei jedem " nur-bei-js" aufgeteilt. Anschließend wird der erste Teil des Aufgeteilten der neue Klassenname.

Mir war bisher nicht bekannt, dass man Variablen in Javascript deklarieren muss.

Edit: noch was ist mir aufgefallen, der IE < 6 kommt mit der Zuweisung
mehrer Klassen nicht zurecht, wird also die Pfeile immer anzeigen (noch
nicht getestet) und das auch noch an der falschen Position...
Danke, das wusste ich auch nicht.
Dafür eine eigene CSS zu schreiben, ist kein Problem. Aber darin würde ich
ihm das Anzeigen der Pfeile verbieten, um Usern mit deaktiviertem JavaScript
keine Probleme zu machen. Damit hätten dann aber User mit nicht
deaktiviertem JavaScript ein Problem...

  • Kann ich dem IE < 6 das Laden des Scriptes verbieten?
  • Oder kann ich ihm ein zusätzliches JavaScript liefern, das das Problem mit den Pfeilen anders löst?
Dem Internet Explorer kannst Du ganz einfach mit Conditional Comments andere Scripte, Styles etc. anbieten. Das ist hier aber meiner Meinung nach nicht nötig. Es gibt viele andere Möglichkeiten, die Pfeile erst bei Javascript anzuzeigen. Beispielsweise kannst Du sie über die ID ausblenden und mit Javascript direkt eine Styleeigenschaft ändern:
Code:
document.getElementById("pfeil-li").style.display = "block";

Edit: auch wenn Opera gewöhnlich kaum Probleme macht, hat er jetzt eins:
der kommt mit dem overflow:hidden nicht klar und lässt mich die gesamte
Seite um die entsprechende Breite scrollen...:-(

Kann ich das Script wie folgt abändern, oder gibt es eine bessere / elegantere Methode:
Ja, das sollte gehen. Die anderen Vorschaubilder werden ja bei aktiviertem Javascript ausgeblendet. Ob 850px richtig sind, weiß ich nicht.

Gruß
Junny
 
Werbung:
Hallo Junny,

Ja, das geht auch. Die Zeile im Script kannst Du dann löschen. Ich glaube aber, dass meine Variante sauberer war. Spielt aber eigentlich keine Rolle, wenns funktioniert.
Klar, als erstes muss es funktionieren => das Ziel haben wir erreicht (bzw.
in erster Linie hast Du es erreicht)
Da ich hoffe, etwas zu lernen, möchte ich es aber natürlich möglichst ordentlich haben...
Nur rein aus Interesse: Verwendest Du vielleicht ein Frameset?
Nein, würde ich nie machen, habe ich auch noch nie gemacht.
Du meinst wegen dem Opera-Problem? Da müsste man mal testen, ob er das
auch bei einem einfacheren Layout hat. Ich könnte mir vorstellen, dass er
schlicht an seine Grenzen kommt, weil ich eine enorme Div-Suppe koche
(mehrere Boxen mit mehrfarbig runden Ecken, d.h. die Lösung mit nur einem
Hintergrundbild geht nicht...)
Oder meinst Du wegen der Datei-Struktur? Die habe ich etwas verändert,
glaube aber nicht, dass das Probleme verursacht:
  • ich habe das Script in einen Ordner "includes" gepackt, der im Root-Verzeichnis
    liegt (in diesem Ordner liegen auch alle CSS-Dateien und die sonstigen Scripte)
  • im Root-Verzeichnis liegen mehrere Ordner, jeweils für einen einzelnen Ort;
    darin dann eine HTML-Seite und je ein Ordner "img" und "thumbs"
  • falls für die verschiedenen Orte unterschiedliche Bilderanzahlen erforderlich
    werden, muss ich da natürlich nochmal was ändern...
Ja, das ist eine sehr unsaubere Stelle des Scripts. Es wird einfach nur der Text genommen, der in der Klasse steht, und bei jedem " nur-bei-js" aufgeteilt. Anschließend wird der erste Teil des Aufgeteilten der neue Klassenname.

Mir war bisher nicht bekannt, dass man Variablen in Javascript deklarieren muss.
Mal sehen, ob ich dazu in meinen Büchern was finde - vielleicht irrt sich auch mein Firefox...
(...) der IE < 6 kommt mit der Zuweisung mehrer Klassen nicht zurecht (...)
Danke, das wusste ich auch nicht.
Da bin ich gestern beim Googeln drauf gestoßen (weiß leider nicht mehr wo),
scheint eine Fehlinformation zu sein!
http://www.css4you.de/trickkiste/tr00029.html
Ich hab's auch gerade auf http://browsershots.org/ ausprobiert: IE 5 hat
zwar stellenweise kleine Probleme mit meinem Layout, aber bei deaktiviertem
JavaScript sind keine Pfeile da => passt also...
Und den bei CSS4you erwähnten Netscape 4 ignoriere ich...
Dem Internet Explorer kannst Du ganz einfach mit Conditional Comments andere Scripte, Styles etc. anbieten.
Ja, das ist das einzige, was den IE sympathisch macht...:-)
Das ist hier aber meiner Meinung nach nicht nötig. Es gibt viele andere Möglichkeiten, die Pfeile erst bei Javascript anzuzeigen. Beispielsweise kannst Du sie über die ID ausblenden und mit Javascript direkt eine Styleeigenschaft ändern:
Code:
document.getElementById("pfeil-li").style.display = "block";
Mal sehen, ob ich all die Tipps, die du mir gegeben hast, im Hinterkopf behalten kann...
Ja, das sollte gehen. Die anderen Vorschaubilder werden ja bei aktiviertem Javascript ausgeblendet. Ob 850px richtig sind, weiß ich nicht.
Das genaue Pixel-Maß muss ich auch nochmal nachschauen, da aber außen herum
eh noch die Boxen kommen, kann ich ihm auch ein paar Pixel mehr geben...

Vielen Dank!
Ein schönes Wochenende
Grüße
Bernhard
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben