Tutorials von Thomas Frei-Herrmann

FancyBox - Beispiel Version 2 mit hellem Hintergrund

Demo-Seite von FancyBox und hier geht zum Tutorial von Barbara:  www.nof-schule.de/forum/t-fancy-box-2-0-tutorial

Unten das Skript zur Konfiguration dieser FancyBox hier.

• fancybox-gallery = Name der Funktion dieses Skriptes für die Angabe der Class Eurer Bilder, wie diese heißt ist egal
• prevEffect und nextEffect = hier können die Attribute ‘fade’ oder ‘elastic’ anstelle von ‘none’ (keine) verwendet werden
• closeBtn = true zeigt den “Schließen” Button oben rechts an, false würde diesen nicht anzeigen
• title = bestimmt die Position der Beschriftung, hier ‘inside’ (innen)
• overlay = die Änderung der Hintergrundfarbe, hier blau markiert.
• buttons = bestimmt ob die Navigationsleiste über der Box angezeigt wird oder nicht. Wenn nicht gewünscht, lösche buttons: {}

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox-gallery").fancybox({
        prevEffect     : 'none',
        nextEffect     : 'none',
        closeBtn       : true,
        helpers        : {
                       title   : { type : 'inside' },
                       overlay : { css  : { 'background-color' : '#E4E4E4' } },
                       buttons : {}
        }       
    });
});
</script>

Weiterhin habe ich die Title-Tags auf Deutsch geändert, sucht in den Dateien z.B. nach title=

Änderung der Titel der Buttons in der Box > in der Datei:

fancyboxskripts\jquery.fancybox.pack.js

Änderung der Title der Button-Leiste > in der Datei:

fancyboxskripts\helpers\jquery.fancybox-buttons.js