GreyBox Bilderlinks automatisch verändern

brain.flush();

Montag, 6. April 2009

Geschrieben von Flo in Web & Coding

Kommentare (4)
Trackbacks (0)

GreyBox Bilderlinks automatisch verändern

Für ColdDevil habe die ich Bilder immer mit einem 'alt'-Tag versehen, der eine Beschreibung für das Bild enthält. (

<a href="..."><img src="..." alt="Text" /></a>

)

Um die Bilder nun mit GreyBox anzuzeigen müssen die umgebenden Links mit einem 'rel'-Attribut versehen werden.
Möchte man aber nicht seinen Quelltext komplett auf GreyBox ausrichten, dann benötigt man eine flexible/dynamische Lösung!

Dafür habe ich mir gestern in JavaScript eine Funktion geschrieben, die alle verlinkten Bilder für GreyBox verändert.

Vielleicht kann ja jemand damit etwas anfangen!

Die Funktion kann entweder alle Links des Dokumentes oder nur jene innerhalb eines Abschnittes verändern. (Bezug auf ein ID-Attribut)

Hier der JavaScript-Code, den man in den direkt in den Head oder mit Hilfe einer externen Datei einbinden kann:

function modifyGreyboxLinks() {

    /* Für alle Bilder des Dokuments: imgs = document.images; */

    /* Alle Bilder innerhalb des #MainContent-DIV (Hier sind natürlich andere IDs oder Selektoren möglich!) */

    imgs = document.getElementById('MainContent').getElementsByTagName('img');

    /* Bilder durchlaufen */

    for (i = 0; i < imgs.length; i++) {

        current = imgs[i];

        parent  = imgs[i].parentNode;

    

        /* Nur Bilder betrachten, die verlinkt sind */

        if (parent.nodeName == 'A') {

            /* setze 'rel'-Attribut damit Links von Greybox erkannt werden */

            parent.setAttribute('rel', 'gb_imageset[x]');

            

            /* setze 'title' von A auf den Wert vom 'alt'-Attribut von IMG für Überschrift in Greybox */

            parent.setAttribute('title', current.getAttribute('alt'));

        }

    }

}

Das wichtige hierbei ist, dass man, nachdem die Links alle modifiziert wurden, nochmal die Parsermethode von GreyBox aufruft um alle Bilder zu finden:

<body onload="modifyGreyboxLinks(); decoGreyboxLinks();">

Trackbacks

Trackback-URL für diesen Eintrag

Keine Trackbacks

Kommentare

Ansicht der Kommentare: (Linear | Verschachtelt)

Du machst Sachen...

#1 Gavin (Homepage) am 07.04.2009 11:01 (Antwort)

Öhm... Ja...

#2 Phil am 07.04.2009 11:14 (Antwort)

Pragmatisch

#3 Flo (Homepage) am 07.04.2009 12:08 (Antwort)

Wieso nicht?

#3.1 Phil am 09.04.2009 00:58 (Antwort)

Kommentar schreiben

Name
E-Mail
Homepage
Antwort zu
Kommentar	Umschließende Sterne heben ein Wort hervor (wort), per _wort_ kann ein Wort unterstrichen werden. Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert. Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten Sie, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden. Hier die Zeichenfolge der Spamschutz-Grafik eintragen:
	Daten merken? Bei Aktualisierung dieser Kommentare benachrichtigen