Ein altes Script zum Funktionieren bringen?


Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Webhufi

Mitglied
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

Erfahrenes Mitglied
Da gibt es jetzt etwas was noch schöner ist, eine Bilderschau wo man die Seiten fast naturgetreu umblättern kann. Schau mal hier:
Hat ein paar Euro gekostet aber das war es mir wert und inzwischen gibt es vielleicht auch etwas kostenloses.
Das einzige Problem sehe ich darin, dass Du ein CMS hast und man nicht weiß, ob man es mit den Möglichkeiten dort einbauen kann.

BTW: Du kannst ja richtig gut zeichnen, Klasse z. B. das mit Don Quichote!
 

Sempervivum

Erfahrenes Mitglied
PS: Ich habe einen Blick auf den Code geworfen und anscheinend ist der Fehler ziemlich simpel: Im HTML ist "journal" klein geschrieben, im Javascript aber groß: "Journal". Wenn Du das korrigierst, sollte es eigentlich in allen Browsern laufen.
 

Webhufi

Mitglied
Oha! Das Orchideenalbum ist schon prima, aber ich bestehe in diesem meinem Fall halt mal auf Nostalgie... ;)Aber auf einer anderen Seite würde ich das durchaus gerne verwenden, macht echt Spaß! Einbindung in mein CMS wäre kein Problem, denke ich.

Danke für das Lob! :) Der Don war aber nur eine wirklich sehr kurze Ablenkung im blöden Mathe-Unterricht, als ich mit 14 Jahren momentan keinen Bock mehr hatte... Ich habe lange gezweifelt, ob ich das zeigen soll. Aber für eine Einskommafünf-Minuten-Pause zwischen Quadratwurzeln schien mir diese Eingebung doch recht gut. ;-)

Deinen Hinweis habe ich natürlich probiert. Aber es sind dennoch Fehler drinne: Das Album lässt sich einfach nicht nicht korrekt durchblättern.

Falls das alles zu tricky ist, lass es einfach. Dann bleibt die Page halt so, mit diesen Fehlern. Ich kann zwar durchaus hartnäckig sein, sehe aber auch ein, wenn etwas gar nicht so will wie ich es mir vorstelle.
 

Sempervivum

Erfahrenes Mitglied
Ich habe noch Mal genauer hingesehen und festgestellt, dass diese ID nur im HTML-Inspektor klein geschrieben ist, im Quelltext jedoch groß. Irgend etwas, wahrscheinlich ein Script, dreht daran. Einfacher als es zu analysieren, ist es wahrscheinlich, es im Javascript auf Kleinschreibung zu ändern, ab Zeile 141:
Code:
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>';

  // hier "journal" klein schreiben:
  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();
  }
}
 

Sempervivum

Erfahrenes Mitglied
Das ist kein Hexenwerk, sondern genau genommen hat der Debugger den Fehler gefunden und mir gezeigt. Er unterstreicht die betr. Zeile rot und gekringelt.
 

Webhufi

Mitglied
Na also: Doch ein Werk von dir! Man muss damit umgehen können... Danke nochmals!

Übrigens: Weißt du (noch), woher die Worte "Bug" und "Debug" ursprünglich stammen? Das ist echt lustig...
 

Webhufi

Mitglied
Nachsatz

Deine Seite mit den herrlichen Orchideen hat mir so gut gefallen, dass ich etwas Ähnliches bastle. Hier ein Tipp für andere Anwender: Auf dieser Page gibt es tolle Anleitungen und einen Hinweis auf ein kostenloses Programm dazu.
 

Webhufi

Mitglied
Ein weiteres Problem:

Bei Klick auf das Vorschaubild in diesem Retro-Album öffnen sich die Bilder in unterschiedlichen Fenstergrößen.

Bei den ersten vier Bildern ging ich so vor, dass ich eine Vorlage in A4 erstellt und dann die Originale hineinkopiert habe, damit man die echten Größenverhältnisse sieht, nicht nur aus dem Text heraus die Größe ahnt. Danach sind noch die alten Bilder drin (wobei noch einige hinzukommen müssen...)

Ich finde nicht heraus, wie ich das Browserfenster so einstellen kann, dass immer komplett die Größe A4 angezeigt wird, allerdings etwas gestaucht, also vielleicht auf 600 px Höhe und/oder 800 px Breite.

Im Code habe ich etwas herumgespielt, siehe unten, aber es klappt nicht...

function SuzyPicRemote(picName) { // Pops up the photo in a remote window.
ShowingImage = new Image();
ShowingImage.src = picName;
wid = ShowingImage.width + 110; // Bildgröße festlegen
hei = ShowingImage.height + 180;
if (wid < 30 || hei < 30) {
wid=350;
hei=390;
}
if (screen.width < wid || screen.height < hei) {
wid = screen.width - 150;
hei = screen.height - 150;
}

Klar geht das nicht responsive. Es wäre aber nett, wenn man wenigsten den kompletten Bildbereich (automatisch) in das Browserfenster kriegen würde.

Einen Test habe ich hier hochgeladen:
 

Sempervivum

Erfahrenes Mitglied
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

Mitglied
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

Erfahrenes Mitglied
Weil ich die Aufgabe interessant finde, habe ich es Mal kodiert, so wie ich es mir vorstellte:
Hier das config-JS:
Code:
//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>")
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
Und das die geaenderte Funktion SuzyPicRemote in dem eigentlichen Skript:
Code:
// !!! 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

Mitglied
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... :cry:
 

Sempervivum

Erfahrenes Mitglied
Ich sehe es: Anstatt nur die Funktion auszutauschen hast Du das komplette JS mit dieser Funktion überschrieben. So muss es komplett aussehen:
Code:
//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);
}
 
Zuletzt bearbeitet:

Webhufi

Mitglied
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

Erfahrenes Mitglied
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:
Code:
        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

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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.
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Neue Beiträge