jürgen: JS oder Flash? oder wie?

Hallo!

Wieder mal ein Anliegen an euch!

Ich würde gerne eine Galerie so IN DIESER ART bauen und hatte vor, dies mit Javascript umzusetzen -> klick auf ein Thumbnail und daneben erscheint die große Version.
Bei mehr als 12 Fotos würde ich zB eine zweite HTML-Seite erstellen, zu der der Link mit "nächste Seite" führt usw.

Irgendwie hab ich aber das Gefühl dass ich 1. damit (mit JS) mit Kanonen auf Spatzen schiesse und 2. mir mit dem Nachbestücken bzw. Entfernen von gewissen Fotos einfach schwer tun werde.

Auch hab ich schon daran gedacht, eine ähnlich designte Flash-Galerie einzubauen - Flash wird allerdings wieder so verteufelt ...

Summa summarum:

  • reine HTML-Lösung möglich? (vermute nicht, da statisch)
  • wie am ökonomischten mit JS umsetzen?
  • Sch... drauf und Flash in HTML-Seite einbinden? Wenn ja, wie??

Danke euch!

  1. Hi there,

    Summa summarum:

    • reine HTML-Lösung möglich? (vermute nicht, da statisch)

    Ja, aber sehr mühsam, weil Du ja pro 12 Bilder 12 idente Seiten bauen müsstest, die sich nur durch das grosse Bild unterscheiden. Einfacher wär's mit Frames, mit den üblichen Konsequenzen oder aber mit einem Iframe, in den Du jeweils das grosse Bild lädst. Als einziger Nachteil eines Iframes wäre hier zu nennen, daß man nicht direkt auf eine Seite verweisen kann, in der bereits ein bestimmtes grosses Bild geladen ist.

    • wie am ökonomischten mit JS umsetzen?

    was verstehst Du unter ökonomisch? Ich würde es jedenfalls in JS machen, wenn mir keine serverseitige Lösung möglich ist, auch wenn ich mir damit auch beinahe sicher den gleichen Nachteil wie bei Iframes einhandelte, nämlich daß man nicht im vorhinein auf eine bestimmte Seite verweisen könnte (was aber in js noch irgendwie lösbar wäre)

    • Sch... drauf und Flash in HTML-Seite einbinden? Wenn ja, wie??

    Imho keine so gute Idee. In Flash programmierte Fotoalben haben meist nur den "Vorteil", daß die Bilder nicht einfach gespeichert werden können und für irgendwelche Spielereien beim Umblättern oder ähnlichem. Dafür müssen meist immer alle Bilder, auch die grossen vorgeladen werden, funktioniert nur mit Flashplugin, das viele blocken, wegen der nervigen Zappeleien in vielen Seiten etc. etc. Wenn trotzdem, wie? Keine Ahnung, ich halte von Flash Abstand, aber ich denke, es gibt sicher einige fertige "Lösungen" im Web...

  2. Hallo jürgen!

    Irgendwie hab ich aber das Gefühl dass ich 1. damit (mit JS) mit Kanonen auf Spatzen schiesse und 2. mir mit dem Nachbestücken bzw. Entfernen von gewissen Fotos einfach schwer tun werde.

    Keineswegs. Solche Galerien werden sehr oft mit JavaScript erstellt. Das Problem mit »Nachbestücken/Entfernen« kannst du mit einer serverseitigen Technik lösen:

    • die serverseitige Technik (Perl, PHP) ermittelt, welche Bilder im Verzeichnis sind und als Thumbs auf der/den Seiten gezeigt werden
    • JavaScript sorgt für den Effekt: Klicken auf Thumb, großes Bild erscheint
    • ferner kann die serverseitige Technik dafür sorgen, dass die großen Bilder in einer Art Blätter-Galerie angezeigt werden (siehe meine Roadstergalerien mit und ohne Js: http://www.atomic-eggs.com/roadster/start.shtml

    • reine HTML-Lösung möglich? (vermute nicht, da statisch)

    nada

    • wie am ökonomischten mit JS umsetzen?

    So viel wie nötig, so wenig wie möglich ;)

    • Sch... drauf und Flash in HTML-Seite einbinden? Wenn ja, wie??

    Eher: Sch... auf Flash!

    Danke euch!

    GG

    Viele Grüße aus Frankfurt/Main,
    Patrick

    --
    _ - jenseits vom delirium - _

       Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
    J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
    1. Hallo Ingrid!

      Dieser Satz keinen Sinn:

      • ferner kann die serverseitige Technik dafür sorgen, dass die großen Bilder in einer Art Blätter-Galerie angezeigt werden (siehe meine Roadstergalerien mit und ohne Js: http://www.atomic-eggs.com/roadster/start.shtml

      ...
      wenn jemand mit deaktiviertem JS unterwegs ist.

      So. Dieser Satz jetzt Sinn.

      Viele Grüße aus Frankfurt/Main,
      Patrick, Ingrid-Bruder von Gunnar

      --
      _ - jenseits vom delirium - _

         Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
      J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
    2. Solche Galerien werden sehr oft mit JavaScript erstellt. Das Problem mit »Nachbestücken/Entfernen« kannst du mit einer serverseitigen Technik lösen:

      das mit serverseitig etc. lass ich gleich da ich davon gleich gar keine Ahnung habe. Aber mir ist gerade eingefallen dass ich - bei gescheitem Grundaufbau - ja bei Nach-/Neubestückung nicht unbedingt den Code ändern muss sondern einfach andere Thumbs bzw. Fotos unter den jeweiligen Dateinamen umspeichern muss.

      • JavaScript sorgt für den Effekt: Klicken auf Thumb, großes Bild erscheint

      So habe ich das vor. Ich kenne das einfache "javascript: onclick=xxxxx()" mit dem ich bisher durch Aufruf einer Funktionmit einem "Weiter-Button" vor- und rückblättern lies (Beispiel) aber wie mach ich das, dass einfach beim Klick auf das Thumb das Foto "ausgetauscht" wird?

      • ferner kann die serverseitige Technik dafür sorgen, dass die großen Bilder in einer Art Blätter-Galerie angezeigt werden (siehe meine Roadstergalerien mit und ohne Js: http://www.atomic-eggs.com/roadster/start.shtml

      wie Blättergalerie?

      Eher: Sch... auf Flash!

      ;-)

      Viele Grüße aus Frankfurt/Main,
      Patrick

      Liebe Grüsse retour!

      1. Hallo jürgen!

        mit und ohne Js: http://www.atomic-eggs.com/roadster/start.shtml
        wie Blättergalerie?

        Da fehlte was in meinem Satz (habe ich im Nachtrag korrigiert): Du möchtest eine der Galerien mal mit deaktiviertem JavaScript besuchen. Da übernimmt ein Perl-Skript die Galerie-Funktion, allerdings nicht so konfortabel, aber immerhin kommen User dank des Perlskripts auch ohne JS im Genuß der Bilder.

        Ach ja: javascript:onclick -> nicht gut... onclick als Attribut im HTML-Tag eines Elements erwartet bereits JavaScript, also ist »javascript:« überflüssig. Der Konstrukt <a href="javascript:tuwas()">...</a> ist selten bis nie nötig.

        »» Eher: Sch... auf Flash!
        ;-)

        Ich bin nicht gänzlich Flashfeindlich, was Banner angeht oder so. Aber wenn ich eine Seite besuche, die nur aus Flash besteht, bin ich sofort wieder weg. Für Dein Vorhaben ist Flash aber auf keinen Fall vonnöten.

        Viele Grüße aus Frankfurt/Main,
        Patrick

        --
        _ - jenseits vom delirium - _

           Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
        J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
    3. (siehe meine Roadstergalerien mit und ohne Js: http://www.atomic-eggs.com/roadster/start.shtml

      Ahhh, geschnallt. Eigentlich hast Du die Verquickung von meiner aktuellen Blättergalerie und meiner gewünschten Thumbnail-Galerie!
      DAS hatte ich auch schon im Sinn aber wegen Undurchführbarkeit aufGrund Nichtwissen abgehakt. Dein Quellcode hingegen gibt mir Auftrieb dass ich das auch schaffen könnte!

      Als Unterschied zu Deiner Galerie hätte ich gern die Thumbnails so wie in meinem Designbeispiel aber vielleicht in einem nach unten scrollbaren Bereich ("class") wohingegen der Bereich mit dem Foto stehen bleibt.

      wie müsste der class-teil in etwa aussehen, damit ich sowas
      schaffe. Der Scrollbalken muss zwar nicht sein ist aber für ungeübte User wahrscheinlich klarer, dass es da unten weitergeht.

      Danke!!!

      1. Hallo jürgen!

        Ahhh, geschnallt.

        Wußte ich, dass der Groschen fällt ;)

        Eigentlich hast Du die Verquickung von meiner aktuellen Blättergalerie und meiner gewünschten Thumbnail-Galerie!

        In etwa, ja. Wer JS aktiviert hat, kann alles von der selben Seite aus machen (das geschieht _clientseitig_ mittels JS in seinem Browser), wer lieber ohne JS unterwegs ist, bekommt die Ausgabe über ein Perl-Skript, den er allerdings beim Klicken aufs nächste Bild immer wieder aufruft -> serverseitig, weil jeder Aufruf eine neue, vom Perl-Skript generierte Seite aufruft (siehe URI im Adressfeld jedesmal und vergleiche mit der JS-Variante).

        DAS hatte ich auch schon im Sinn aber wegen Undurchführbarkeit aufGrund Nichtwissen abgehakt.

        Es gibt nichts, was man nicht lernen kann (OK, mir fällt es zunehmend schwer, siehe Alter) ;)

        Dein Quellcode hingegen gibt mir Auftrieb dass ich das auch schaffen könnte

        Wenn Du allerdings meinen Code zum Lernen nutzen willst, dann eher den »unbostrusiveren« hier.

        wie müsste der class-teil in etwa aussehen, damit ich sowas
        schaffe. Der Scrollbalken muss zwar nicht sein ist aber für ungeübte User wahrscheinlich klarer, dass es da unten weitergeht.

        overflow:hidden für längere Inhalten, die erst beim Scrollen erscheinen sollen.

        Ich muss aber gestehen, dass das Ganze bei mir schon etwas trickyer ist. Hast Du etwa geglaubt, ich habe die ganzen Thumbnail-Verlinkungen hart codiert? ;)

        Nein, das übernimmt (außer eben im verlinkten Beispiel) ein anderes Perl-Skript, das mit SSI eingebunden wird (deswegen .shtml) ;)

        BTW: Der Ingeniör (aka Malcolm Beck's und Tom aus Bitworks *g*) hatten eine PHP-Variante vorgestellt, wie man mittels PHP sowas ähnliches hinbekommt.

        Viele Grüße aus Frankfurt/Main,
        Patrick

        --
        _ - jenseits vom delirium - _

           Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
        J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
        1. So: nun hab ich das Grundgerüst für die Galerie mal fertig (Vereinfachungsvorschläge welcome; ich bin da eher der Zusammenstöpsler als der Profi).
          Allerdings noch ohne Link bzw. JS, nur Thumbnails und dieses eine Foto.

          Die thumbs mit fortlaufender Nummerierung sind unter /thumbs hochgeladen, die fotos gleichnamig unter /fotos.

          Wie stelle ich es jetzt mit JS am besten an, beim Klick auf ein THUMB namens 005.jpg nun das FOTO 005.jpg rechts anzeigen zu lassen (bzw. das dort stehende Foto quasi auszuwechseln) ???

          Danke euch!

          1. Hallo jürgen!

            So: nun hab ich das Grundgerüst für die Galerie mal fertig (Vereinfachungsvorschläge welcome; ich bin da eher der Zusammenstöpsler als der Profi).

            Igitt, warum ein Tabellenlayout? Du hast oben zwei Linklisten, laß sie bitte je eine Liste sein (ul, li - display:inline für die horizontale Darstellung). Die Trennlinie kannst Du erreichen, in dem Du einer der Listen einen Border gibst, eg. obere Liste border-bottom oder untere Liste border-top.

            Unten hast Du zwei Bereiche, laß sie bitte gefloatete Div-Elemente sein. Eins links für die Thumbs, eins rechts für das anzuzeigende Bild. Das linke DIV berechnest Du so, dass es so groß ist wie drei Thumbs+Absta(e)nd(e) (padding, margin), das Rechte ist dann so groß wie ein »Großbild«, hier darfst Du auch mit dem Rahmen spielen.

            Und dann kannst Du sowas ähnliches wie mein JS-Code nachbauen, denn im Grunde hast Du nichts anderes: Ein auf Klick auf einem Bild in einem Bereich mit Thumbs (was bei mir der Filmstreifen ist) tauscht das Bild im rechten Teil aus.

            Viele Grüße aus Frankfurt/Main,
            Patrick

            --
            _ - jenseits vom delirium - _

               Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
            J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
            1. Hallo Patrick!

              Igitt, warum ein Tabellenlayout? Du hast oben zwei Linklisten, laß sie bitte je eine Liste sein (ul, li - display:inline für die horizontale Darstellung).
              Unten hast Du zwei Bereiche, laß sie bitte gefloatete Div-Elemente sein.

              http://www.atomic-eggs.com/z_testdir/html/juergen.html

              HTML: 15mn Arbeit
              CSS: 30mn justieren
              JS: 10mn

              Wenn Du CSS und JS auslagerst, wie es sich gehört, hast Du gerade Mal 60 Zeilen Quelltext.

              Viele Grüße aus Frankfurt/Main,
              Patrick

              --
              _ - jenseits vom delirium - _

                 Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
              J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
              1. Igitt, warum ein Tabellenlayout?

                Weil ich (derzeit) von der Gestaltung mit anderen Varianten null Ahnung habe ...
                Ich möchte aber nicht warten, bis ich alles verstehe ;-)
                (Meine (Murks)Variante sieht so aus: http://web485.server-drome.net/projekt3/galerie.html und funktioniert aber zB im IE noch nicht.)

                http://www.atomic-eggs.com/z_testdir/html/juergen.html
                HTML: 15mn Arbeit
                CSS: 30mn justieren
                JS: 10mn
                Wenn Du CSS und JS auslagerst, wie es sich gehört, hast Du gerade Mal 60 Zeilen Quelltext.

                Coooooool!
                Sieht mit vieeeel weniger Quellcode ident aus wie mein Murkscode und funktinoiert im IE dafür auch sofort ;-)
                Vielen Dank für Deine Mühe!!!!! Ich werd mir den Quelltext mal zu Gemüte führen und versuchen, im Umkehrschluss die Codierung zu begreifen. WENN ich das schaffe und somit auch für zukünftige Änderungen imstande bin würd ich ihn gern verwenden - mit Deiner freundlichen Genehmigung natürlich.

                Frage noch dazu: ich hab schon mit Pseudoklassen (?) erfolglos versucht, den Thumbs folgendes zu verpassen:

                • bei hover: weisser Rahmen oder thumb wird heller
                • bei active bzw. focus: weisser Rahmen
                • bei visited: weisser Rahmen oder thumb wird dunkler
                1. Hallo jürgen!

                  »» Igitt, warum ein Tabellenlayout?
                  Weil ich (derzeit) von der Gestaltung mit anderen Varianten null Ahnung habe ...

                  Ja, mag sein, dass mit Tabellen Layouten auf den ersten Blick einfacher zu sein scheint. Wenn Du etwas Zeit übrig hat, dann folge in meiner Signatur dem Link »Achtung Agentur« und zieh Dir die Beispiele 'rein ;)

                  Tabellen verkomplizieren den Code unnötig. Lieber gleich richtig™ lernen, was CSS für Möglichkeiten bietet.

                  Ich möchte aber nicht warten, bis ich alles verstehe ;-)

                  Dafür helfen wir Dir hier gerne weiter...

                  (Meine (Murks)Variante sieht so aus: http://web485.server-drome.net/projekt3/galerie.html und funktioniert aber zB im IE noch nicht.)

                  Im IE 7 (Vista) funzt™ Deine Seite. Aber es soll kein Kriterium sein ;)

                  »» http://www.atomic-eggs.com/z_testdir/html/juergen.html
                  Coooooool!
                  Sieht mit vieeeel weniger Quellcode ident aus wie mein Murkscode und funktinoiert im IE dafür auch sofort ;-)

                  Opera habe ich nicht getestet, weil ich derzeit keine Operas auf dem Rechner habe. Aber meine Roadster-Galerien hatte damals keine Probleme mit Opera 9.x, als ich sie gebaut habe.

                  Vielen Dank für Deine Mühe!!!!! Ich werd mir den Quelltext mal zu Gemüte führen und versuchen, im Umkehrschluss die Codierung zu begreifen. WENN ich das schaffe und somit auch für zukünftige Änderungen imstande bin würd ich ihn gern verwenden - mit Deiner freundlichen Genehmigung natürlich.

                  Natürlich, in der Regel ist hier als Hilfe geposteter Code wiederverwendbar - sonst würde man ihn nicht posten ;) Wenn Du irgendwas nicht verstehst, dann frage ruhig wieder hier.

                  Das HTML und das CSS sind aber eigentlich selbst erklärend, mit dem JavaScript-Code sind sicher Verbesserungen möglich, das können uns aber die Experten™ sagen ;)

                  Frage noch dazu: ich hab schon mit Pseudoklassen (?) erfolglos versucht, den Thumbs folgendes zu verpassen:

                  • bei hover: weisser Rahmen oder thumb wird heller

                  Weißer Rahmen dürfte kein Problem sein (border-Eigenschaft beim Hovern ändern);
                  »Thumb wir heller« ist schon etwas trickyer. Da müsstest Du pro Thumb sozusagen ein Bild bauen, bestehend aus dem »normalen« und der »helleren« Zustand des Bildes, und beim Hovern die Position ändern:

                  --------
                  | Bild |
                  |normal|
                  --------  << ein einziges Bild! Bei Hover rutscht »heller« nach oben
                  | Bild |
                  |heller|
                  --------

                  • bei active bzw. focus: weisser Rahmen

                  border-Farbe entsprechend ändern, Beispiel:

                  normal ist: border: 1px solid red;
                  active ist: border: 1px solid white;

                  • bei visited: weisser Rahmen oder thumb wird dunkler

                  Wie oben.

                  Viele Grüße aus Frankfurt/Main,
                  Patrick

                  --
                  _ - jenseits vom delirium - _

                     Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
                  J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
              2. Super, sowas braucht das Forum!

                Mathias

              3. Hallo!

                http://www.atomic-eggs.com/z_testdir/html/juergen.html

                Während mein Patenkind und seine Mama sich den Frankfurter Fastnachtumzug angeschaut haben, habe ich das Beispiel weitergesponnen, bezugnehmend auf meine Antwort auf Mathias hier.

                Nochmals zu Jürgens Eröffnungsposting:

                Irgendwie hab ich aber das Gefühl dass ich 1. damit (mit JS) mit Kanonen auf Spatzen schiesse und 2. mir mit dem Nachbestücken bzw. Entfernen von gewissen Fotos einfach schwer tun werde.

                In meiner Antwort erwähnte ich den Einsatz serverseitiger Techniken, die zum einen das Hinzufügen und Entfernen von Bildern erleichtern, und zwar so, dass man nicht jedesmal den Inhalt des DIV-Elements für die Thumbnails händisch coden muss. Ferner hat das oben verlinkte Beispiel den Nachteil, dass wenn zwar Besucher ohne JavaScript die Bilder sehen können, diese Bilder im nackten, unschönen Browserfenster gezeigt werden.

                Mit dem zweiten Beispiel ist es anders:

                http://www.atomic-eggs.com/z_testdir/html/juergen.shtml

                Hier sind erstmal CSS und JavaScript ausgelagert. Das ganze JavaScript? Nein, ein kleines Teil ist noch da, das sind Werte, die mir das Perl-Skript nach dem Einlesen des Bilderverzeichnisses liefert. Aber der Reihe nach.

                Die Datei auf dem Server sieht so aus:

                http://www.atomic-eggs.com/z_testdir/files/juergen.txt

                An zwei Stellen wird die Ausgabe eines Perl-Skripts included, und zwar Zeile 15 (eben die benötigten Variablen für JavaScript) und Zeile 43. Das Skript thumbs.pl liest die vorhandenen Dateien aus dem Bilderverzeichnis, sortiert sie nummerisch, extrahiert Nummern und Namensteil der Bilder, und schreibt, mit dem Parameter 'js' aufgerufen, die Variablen npart und start_pic (die dann von JavaScript nach dem Laden der Datei gebraucht werden) in dem JavaScript-Block.

                Ohne Parameter aufgerufen (Zeile 43 der .shmtl-Datei), wird der else-Zweig des Skriptes ausgeführt und ausgegeben: eben die Verlinkung der Thumbsnails im DIV "thumbs".

                Verlinkt wird dabei ein weiteres Skript, gallery.pl, auf das wir gleich kommen:

                <a class="thumbs" href="/z_testdir/scripts/perl/gallery.pl?url=/roadster/20040228/DSCN1001.jpg">.....</a>

                Das unterscheidet sich vom ersten Beispiel für Jürgen dadurch, dass diesmal der komplette Bilddateiname im href-Attribut steht, weswegen das JavaScript im zweiten Beispiel abgeändert wurde - ist aber im Grunde viel einfacher.

                Und was macht nun gallery.pl?

                Wenn ein Besucher JavaScript deaktiviert hat, kann ja beim Klick auf die Thumbnails kein onclick return false »greifen«, sondern das Linkziel wird aufgerufen. Die URI ist .../gallery.pl?url=/.../.../DSCN1234.jpg. Das Skript nimmt den Wert des url genannten Parameter entgegen und generiert mittels eines HTML-Templates die No-JavaScript-Galerie-Seite.

                Dabei bedienst sich das Skript des Moduls HTML::Template und dieses Templates:

                http://www.atomic-eggs.com/z_testdir/files/juergen_tpl.txt

                Auch hier liest das Skript gallery.pl das Bildverzeichnis ein, und generiert in einem Loop die Verlinkungen im DIV "thumbs".

                Bei jedem Klick auf einem Thumbnail wird das Skript erneut aufgerufen, generiert die Seite neu mit dem neuen Bild im rechten DIV. So sieht es aus wie die JavaScript-Variante, nur etwas langsamer weil jedesmal neu generiert werden muss. Und so sind alle zufrieden und glücklich und ich auch ;)

                Viele Grüße aus Frankfurt/Main,
                Patrick

                --
                _ - jenseits vom delirium - _

                   Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
                J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
                1. http://www.atomic-eggs.com/z_testdir/html/juergen.shtml

                  Hier sind erstmal CSS und JavaScript ausgelagert. Das ganze JavaScript?

                  Ich hoffe ich darf mir hier ein paar Anmerkungen erlauben? Der Code ist noch nicht so schön. Du hantierst hier im Code mit globalen Variabeln rum, was einerseits unsauber ist und anderseits auch problematisch werden kann, da du z.b. name verwendest, was ein schon benutzer Wert ist. Auch die anderen sind unnötigerweise global. Und ich hab mal ein function Objekt daraus, das hat den Vorteil das du lokale Variabel definieren kannst, die im ganzen Objekt gültig sind.

                  Ich hab es mal ein bisschen modifiziert

                  var ShowGal = new function() {  
                  	var path = "http://www.atomic-eggs.com/roadster/20040228/";  
                  	var suffix = ".jpg";  
                  	var img = document.createElement("img");  
                  	var element = null;  
                  	img.onload = function() {  
                  		element.style.opacity = '1';  
                  	}  
                  	this.getFirst = function (name) {  
                  		var first_src = name;  
                  		img.src = first_src;  
                          element.appendChild(img);  
                      };  
                  	  
                  	this.fromFilm = function (name) {  
                  		element.style.opacity = '0.5';  
                  		img.src = name;  
                  		element.appendChild(img);  
                      };  
                  	  
                  	this.init = function () {  
                  		  
                          window.onload = function() {  
                  		element = document.getElementById('show');  
                  		ShowGal.getFirst(path + npart + start_pic + suffix);  
                  		var a = document.links;  
                              for (i = 0; i < a.length; i++) {  
                                  if (a[i].className == 'thumbs') {  
                                      a[i].onclick = function() {  
                                          var num = this.href;         // eg http://www.atomic-eggs.com/z_testdir/scripts/perl/gallery.pl?url=/roadster/20040228/DSCN1000.jpg  
                                          num = num.split('/').pop();  
                    
                  						var name = path+ num;  
                    
                                          ShowGal.fromFilm(name);  
                                          return false;  
                                      }  
                                  }  
                              }  
                          }  
                      }  
                  };  
                  ShowGal.init();
                  

                  Struppi.

                  1. Hallo Struppi!

                    Ich hoffe ich darf mir hier ein paar Anmerkungen erlauben?

                    Aber sicher. Ohne Dein Posting hätte ich sicher nicht so schnell gemerkt, dass mein JavaScript mit den IEs nicht lief. Grund: Anscheinend kennt der IE keine Minuswerte bei substr(). Also habe ich jetzt:

                    num = num.substr(19);

                    anstatt im alten Code:

                    num = num.substr(-8);

                    und natürlich:

                    name = path+num;

                    da ich den Suffix nicht mehr brauche...

                    Hm, JavaScript ist toll? Perl versteht seine Funktionen, bei JavaScript ist immer browserabhängig, und das kotz^W nervt mich zunehmend. Abgesehen davon ist Perls substr() anscheinend um einiges mächtiger.

                    da du z.b. name verwendest, was ein schon benutzer Wert ist.

                    Ja, ist schon unklug der Name »name« ;)

                    Ich hab es mal ein bisschen modifiziert

                    Ist jetzt hier zu sehen:

                    http://www.atomic-eggs.com/z_testdir/html/juergen2.shtml, thx.

                    Aber wozu ist:

                    style.opacity

                    gut? Ob ich es wegmache oder lasse, ich sehe keinen Unterschied...

                    Viele Grüße aus Frankfurt/Main,
                    Patrick

                    --
                    _ - jenseits vom delirium - _

                       Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
                    J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
                    1. Aber wozu ist:

                      style.opacity

                      gut? Ob ich es wegmache oder lasse, ich sehe keinen Unterschied...

                      Das hatte ich eingebaut, weil bei deinem Skript nicht erkennbar ist, das was passiert, wenn man auf ein Bild klickt und da es durchaus ein paar Sekunden dauert, bis die Bilder geladen sind, entsteht der Eindruck, es passiert nichts.

                      Struppi.

                      1. Hallo Struppi!

                        »» style.opacity
                        Das hatte ich eingebaut, weil bei deinem Skript nicht erkennbar ist, das was passiert, wenn man auf ein Bild klickt und da es durchaus ein paar Sekunden dauert, bis die Bilder geladen sind, entsteht der Eindruck, es passiert nichts.

                        Ach so, konnte ich ja nicht beurteilen, weil bei mir alles flott ging, sowohl lokal als auch über den Webhoster.

                        OT: Wo ist eigentlich Siechfred?

                        Viele Grüße aus Frankfurt/Main,
                        Patrick

                        --
                        _ - jenseits vom delirium - _

                           Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
                        J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
                        1. OT: Wo ist eigentlich Siechfred?

                          Arbeit und Familie, nehme ich mal an.

                          Struppi.

  3. Hi,

    Irgendwie hab ich aber das Gefühl dass ich 1. damit (mit JS) mit Kanonen auf Spatzen schiesse und 2. mir mit dem Nachbestücken bzw. Entfernen von gewissen Fotos einfach schwer tun werde.

    seit wann ist javascript denn eine Kanone? Imho ist sowas ein gutes Einsatzgebiet, unter der Vorraussetzung, dass Du entsprechzende Alternativen bereithältst. Meine Galerie ist auch mit js gemacht.

    Auch hab ich schon daran gedacht, eine ähnlich designte Flash-Galerie einzubauen - Flash wird allerdings wieder so verteufelt ...

    Flash hat den Nachteil, dass Inhalte - da ein Film mit einer Url - nicht gut gefunden werden. Imho auch besser für Animationen etc geeignet.

    • reine HTML-Lösung möglich? (vermute nicht, da statisch)

    nicht so wie Du es Dir vorstellst, es sei denn, mouseover/out langt Dir, das kann man mit css lösen: css-galerie

    Gruesse, Joachim

    --
    Am Ende wird alles gut.