Ein altes Script zum Funktionieren bringen?

Webhufi

Erfahrenes 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
 
Lösung
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...
PS: Wie Du auf dem ersten Screenshot siehst, verbirgt der Samsung-Browser die Optionen des Select und zeigt sie erst, wenn man drauf tippt. Möglicher Weise müsste wir da auch noch etwas tun, damit sie immer sichtbar sind.
 
Es scheint so, als würde dir das Projekt Spaß machen... Freut mich ganz arg!

In der Hochkantversion geht dann allerdings das Flair des Albums verloren.
Ich denke, dass es einem User zuzutrauen ist, dass er sein Gerät quer stellt, das sollte allgemein üblich sein. Deine Überlegungen sind denoch klasse.

Eine Lightbox? Das sieht richtig gut aus auf dem Screenshot! Wichtig für das Handling ist halt, dass die Page auf allen Endgeräten gut erkennbar ist.

Sicher: Es ist keine wichtige Seite, aber mein Herz hängt daran.

Mach bitte erstmal eine Wochenendpause und schick mir dann deine Vorschläge in Form der geänderten .js Dateien.

Einen Dank an dich habe ich übrigens schon in meinem Text der Seite untergebracht!
 
Hier ist jetzt der Code. Das HTML habe ich mal unverändert gelassen und nur das hinzu gefügt, was für die Lightbox nötig ist. Ich würde aber empfehlen, es ein wenig auf den neuesten Stand zu bringen, d. h. das Tabellenlayout durch Flexlayout zu ersetzen und auch das CSS aufzulagern. Das Layout, was für den Besucher sichtbar ist, kann dabei unverändert bleiben. Das Javascript mit der Konfiguration sollte unverändert bleiben können.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>meine Zeichnungen</title>


    <link rel="stylesheet" type="text/css">
    <style>
        /* Lightbox */
        #lightbox {
            /* display: none; */
            position: absolute;
            border: 6px ridge darkgrey;
            background-image: url(parchment.jpg);
            display: flex;
            align-items: center;
            justify-content: center;
            transform: scale(0);
            transition: 0.5s;
        }

        #lightbox-ovl {
            display: block;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.7);
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transform: scale(0);
            transition: 0.5s;
        }
    </style>

    <script language="JavaScript" src="photoalbum-config-4.js"></script>
    <script language="JavaScript" src="photoalbum-code-tablayout-lightbox.js"></script>
</head>


<body style="">

    <center>
        <br>

        <form name="SuzyForm">
            <table border="0">

                <tbody>

                    <tr>

                        <td>
                            <table style="margin: 0px; padding: 0px;" border="0" cellspacing="0">

                                <tbody>

                                    <tr align="center">

                                        <td style="border-top: 2px groove rgb(136, 136, 136); border-left: 4px groove rgb(136, 136, 136); border-bottom: 4px groove rgb(136, 136, 136); margin: 0px; padding: 10px; background: transparent url(parchment.jpg) repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 275px;"
                                            bgcolor="#f9f9f9">
                                            <div id="SuzySpot">
                                                <script language="javascript">
                                                    document.write('<a href=javascript:SuzyPicRemote("' + ActiveArray[current].PicVal + '");><img name="PicShowing" src=' + ActiveArray[current].PicVal + ' height=200 border=0></a>');
                                                </script>
                                            </div>

                                        </td>

                                        <td style="border-top: 2px groove rgb(136, 136, 136); border-bottom: 4px groove rgb(136, 136, 136); background: transparent url(parchmentring.jpg) repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 36px;"
                                            border="0">&nbsp;</td>

                                        <td style="border-top: 2px groove rgb(136, 136, 136); border-right: 4px groove rgb(136, 136, 136); border-bottom: 4px groove rgb(136, 136, 136); padding: 5px 20px 5px 5px; background: transparent url(parchment.jpg) repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 225px; font-family: verdana; font-style: normal; font-variant: normal; font-weight: normal; font-size: 8pt; line-height: normal; font-size-adjust: none; font-stretch: normal; color: rgb(0, 0, 68); margin-left: 0px;"
                                            valign="top">
                                            <div id="journal">
                                                <script language="javascript">
                                                    document.write('<br>' + ActiveArray[current].TitVal + '</b><p>' + ActiveArray[current].DatVal + '<p style="text-align:center; text-indent:25px">' + ActiveArray[current].TxtVal);
                                                </script>
                                            </div>

                                        </td>

                                    </tr>

                                </tbody>
                            </table>

                            <p> </p>

                            <center>
                                <table style="border: 2px ridge rgb(255, 255, 255);">

                                    <tbody>

                                        <tr align="center">

                                            <td rowspan="4">
                                                <div id="PicSpot">
                                                    <select size="13"
                                                        style="width: 200px; font-family: verdana; font-style: normal; font-variant: normal; font-weight: normal; font-size: 8pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"
                                                        name="SuzyDropdown"
                                                        onchange="ShowSuzyPic(SuzyForm.SuzyDropdown.options.selectedIndex);">
                                                        <script language="javascript">LoadPiclist();</script>
                                                    </select>

                                                </div>

                                            </td>

                                            <td style="border-bottom: 2px solid rgb(204, 204, 204);"> <input value="<<"
                                                    onclick="PreviousSuzyPic();"
                                                    style="font-family: verdana,helvetica,arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 8pt; line-height: normal; font-size-adjust: none; font-stretch: normal; text-align: center;"
                                                    type="button">&nbsp; <input value=">>" onclick="NextSuzyPic();"
                                                    style="font-family: verdana,helvetica,arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 8pt; line-height: normal; font-size-adjust: none; font-stretch: normal; text-align: center;"
                                                    type="button"><br>

                                                voriges &nbsp; - &nbsp; n&auml;chstes<br>

                                            </td>

                                        </tr>

                                        <tr>

                                            <td style="border-bottom: 1px solid rgb(204, 204, 204);"><input
                                                    name="SelectedMode" value="chkSlideshow" onclick="NextSuzyPic();"
                                                    type="radio">- Diashow!
                                                &nbsp; &nbsp; <input name="SelectedMode" value="chkAlbum"
                                                    onclick="ShowSuzyPic(current);" checked="checked" type="radio">-
                                                Fotoalbum! <br>

                                                <center>Anzeigedauer: <input name="Timer" size="3" value="5"
                                                        type="text"> Sekunden</center>

                                            </td>

                                        </tr>

                                        <tr>

                                            <td>
                                                <p> </p>

                                            </td>

                                        </tr>

                                    </tbody>
                                </table>

                            </center>

                        </td>

                    </tr>

                </tbody>
            </table>

        </form>

    </center>

    <!-- Fuer Lightbox -->
    <div id="lightbox-ovl"></div>
    <div id="lightbox">
        <img>
    </div>

</body>

</html>
Javascript:
//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();
    }
}

// Fuer Lightbox
document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('#lightbox-ovl').addEventListener('click', function () {
        this.style.transform = 'scale(0)';
        document.getElementById('lightbox').style.transform = 'scale(0)';
    });
});

// Auf Lightbox umgestellt
function SuzyPicRemote(picName) { // Pops up the photo in a lightbox
    wImg = ActiveArray[current].wImg
    hImg = ActiveArray[current].hImg;
    wViewport = window.innerWidth;
    hViewport = window.innerHeight;
    var sqrt2 = Math.sqrt(2);
    var isPortrait = true;
    // Fenstergroesse festlegen abhaengig ob Hoch- oder Querfomat
    if (wImg < hImg) {  // Ist das Bild im Hochformat?
        var hLightbox = 900;
        var wLightbox = 900 / sqrt2;
    } else {
        isPortrait = false;
        var wLightbox = 900;
        var hLightbox = 900 / sqrt2;
    }

    // Passt das Fenster nicht in den Bildschirm, passen wir die Groesse an
    var fH = fW = 1;
    if (wLightbox > wViewport) {
        var fW = wViewport / wLightbox;
    }
    if (hLightbox > hViewport) {
        var fH = hViewport / hLightbox;
    }
    if (fH < fW) {
        factor = fH;
    } else {
        factor = fW;
    }
    wLightbox *= factor * 0.9;
    hLightbox *= factor * 0.9;

    var lightbox = document.getElementById('lightbox');
    var img = document.querySelector('#lightbox img');
    lightbox.style.width = wLightbox + 'px';
    lightbox.style.height = hLightbox + 'px';
    lightbox.style.top = (hViewport - hLightbox - 12) / 2 + 'px';
    lightbox.style.left = (wViewport - wLightbox - 12) / 2 + 'px';
    img.src = picName;
    if (isPortrait) {
        var factorImgW = wImg / 21;
        var factorImgH = hImg / 29.7;
    } else {
        var factorImgW = wImg / 29.7;
        var factorImgH = hImg / 21;
    }
    var wImg2 = wLightbox * factorImgW;
    var hImg2 = hLightbox * factorImgH;
    img.style.width = wImg2 + 'px';
    img.style.height = hImg2 + 'px';
    lightbox.style.transform = 'scale(1)';
    document.getElementById('lightbox-ovl').style.transform = 'scale(1)';
}
 
Zuletzt bearbeitet:
photoalbum-code-tablayout-lightbox.js
Oh, daran hatte ich jetzt nicht gedacht. Das ist das alte Javascript mit meiner Erweiterung für Lightbox. Das kannst Du umändern in photoalbum-code.js, so wie es bisher war und in diese Datei das Javascript, das ich gepostet habe, 1-zu-1 hinein, dann sollte es funktionieren.
 
Ja, ich hatte schon gesehen, dass du die zwei Zeilen verändert hast:

<script language="JavaScript" src="photoalbum-config-4.js"></script>
<script language="JavaScript" src="photoalbum-code-tablayout-lightbox.js"></script>

Ich hatte sie wieder umbenannt, nachdem ich deine Codes übernommen habe, aber trotzdem tut sich nichts...
 
Im HTML fehlt die Definition der Lightbox vor dem schließenden </body>:
HTML:
    <!-- Fuer Lightbox -->
    <div id="lightbox-ovl"></div>
    <div id="lightbox">
        <img>
    </div>

</body>
</html>
 
Flexlayout: Das wird mir alles zu kompliziert... Ebenfalls ist es nicht möglich, diese Seite in meinem responsiven CMS zu gestalten, das wird ebenfalls zu kompliziert. Also muss es eine externe Page bleiben, per iFrame eingebunden.
 
Zurück