Tiny Editor - Bild einfügen mit Lightbox

[xmurrix]

Hallo Farina,

der Code, so wie es ist, wird wohl im IE nicht funktionieren.

Was anderes!
Ist das eine CONTENIDO-Installation oder ist das ein Fork?
Falls es nicht CONTENIDO ist, dann stelle die Frage bitte im Forum des CMS, danke!

Gruß
xmurrix

[farina]

Gute Morgen,
du hast natürlich Recht xmurrix. Ich fand das Script so super und dann so schade, dass es nicht überall klappt.
Es gehört eigentlich gar nicht hier hin.
Gruß farina

[Spider IT]

Hallo Farina,

du hast recht, im IE ging es nicht.
Nach intensiver Suche habe ich herausgefunden, dass es daran liegt, dass der IE beim Interpretieren des Quelltextes alle Tags in Großschreibung umwandelt, und deshalb die Tags nicht finden konnte.
Außerdem habe ich noch ein Positionierungsproblem des IE gefixt, welches damit zu tun hat, dass beim Laden des großen Bildes die Abmessungen dessen noch nicht bekannt sind.
Der neue Code für den HEAD-Bereich:

Code: Alles auswählen

<script type="text/javascript">
//<![CDATA[
    var img;
    function showImagePopup(source) {
        if (source.length) {
            // Bild vorladen wil IE die Position sonst nicht korrekt berechnet
            img = new Image(); img.src = source;
            // Hintergrund schon mal abdunkeln
            document.getElementById('DarkBackground').style.display = 'block';
            // Bild verzoegert einblenden wegen Ladevorgang und Ermittlung der Abmessungen
            checkImage(source);
        }
    }
    function checkImage(source) {
        if (img.width > 0) {
            document.getElementById('ImageArea').innerHTML = '<'+'img src="' + source + '" alt="" />';
            document.getElementById('ImageWindow').style.display = 'block';
        } else {
            setTimeout('checkImage("' + source + '")', 10);
        }
    }
    function closeImagePopup() {
        document.getElementById('ImageWindow').style.display = 'none';
        document.getElementById('DarkBackground').style.display = 'none';
        document.getElementById('ImageArea').innerHTML = '';
    }
    function AutoLinkPopupImages() {
        var cnt, p1, p2, p3, p4, link;
        
        cnt = document.body.innerHTML;
        p1 = cnt.indexOf('<'+'img ');
        if (p1 == -1) {
            // IE interpretiert Tagnamen in GROSSschreibung
            p1 = cnt.indexOf('<'+'IMG ');
        }
        while (p1 > -1) {
            p2 = (cnt.indexOf('>', p1) + 1);
            p3 = (cnt.indexOf('src="', p1) + 5);
            p4 = cnt.indexOf('"', p3);
            link = cnt.substring(p3, p4);
            if (link.indexOf('/klein/') > -1) {
                cnt = cnt.substring(0, p1) + '<'+'a href="javascript:showImagePopup(\'' + link.replace(/\/klein\//g, '/gross/') + '\');">' + cnt.substring(p1, p2) + '<'+'/a>' + cnt.substring(p2);
                p2 += (45 + link.length);
            }
            p1 = cnt.indexOf('<'+'img ', p2);
            if (p1 == -1) {
                // IE interpretiert Tagnamen in GROSSschreibung
                p1 = cnt.indexOf('<'+'IMG ', p2);
            }
        }
        document.body.innerHTML = cnt;
    }
//]]>
</script>

Der neue Code für den BODY-Anfang (Transparenz für den IE eingestellt):

Code: Alles auswählen

    <div id="DarkBackground" onclick="closeImagePopup();" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 200; display: none; background-color: #000; opacity: 0.6; filter: alpha(opacity: 60);"></div>
    <div id="ImageWindow" onclick="closeImagePopup();" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 210; display: none; font-family: Arial, Verdana, sans-serif;">
        <table border="0" cellspacing="0" cellpadding="0" style="width: 100%; height: 100%;">
            <tr valign="middle">
                <td align="center" style="background-color: transparent;">
                    <div onclick="closeImagePopup();" style="display: inline-block; border: 8px solid #FFF; border-bottom-width: 3px;">
                        <div onclick="closeImagePopup();" style="background-color: #fff;">
                            <div onclick="closeImagePopup();" id="ImageArea"></div>
                            <div onclick="closeImagePopup();" style="padding-top: 6px; text-align: right;">
                                <img src="images/PopupSchliessen.png" alt="Schlie&szlig;en" onclick="closeImagePopup();" style="cursor: pointer;" />
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>

Der Code für NACH dem BODY-Endtag (hinter </body>):

Code: Alles auswählen

<script type="text/javascript">
//<![CDATA[
    AutoLinkPopupImages();
//]]>
</script>

Beispiel: hier

Gruß
René

[xmurrix]

Ihr seid im falschen Forum, das hier ist für CONTENIDO nicht für andere CMS.