Ein altes Script zum Funktionieren bringen?

[Webhufi]

Hallo,

ich habe auf meiner Nostalgie-Page aus dem Jahr 2002 eine nette Bildershow, die aber in den neuen Browsern nicht funktioniert. Meint ihr, dass ihr die Präs zum Laufen bringen könnt? Das wäre mir ein besonderes Anliegen...

Schaut bitte hier.

Viele Grüße

Norbert

 

[Sempervivum]

Mal sehen, ob ich das richtig verstehe: Du möchtest das Fenster mit einer einheitlichen Größe einrichten, die A4 entspricht und dann die Bilder so anzeigen, dass sie dazu im richtigen Verhältnis stehen, dass also ein Bild von z. B. 10,5 x 15 cm dieses Fenster halb ausfüllt? Damit der Betrachter einen Eindruck von der Größe bekommt?

Freut mich, dass mein Flipbook dein Interesse geweckt hat. Anscheinend wird das Buch dort bei Yumpu gehostet und ich frage mich, ob es dann kostenlos sein kann, weil das Hosting ja Kosten verursacht? Vielleicht werbefinanziert mit Einblendungen?

 

[Webhufi]

Ich dachte zuerst, dass das komplette A4 gezeigt wird, wo ich in die Vorlage die - auch - kleineren Bilder hineinkopiert habe. Wie bei den ersten vier Bildern zu sehen.
Dein Denkansatz scheint mir aber der bessere zu sein, denn da könnte ich kleinere Bilder einfach im Original scannen und bräuchte sie nicht in eine A4-Vorlage kopieren.
Aber im Prinzip kommt beides auf dasselbe hinaus.

Flipbook: Das geht aus der Beschreibung im Link nicht hervor, sieht aber tatsächlich werbefrei aus. Noch bin ich dabei, die PDFs zu erstellen... Bin auf das Ergebnis gespannt, denn deine Präs ist wirklich klasse!

 

[Sempervivum]

Weil ich die Aufgabe interessant finde, habe ich es Mal kodiert, so wie ich es mir vorstellte:
Hier das config-JS:

//Ge�ndert f�r Zeichnungen!
MainVar = 0; // Sets up the variable that counts the pictures.

// Parameter fuer Hoehe und Breite des Bildes in cm hinzu gefuegt
function Fix(DatVal, PicVal, TitVal, CatVal, TxtVal, wImg, hImg) { // Allows you to use variables for the array instead of numbers.
    this.DatVal = DatVal
    this.PicVal = PicVal
    this.TitVal = TitVal
    this.CatVal = CatVal
    this.TxtVal = TxtVal
    this.wImg = wImg; // hinzu gefuegt
    this.hImg = hImg; // hinzu gefuegt
}
var MainArray = new Array() // Sets up the main array.

// Now add one line for each picture you want in the album.  The format of these lines is shown below:
// MainArray[MainVar++] = new Fix("date", "picname.jpg", "pic title", "category", "pic description")
//ACHTUNG! Die Voreinstellung [PicVar++] ist falsch und muss umge�ndert werden in [MainVar++] !!!!

// Auch hier muessen Breite und Hoehe des Bildes in cm hinzu gefuegt werden
// dies habe ich bisher nur fuer "... mit 14" und "... mit 15" gemacht.
MainArray[MainVar++] = new Fix("1963<br>", "1963ErsteBilder10.jpg", "mit 10 Jahren...", "", "<br>...die fr�hesten erhalten gebliebenen �bungen...ab hier keine Durchpausen mehr, sondern alles freihand! <br><br>Blattgr��e: DIN A 5 <br><br>")
MainArray[MainVar++] = new Fix("1965<br>", "1965Lessing12.jpg", "mit 12 Jahren...", "", "<br>...im Kunstunterricht: Ausschnitt aus einem 'Werk' mit Pinsel und Tusche <br><br>Blattgr��e: DIN A 4 <br><br>")
MainArray[MainVar++] = new Fix("1967<br>", "1967DonQuichote14.jpg", "mit 14...", "", "<br>...hatte ich oft Langeweile in der Lateinstunde... deshalb mal schnell mit F�llhalter eine Skizze von Don Quichote und seiner Rosinante hingekritzelt... <br><br>Gr��e: 8*10 cm!<br><br>", 21, 29.7)
MainArray[MainVar++] = new Fix("1967<br>", "1967PortraetTuscheBleistift14.jpg", "mit 14...", "", "<br>...Portr�t: Bleistift, danach teilweise mit Tusche �berzeichnet <br><br>Gr��e: fast A4<br><br>", 26.25, 21)
MainArray[MainVar++] = new Fix("1968<br>", "uebung1.jpg", "mit 15...", "", "<br>...lief der Stift schon schwungvoller �bers Papier... <br><br>Gr��e  13*10 cm<br><br>", 10, 13)
MainArray[MainVar++] = new Fix("1968<br>", "uebung2.jpg", "mit 15...", "", "<br>...lief der Stift schon schwungvoller �bers Papier... <br><br>Gr��e  13*10 cm<br><br>", 10, 13)
MainArray[MainVar++] = new Fix("1968<br>", "urlaub15.jpg", "mit 15...", "", "<br>Urlaub mit den Eltern, im Hintergrund der Wilde Kaiser <br><br>Gr��e: 17*13 cm<br><br>", 17, 13)
MainArray[MainVar++] = new Fix("1969<br>", "jaeger.jpg", "mit 16...", "", "<br>...in der Glanzzeit meiner Perry-Rhodan-Phase... Hier habe ich mir wirklich einen gegeben! Unglaublich, wie viele Details auf den Originalen zu sehen sind! <br><br>Gr��e: DIN A 4<br><br>")
MainArray[MainVar++] = new Fix("1969<br>", "kaulquappe.jpg", "mit 16...", "", "<br>...in der Glanzzeit meiner Perry-Rhodan-Phase... Beide abgezeichnet von den in einigen Heften beiliegenden Risszeichnungen. <br><br>Gr��e: 19*19 cm<br><br>")
MainArray[MainVar++] = new Fix("1971<br>", "uebung3.jpg", "mit 18...", "", "<br>Zum Warmwerden des Handgelenks einfach so einige Gesichter aus Asterix auf einen Abrei�block hingeschwungen... <br><br>Gr��e: DIN A 5<br><br>")
MainArray[MainVar++] = new Fix("1971<br>", "huendchen.jpg", "mit 18...", "", "<br>...meine wahrscheinlich beste Zeichnung, weil mit inniger Liebe entstanden! Geburtstagsgru� an meine Beate, die allerdings nicht das Original, sondern eine �berzeichnete Fotokopie bekommen hat - das Original war mir, trotz aller Liebe, zu wertvoll... <br><br>Gr��e: 23*18 cm<br><br>")
MainArray[MainVar++] = new Fix("1974<br>", "bizzaro.jpg", "mit 21...", "", "<br>...lag ich mit einem Nasenbeinbruch im Krankenhaus: Vor lauter Langeweile bat ich um Bleistift und Kopierpapier; dabei ist dieses Bild, sitzend im Bett, entstanden. Eigentlich wollte ich den wei�en Bereich auch noch f�llen, aber erstens hatte ich keine Ideen mehr, und zweitens wurde ich entlassen...<br><br>Gr��e DIN A4<br><br>")
MainArray[MainVar++] = new Fix("198?<br>", "bonsai.jpg", "mit �ber 30...", "", "<br>...nachdem ich schon lange keinen Stift mehr in die Hand genommen hatte, hat mich dieser Bonsai (Schefflera, �ber einen Basaltstein gezogen), so fasziniert, dass ich ihn einfach zeichnen musste... Dabei habe ich allerdings die Schale wesentlich kleiner gehalten, als sie wirklich war... <br><br>Gr��e: 8*15 cm<br><br>")

 

[Sempervivum]

Und das die geaenderte Funktion SuzyPicRemote in dem eigentlichen Skript:

// !!! Diese Funktion erweitert
function SuzyPicRemote(picName) { // Pops up the photo in a remote window.
    wImg = ActiveArray[current].wImg
    hImg = ActiveArray[current].hImg;
    wScreen = screen.width;
    hScreen = screen.height;
    var theimg = new Image();
    theimg.src = picName;
    var sqrt2 = Math.sqrt(2);
    var isPortrait = true;

    // Fenstergroesse festlegen abhaengig ob Hoch- oder Querfomat
    if (wImg < hImg) {  // Ist das Bild im Hochformat?
        hWin = 900;
        wWin = 600;
    } else {
        isPortrait = false;
        wWin = 900;
        hWin = 750;
    }

    // Passt das Fenster nicht in den Bildschirm, passen wir die Größe an
    var fH = fW = 1;
    if (wWin > wScreen) {
        var fW = wScreen / wWin;
    }
    if (hWin > hScreen) {
        var fH = hScreen / hWin;
    }
    if (fH < fW) {
        factor = fH;
    } else {
        factor = fW;
    }
    wWin *= factor;
    hWin *= factor;

    // Fenster mit den berechneten Werte oeffnen
    OpenWindow = window.open("", "remoteWin", "resizable=1, scrollbars=1, toolbar=0, left=230, top=90, width=" + wWin + ", height=" + hWin);
    OpenWindow.document.open();
    OpenWindow.document.write('<!doctype html><html><head><title>' + ActiveArray[current].TitVal + '</title></head>'
        + '<body style="background:url(parchment.jpg); width:100%; height: 100vh; margin: 0;">'
        + '</body></html>');
    OpenWindow.document.close();

    // window und body im neuen Fenster bereit stellen
    var docWin = OpenWindow.document;
    var bodyWin = docWin.querySelector('body');
    setTimeout(function () {
        // Groesse des body im neuen Fenster ermitteln
        var wBody = bodyWin.clientWidth, hBody = bodyWin.clientHeight;
        // Die Größe des Hintergrundes imgBg festlegen
        // und die Größe des Bildes so berechnen,
        // dass es relativ zum Hintergrund die Groesse
        // wie auf einem A4-Blatt einnimmt
        var wImgBg = wBody * 0.9;
        if (isPortrait) {
            hImgBg = wImgBg * sqrt2;
            var factorImgW = wImg / 21;
            var factorImgH = hImg / 29.7;
        } else {
            hImgBg = wImgBg / sqrt2;
            var factorImgW = wImg / 29.7;
            var factorImgH = hImg / 21;
        }
        var wImg2 = wImgBg * factorImgW;
        var hImg2 = hImgBg * factorImgH;
        console.log(wBody, hBody, wImgBg, hImgBg);

        // Das CSS mit den berechneten Werten definieren
        // und im Head des neuen Fensters eintragen
        var thecss = 'body:{margin:0;}'
            + 'figure {margin: 0;}'
            + 'figure div {margin: auto; width:' + wImgBg + 'px; height: ' + hImgBg + 'px; '
            + 'margin-top: ' + (wBody * 0.03) + 'px; border: 6px ridge darkgrey; '
            + 'display: flex; align-items: center; justify-content: center;}'
            + 'figure div img {width: ' + wImg2 + 'px; height: ' + hImg2 + 'px;}';
        var theStyle = docWin.createElement('style');
        theStyle.textContent = thecss;
        docWin.querySelector('head').appendChild(theStyle);

        // Auch das HTML für das Bild im Body eintragen
        var thehtml = '<figure><div id="bgimg" style="background-color: lightgrey"><img src="' + picName + '"></div>'
            + '</figure>'
            + '<a href="javascript:window.close();">close window</a>';
        bodyWin.innerHTML = thehtml;

        // Fehlt nur noch der Beschreibungstext
    }, 100);
}

Die Abmessungen in cm habe ich deshalb in der Konfiguration hinzu gefügt, weil ich nicht sicher war, ob alle Zeichnungen mit dem selben dpi-Wert gescannt wurden

 

[Webhufi]

Es ist ja irre nett, dass dich diese Aufgabe reizt! Dummerweise habe ich aber wohl die beiden .js irgendwie verhunzt bzw. deine Codes an die falschen Stelle eingefügt. Das Ergebnis sieht nämlich so aus.

Würdest du mir deshalb die beiden KOMPLETTEN Codes verraten?

Übrigens habe ich einen ersten Test mit einem Flipalbum gemacht, braucht aber noch enorme Verbesserungen beim Erstellen der Präs. Defintiiv gibt es aber keine Werbung, nicht mal in der Free. Schon seltsam, irgendwie...

Übrigens, erweitert: Bei Pflanzen ganz allgemein habe ich einen grünen Daumen; Orchideen verweigern sich aber meiner Pflege auf Dauer...

 

[Sempervivum]

Ich sehe es: Anstatt nur die Funktion auszutauschen hast Du das komplette JS mit dieser Funktion überschrieben. So muss es komplett aussehen:

//abgeaendert fuer Zeichnungen!

/**********************************************************
* Suzy's Javascript Photo Album, version 8.0, March 17, 2004
*
* Changed this version:  javascript is now in two seperate external
*                                      files, and put "spaces" in category names.
*
* This javascript may not be used on other sites without prior permission.
*
* You may contact me at photokity@hotmail.com for assistance.
* 
**********************************************************/

self.name = "main"; // If you are using frames, change "main" to the name of the frame that the photoalbum is in.

current = 0; // Sets the current picture being shown to the first one.

ActiveVar = 0; // Sets up the variable that counts the pictures.
var ActiveArray = new Array() // Sets up the active array.
for (loop = 0; loop < MainVar; loop++) {
    ActiveArray[ActiveVar++] = new Fix(
        MainArray[loop].DatVal,
        MainArray[loop].PicVal,
        MainArray[loop].TitVal,
        MainArray[loop].CatVal,
        MainArray[loop].TxtVal,
        MainArray[loop].wImg, // !!! hinzu gefuegt
        MainArray[loop].hImg  // !!! hinzu gefuegt
    );
}

function DisplayCategories() { // Lists out the categories.
    TotalCategories = SuzyCategory.length;
    for (loop = 0; loop < TotalCategories; loop++) {
        document.write("<option value=" + SuzyCategory[loop] + ">" + ReplaceChars(SuzyCategory[loop]) + "</option>");
    }
}

function FindPic() { // The search for a photo feature.
    TotalFound = 0;
    SearchString = document.SuzyForm.SearchWord.value;
    SearchString = SearchString.toLowerCase();
    WriteResults = window.open("", "resultwindow", "height=410, width=490, toolbar=0, status=0, menubar=0, resizable=1, scrollbars=1");
    WriteResults.document.open();
    WriteResults.document.write('<style type=text/css>body{background:url(parchment.jpg); font:8pt verdana}'
        + 'a{text-decoration:none}'
        + 'img{border:2px ridge #ffaaaa; height:50px; vertical-align:middle}'
        + '</style>'
        + 'You searched for:  <i>' + SearchString + '</i>'
        + '<br>Category:  <i>' + parent.document.SuzyForm.CategoryDropdown.options.value + '</i>'
        + '<p><b>Results:</b><br>');
    for (loop = 0; loop < ActiveVar; loop++) {
        Keyword = ActiveArray[loop].TxtVal;
        Keyword = Keyword.toLowerCase();
        URL = ActiveArray[loop].PicVal;
        title = ActiveArray[loop].TitVal;
        title = title.toLowerCase();
        SearchResult = Keyword.indexOf(SearchString);
        SearchResult2 = title.indexOf(SearchString);
        if (SearchResult != "-1" || SearchResult2 != "-1") {
            WriteResults.document.write('<p><a href=javascript:ShowSuzyPic(' + loop + '); target="main"><img src=' + ActiveArray[loop].PicVal + '></a>  ' + title);
            TotalFound++;
        }
    }
    WriteResults.document.write('<p><b>Returned ' + TotalFound + ' results.</b><p><a href="javascript:window.close();">close window</a>');
    WriteResults.document.close();
}

function LoadPiclist() { // Loads initial list of pictures on web page.
    for (loop = 0; loop < MainVar; loop++) {
        document.write("<option value=" + ActiveArray[loop].PicVal + ">" + ActiveArray[loop].TitVal + "</option>");
    }
}

function LoadNextPic() { // Loads next picture for faster operation.
    NextImage = new Image();
    NextPic = current + 1;
    if (NextPic >= ActiveVar) NextPic = 0;
    NextImage.src = ActiveArray[NextPic].PicVal;
}

function NextSuzyPic() { // Flips to the next photo.
    TotalImages = document.SuzyForm.SuzyDropdown.options.length;
    current++;
    if (current >= ActiveVar) current = 0;
    ShowSuzyPic(current);
}

LoadThis = 0;
function PreLoader() { // If checked, preloads all images into cache.  Five second interval between pics.
    if (SuzyForm.PreloadPics.checked && ++LoadThis < MainVar) {
        ShowingImage = new Image();
        ShowingImage.src = MainArray[LoadThis].PicVal;
        window.status = "Pre-Loading image... '" + MainArray[LoadThis].PicVal + "'";
        RunLoader();
    } else {
        window.status = " ";
    }
}

function PreviousSuzyPic() { // Flips to the previous photo.
    current--;
    if (current < 0) current = ActiveVar - 1;
    ShowSuzyPic(current);
}

function RandomSuzyPic() { // Shows a random photo.
    randompic = Math.floor(Math.random() * ActiveVar);
    ShowSuzyPic(randompic);
}

function ReplaceChars(entry) { // Replaces the _'s in cat names to make it pretty.
    out = "_"; // replace this
    add = " "; // with this
    temp = "" + entry; // temporary holder
    while (temp.indexOf(out) > -1) {
        pos = temp.indexOf(out);
        temp = "" + (temp.substring(0, pos) + add +
            temp.substring((pos + out.length), temp.length));
    }
    return temp;
    // document.subform.text.value = temp;
}

function RunLoader() { // Pre-loads all images every 5 seconds, if checkbox is selected.
    timerLoad = setTimeout("PreLoader()", 5000)
}

function RunSlideShow() { // Shuffles the photos in a slide show.
    timerSlideShow = setTimeout("NextSuzyPic();", document.SuzyForm.Timer.value * 1000)
}

function ShowSuzyCategory(picked) { // Shows the pictures in that category.
    ActiveArray.length = 0;
    PicList = "<SELECT size=13 style='width:200px; font:8pt verdana' name='SuzyDropdown' onChange='ShowSuzyPic(SuzyForm.SuzyDropdown.options.selectedIndex);'>";
    ActiveVar = 0;
    current = 0;
    for (loop = 0; loop < MainVar; loop++) {
        if (MainArray[loop].CatVal.toLowerCase() == picked.toLowerCase() || picked == "all") {
            ActiveArray[ActiveVar++] = new Fix(MainArray[loop].DatVal, MainArray[loop].PicVal, MainArray[loop].TitVal, MainArray[loop].CatVal, MainArray[loop].TxtVal)
            PicList = PicList + "<option value=" + MainArray[loop].PicVal + ">" + MainArray[loop].TitVal + "</option>";
        }
    }
    PicList = PicList + "</select>";
    document.getElementById("PicSpot").innerHTML = PicList;
}

function ShowSuzyPic(newpic) { // Shows the photo and text on the page.
    current = newpic;
    SelectionBox = document.SuzyForm.SuzyDropdown;
    SelectionBox.options[current].selected = true;
    document.getElementById("SuzySpot").innerHTML = '<a href=javascript:SuzyPicRemote("' + ActiveArray[current].PicVal + '");><img name="PicShowing" src=' + ActiveArray[current].PicVal + ' height=200 border=0></a>';
    document.getElementById("journal").outerHTML = '<div id=journal><br><b>' + ActiveArray[current].TitVal + '</b><p>' + ActiveArray[current].DatVal + '<p style="text-align:justify; text-indent:25px">' + ActiveArray[current].TxtVal + '</div>';
    if (document.SuzyForm.WhereView[1].checked) {
        timerID = setTimeout("SuzyPicRemote(ActiveArray[current].PicVal)", 1000)
    }
    if (document.SuzyForm.SelectedMode[0].checked) {
        timerSlideShow = setTimeout("NextSuzyPic();", document.SuzyForm.Timer.value * 1000)
        LoadNextPic();
    } else {
        LoadNextPic();
    }
}

// !!! Diese Funktion erweitert
function SuzyPicRemote(picName) { // Pops up the photo in a remote window.
    wImg = ActiveArray[current].wImg
    hImg = ActiveArray[current].hImg;
    wScreen = screen.width;
    hScreen = screen.height;
    var theimg = new Image();
    theimg.src = picName;
    var sqrt2 = Math.sqrt(2);
    var isPortrait = true;
    // Fenstergroesse festlegen abhaengig ob Hoch- oder Querfomat
    if (wImg < hImg) {  // Ist das Bild im Hochformat?
        hWin = 900;
        wWin = 600;
    } else {
        isPortrait = false;
        wWin = 900;
        hWin = 750;
    }

    // Passt das Fenster nicht in den Bildschirm, passen wir die Größe an
    var fH = fW = 1;
    if (wWin > wScreen) {
        var fW = wScreen / wWin;
    }
    if (hWin > hScreen) {
        var fH = hScreen / hWin;
    }
    if (fH < fW) {
        factor = fH;
    } else {
        factor = fW;
    }
    wWin *= factor;
    hWin *= factor;

    // Fenster mit den berechneten Werte oeffnen
    OpenWindow = window.open("", "remoteWin", "resizable=1, scrollbars=1, toolbar=0, left=230, top=90, width=" + wWin + ", height=" + hWin);
    OpenWindow.document.open();
    OpenWindow.document.write('<!doctype html><html><head><title>' + ActiveArray[current].TitVal + '</title>'
        + '<meta name="viewport" content="width=device-width, initial-scale=1.0></head>'
        + '<body style="background:url(parchment.jpg); width:100%; height: 100vh; margin: 0;">'
        + '</body></html>');
    OpenWindow.document.close();

    // window und body im neuen Fenster bereit stellen
    var docWin = OpenWindow.document;
    var bodyWin = docWin.querySelector('body');
    setTimeout(function () {
        // Groesse des body im neuen Fenster ermitteln
        var wBody = bodyWin.clientWidth, hBody = bodyWin.clientHeight;
        // Die Größe des Hintergrundes imgBg festlegen
        // und die Größe des Bildes so berechnen,
        // dass es relativ zum Hintergrund die Groesse
        // wie auf einem A4-Blatt einnimmt
        var wImgBg = wBody * 0.9;
        if (isPortrait) {
            hImgBg = wImgBg * sqrt2;
            var factorImgW = wImg / 21;
            var factorImgH = hImg / 29.7;
        } else {
            hImgBg = wImgBg / sqrt2;
            var factorImgW = wImg / 29.7;
            var factorImgH = hImg / 21;
        }
        var wImg2 = wImgBg * factorImgW;
        var hImg2 = hImgBg * factorImgH;
        console.log(wBody, hBody, wImgBg, hImgBg);

        // Das CSS mit den berechneten Werten definieren
        // und im Head des neuen Fensters eintragen
        var thecss = 'body:{margin:0;}'
            + 'figure {margin: 0;}'
            + 'figure div {margin: auto; width:' + wImgBg + 'px; height: ' + hImgBg + 'px; '
            + 'margin-top: ' + (wBody * 0.03) + 'px; border: 6px ridge darkgrey; '
            + 'display: flex; align-items: center; justify-content: center;}'
            + 'figure div img {width: ' + wImg2 + 'px; height: ' + hImg2 + 'px;}'
            + 'figcaption {padding-left: 2em; padding-right: 2em; text-align: center;}';
        var theStyle = docWin.createElement('style');
        theStyle.textContent = thecss;
        docWin.querySelector('head').appendChild(theStyle);

        // Auch das HTML für das Bild im Body eintragen
        var thehtml = '<figure><div id="bgimg" style="background-color: lightgrey"><img src="' + picName + '"></div>'
            + '<figcaption>' + ActiveArray[current].TxtVal + '</figcaption></figure>'
            + '<a href="javascript:window.close();">close window</a>';
        bodyWin.innerHTML = thehtml;

    }, 100);
}

 

[Webhufi]

Jou, das hätte ich selber merken müssen...

Aber jetzt wird das klasse! Auch der Rahmen ist super!

Ich habe die Bilder wieder aus der A4-Vorlage ausgeschnitten, das kommt besser und ist sinnvoller.

Jetzt habe ich nur noch das Problem, dass keine Umlaute mehr angezeigt werden wie früher. Und im neuen Fenster stört der Text, der ja eh schon in der Vorschau angezeigt wird; kannst du den weglassen?

Vorher kriege ich aber die Krise! Ich habe eben nichts anderes gemacht, als neue Bilder in die config einzufügen, und jetzt sehe ich überhaupt nichts mehr auf der Seite!

Ich denke, ich bin einfach zu blöd für so was... *schluchz

 

[Sempervivum]

In diesem Fall hilft schon die Console. Der Fehler liegt in dieser Zeile:
MainArray[MainVar++] = new Fix("1970<br>", "1970BugsBunny17.jpg", "mit 17...", abgezeichnet", "", "<br> <br><br>Gr��e: 14*21 cm<br><br>", 14, 21)Das Gänsefüßchen vor "abgezeichnet" fehlt. Da kommen noch mehr Fehler, aber ich denke, das sind nur Folgefehler.

Und im neuen Fenster stört der Text, der ja eh schon in der Vorschau angezeigt wird; kannst du den weglassen?

Kein Problem, Du brauchst nur diese Zeile im Javascript zu loeschen:

        var thehtml = '<figure><div id="bgimg" style="background-color: lightgrey"><img src="' + picName + '"></div>'
            + '<figcaption>' + ActiveArray[current].TxtVal + '</figcaption></figure>' // <-- diese eine Zeile loeschen
            + '<a href="javascript:window.close();">close window</a>';

 

[Sempervivum]

Was die Umlaute betrifft, wäre es am besten, die Dateien komplett auf UTF-8 umzustellen. D. h. im Kopf deiner HTML-Datei dieses:
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
auf dieses ändern:
<meta http-equiv="content-type" content="text/html;charset=utf-8">
Und dann alle Dateien im UTF8-Format speichern. Wie das geht, musst Du in deinem Editor heraus finden. I. allg. gibt es im Speichern-Dialog eine Einstellung dafür.

 

[Sempervivum]

BTW: Die Sache mit der Herkunft des Ausdrucks "bug" für Softwarefehler: Ich kann mich dunkel erinnern, dass da irgend welche Käfer oder so ein Teil Hardware zerknabbert hatten, wodurch es zu einem Ausfall kam. Der Begriff "bug" hat sich dadurch allgemein für Fehler in der Technik einschl. Software eingebürgert.