Oberhalb des </head> Elementes fügt man folgendes ein:

<link rel="stylesheet" href="css/brainbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/brainbox-1.3.js"></script>

Eventuell muss noch der Pfad zu den einzelnen Dateien angepasst werden. Ich gehe hier in der Grundeinstellung davon aus, dass sich alle Bilder/Grafiken im Ordner "images" direkt im Hauptverzeichnis der Webseite befinden. Sollte dies nicht so sein, muss der Dateipfad zu den Grafiken im CSS wie auch im JavaScript angepasst werden. Wie das geht, siehe unten.

Kleiner Tipp: Um die Webseite performanter (schnellere Ladezeit) zu machen, fügt man nur das JavaScript in den Seitenfußbereich oberhalb des </body> Elements ein. Siehe Quelltext dieser Seite.

Linkgestaltung

Die Links müssen nun folgendermaßen gestaltet werden:

<a href="images/großesbild.jpg" rel="lightbox[example]" title="Beispiel">

<img src="images/vorschaubild.jpg" width="100" height="40" alt="Beispiel" /></a>

Großes Bild und Vorschaubild stehen für Eure Bildnamen, sollen nur verdeutlichen, wo welche Bildgröße hin muss. Dort wo example steht, kann der Name Eurer Bildgalerie rein, wenn mehrere Bilder zu einer Galerie zusammengefasst werden.

Download

Alle benötigten Dateien sind komprimiert und auf optimale Performance abgestimmt.

Download Brainbox  »

Bitte beachten:

Die Brainbox steht unter der Creative Commons Lizenz 3.0 - (Some rights reserved)

Brainbox in Verbindung mit jQuery Anwendungen nutzen

Damit die Brainbox in Verbindung mit Anwendungen laufen, welche das beliebte jQuery JavaScript Framework nutzen, ist es wichtig folgende 2 Dinge zu beachten:

jQuery plus jQuery nutzendes Anwendungsscript vor den Brainboxscripts einbinden.

<link rel="stylesheet" href="css/brainbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/accordion.js"></script>

<script type="text/javascript" src="js/brainbox-1.3.js"></script>

Im Anwendungsscript, welches jQuery nutzt, bitte folgendes ändern:

Rechtsklick auf die .JS Datei und bearbeiten wählen. Dann dieses Zeichen $ gegen jQuery austauschen. Bitte korrekte Schreibweise beachten, sonst wirds nicht funktionieren.

Originalcode:

$(document).ready(function(){

$(".accordion h5:first").addClass("active");

$(".accordion p:not(:first)").hide();

$(".accordion h5").click(function(){

                $(this).next("p").slideToggle("slow")

                .siblings("p:visible").slideUp("slow");

                $(this).toggleClass("active");

                $(this).siblings("h5").removeClass("active");
        });
});

Modifizierter Code für Nutzung in Verbindung mit Brainbox:

     jQuery(document).ready(function(){

        jQuery(".accordion h5:first").addClass("active");

        jQuery(".accordion p:not(:first)").hide();

        jQuery(".accordion h5").click(function(){

                jQuery(this).next("p").slideToggle("slow")

                .siblings("p:visible").slideUp("slow");

                jQuery(this).toggleClass("active");

                jQuery(this).siblings("h5").removeClass("active");
        });
});

Update: Brainbox aus einen über oder untergeordneten Ordner aufrufen

Standardmäßig ist die Brainbox dafür ausgelegt, dass alle für die Box benötigten Grafiken in einem Ordner "images" direkt im Hauptverzeichnis der Webseite liegen. Tun sie das nicht mehr, muss man einige kleine Anpassungen vornehmen.

Hier reicht es nicht nur, die Pfade der Grafiken im brainbox.css anzupassen, sondern es muss auch das brainbox-1.3.js angepasst werden, da die beiden Grafiken closelabel.png und loading.gif aus dem JavaScript heraus referenziert werden. Das geht folgendermaßen:

Rechtsklick auf das brainbox.js und "Bearbeiten" oder "Öffnen mit → Editor" auswählen und anschließend die beiden markierten Pfade zum Grafikordner anpassen.