Chris: Thumbnail-Auswahl in vorgegebene HTML Seite

Ich möchte ziemlich viele Grafiken in eine Page geben und habe dabei folgenden Zustand:

*) Eine Seite mit vielen Thumbnails, in einem Frame

Je nachdem, welches Thumbnail angeklickt wird, soll ein Javascript eine einzige, definierte Seite öffnen, und das dazugehörige Bild in Originalgröße einfügen.

Aufbau:

dir\bilder
dir\bilder\thumbnails

Die Thumbnails haben den gleichen Namen, also müßte das Javascript (alle Thumbnails sollen mit dem selben Script aufgerufen werden)
den Namen des Bildes herausfinden und dann die eine Seite aufrufen und das Originalbild einfügen.

WIE KANN ICH DEN NAMEN DES BILDES HERAUSFINDEN??
(Ich möchte das im Batchbetrieb machen und deshalb NUR das Javascript als "Ziel" angeben!!

Danke schon im voraus!!

  1. Hallo Chris,

    Ich möchte ziemlich viele Grafiken in eine Page geben

    ich möchte auch viel... ich möchte auch begrüßt werden, wenn jemand ein Frage (an mich) stellt -stellvertretend für die Forumsgemeinde gesprochen-

    wie dem auch sei... bedankt hast du dich ja wenigstens :-)

    Habe sowas ähnliches grade diese Woche in eine Seite (aber keine frames) gehackt. Ist sicherlich optimierungsfähig, ne wahr Antje?<g>

    Da wird auch nix anderes, als ein klassischer Bildwechsel vorgenommen. Die großen Pix sind bei mir allerdings alle gleich groß, was die Sache etwas vereinfacht. Bei unterschiedlichen Bildgrößen gibtz bei Netsi Probleme weil er - auch bei <img src="gaga.gif"> OHNE height und width - die Bilder nicht "nachskaliert", wenn da vorher schon eins drin war, jedenfalls hatte ich den Effekt (Lösungsvorschlag dazu weiter unten).

    Das gif (thumbnail) und das jpg (groß und schick) haben den selben Basisnamen: gugelhupf.gif -> gugelhupf.jpg
    Den Pfad darauf kannst du dir ja zusammenbauen wie du lustig bist.

    Die Thumbnails (Nummern werden bei mir aus 'ner DB generiert):

    <a href="javascript:void()" onClick="return showPreview(0);">
      <img name="icon_0" src="bugatti/bugatti_f01.gif"
       width="64" height="64" border="0">
    </a>
    <a href="javascript:void()" onClick="return showPreview(1);">
      <img name="icon_1" src="bugatti/bugatti_f01.gif"
       width="64" height="64" border="0">
    </a>
    etc.

    Zur "Vorschau" hab ich ein andere IMG mit namen "zoom" - da kann zuerst auch ein transparentes GIF drinstecken.

    showPreview() bekommt die Nummer, die *hinter dem IMG-NAME* steht 0 für icon_0, 1 für icon_1 etc., hat also nix mit dem Dateinamen von dem gif/jpg zu tun. Du kannst die IMGs auch "richtig" benennen und dann den Namen übergeben, macht die Sache aber unnötig kompliziert und bringt defakto nix.
    Benennen mußt du die IMG-Teile aber, wenn du nicht 100% weißt (sicherstellen kannst), wieviele Bilder auf deiner Thumbnail-Seite drauf sind, ansonsten könntest Du dich auch durch das images[]-Array hangeln und dann eben den Index des Bildes angeben - aber irgendeinen Anhaltspunkt braucht die Funktion und eine Zahl ist so ziemlich das trivialste und sicherste.
    Ohne funktionierendes DOM leider nicht anderes machbar.

    WIE KANN ICH DEN NAMEN DES BILDES HERAUSFINDEN??

    don't yell!!

    So geht's (unter anderem)
    meine filestruktur ist:
      dadai.html             mit "icon_###" UND "zoom"
      \images\bild_xy.gif    ein subdir für alle gifs und jpgs
      \images\bild_xy.jpg

    Der Wechselbalg (so ziemlich der Originalquellcode):
    (ja ich weiß - das austauschen von GIF in JPG ginge auch mit RegExp - hat abba Klein-IE4 nicht... daher einfache Stringoperationen)

    function showPreview(imgNo) {
    /* Anzeige des grossen Vorschaubildes

    viele Einzelvariablen fuer die Zwischenberechnungen,
       die man sicher auch zusammenfassen kann - es kürzt aber
       auch diese Beispielzeilen
    */
    var bigPic, miniPic, picPath, urli, icn;

    // img-objekt des thumbs abgreifen
    icn = document.images["icon_"+imgNo];

    // src des GIFs holen
    miniPic = icn.src.toString();  // .toString() muß nicht sein
                                    // hatt aber mal probs ohne
    urli    = miniPic.split("/");  // pfad zerlegen in ein array
    miniPic = urli[urli.length-1]; // filename steht im letzten element
    bigPic  = urli[urli.length-2]; // subdir ("images") 'türlich davor
              // da beide im selben dir sind gleich in bigPic speichern

    // schnippel Name bis zum "." von "bildname.gif" und dranhängen
    bigPic += "/" + miniPic.substr(0, miniPic.lastIndexOf(".") );

    // kleb .jpg dran
    bigPic +=".jpg";

    // jpg anzeigen
    document.images["zoom"].src=bigPic;
    return false;
    }

    Du brauchst also nur *eine* Zielseite mit einem IMG name="zoom" um dort das Grossbild auszutauschen.
    Wenn die Bilder unterschiedlich groß sind, dann pack das IMG in einen
    LAYER (positioniertes DIV) und schreib dort per document.write einfach ein
      <img src="dasgroße.jpg">
    rein - OHNE width und height.
    Dann läd auch Netsi das Bild in seiner Originalgröße.

    Layers und DIV von "aussen" über Frames und was auch immer schreiben, wurde ca. 46.591.045 mal im Forum beantwortet und steht auch in SelfHTML (bitte selber suchen, danke).

    Gäbe da noch ein Menge andere Möglichkeiten das Bild in den anderen Frame zu bringen*) - aber du hast ja den Dateinamen gesucht und den hast du jetzt ;-)

    Viel Spaß
    CirTap

    *) u.a.

    • zielframe.location mit ziel.html?grossbild=dateiname.jpg

    • top.window.name = bildname
         in zielframe -> ziel.html laden
      in beiden fällen:
         ziel.html onLoad() holt sich den Bildnamen aus
         top.window.name oder dem URL-Parameter (.search)
         wechselt das bild oder "schreibt" eines rein.

    • haste PHP oder so? dann: ziel.php3?bild=dateiname
         und der PHP-Script generiert den HTML-Code - das
         waäre dann ohne JS

    das sollte wohl genügen...

    1. Gibt es einen html tag um ein browserfenster wieder zu schliessen ? Wer kann mir da weiterhelfen ?

      Hallo erstmal,

      das geht mit JavaScript:

      <a href="#" onclick="window.close()">...

      Grüße,
      Jürgen

  2. Hi!
    Ich habe auch was in der Art gemacht. Ich habe allerdings ein Frame benutzt und dort eine Variable abgelegt (parent.image) und schreibe den Namen des Bildes bei Klick da rein dann rufe ich die Seite zum Bild zeigen auf, lese parent.image wieder aus und bastle die Seite dynamisch zusammen. Wie Du den Namen bekommst weißt Du ja schon den Rest hier:

    <script Language="JavaScript">

    if (parent.image)
    {
      document.open();
      document.write("<body BGCOLOR="#003A75" background="../../style/back.gif" aLink="#FF962D" link="#FF962D" vlink="#FF962D">");
      document.write("<center>");
      document.write("<a href="javascript:history.back()"><img src="");
      document.write (parent.image);
      document.write(" "onMouseOver="dlc('Bei Klick gehts zurück!',''); return true;" onMouseOut="nd(); return true;" border="0"></a>");
      document.write("</center>");
      document.write("</body>");
      parent.image = "";    
      document.close();
    }
    else
    {
      document.open();
      document.write("<body BGCOLOR="#003A75" background="../../style/back.gif" aLink="#FF962D" link="#FF962D" vlink="#FF962D">");
      document.write("<center><br><br><br>");
      document.write("<font size="4" face="Comic Sans MS" color="#5AADAD">");
      document.write("<a href="javascript:history.back()">Uuups! Das gewünschte Bild wurde leider nicht gefunden!</a>");
      document.write("</font>");
      document.write("</center>");
      document.write("</body>");    
      document.close();
      parent.image = "";
    }

    </script>

    anzuschauen bei http://www.dorfzottel.de allerdings nur bei den Rittermahl- und Hochzeit-Bildern!
    Gruß
    Marcus