TYPO3 Plugin:

gojs_jquery_fancybox

fancyBox

fancyBox ist ein Werkzeug, das eine schöne und elegante Möglichkeit bietet, Bilder, HTML-Inhalte und Multimedia-Inhalte auf Ihren Webseiten zu vergrößern.

Weitere Informationen und Beispiele: http://www.fancyapps.com/fancybox/

Lizenz: http://www.fancyapps.com/fancybox/#license

Wie man es benutzt

Um loszulegen, laden Sie das Plugin herunter, entpacken Sie es und kopieren Sie Dateien in Ihr Website-/Anwendungsverzeichnis. Laden Sie Dateien in den Abschnitt Ihres HTML-Dokuments. Stellen Sie sicher, dass Sie auch die jQuery-Bibliothek hinzufügen.

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <link rel="stylesheet"  type="text/css" media="screen" />
    <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
</head>

Erstellen Sie Ihre Links mit einem Titel, wenn Sie möchten, dass ein Titel angezeigt wird, und fügen Sie eine Klasse hinzu:

<a  class="fancybox" title="Sample title"><img src="small_image.jpg" /></a>

Wenn Sie eine Reihe von verwandten Elementen haben, die Sie gruppieren möchten, zusätzlich einen Gruppennamen in das Attribut rel (oder data-fancybox-group) aufnehmen:

<a  class="fancybox" rel="gallery" title="Sample title 1"><img src="small_1.jpg" /></a>
<a  class="fancybox" rel="gallery" title="Sample title 1"><img src="small_2.jpg" /></a>

Initialisieren Sie das Skript wie folgt:

<script>
    $(document).ready(function() {) {
        $('.fancybox').fancybox();
    });
</script>

Kann auch an ein optionales Optionsobjekt übergeben werden, das die Standardwerte erweitert. Beispiel:

<script>
    $(document).ready(function() {) {
        $('.fancybox').fancybox({ {
            polsterung: 0,
            openEffect : 'elastisch'
        });
    });
</script>

Tipp: Gruppieren und wenden Sie fancyBox automatisch auf alle Bilder an:

$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();

Das Skript verwendet das href-Attribut der übereinstimmenden Elemente, um die Position des Inhalts zu ermitteln und den Inhaltstyp herauszufinden, den Sie anzeigen möchten. Sie können den Typ direkt angeben, indem Sie den Klassennamen (fancybox.image, fancybox.iframe, etc.) oder das Attribut data-fancybox-type hinzufügen:

/ //Ajax:
<a  class="fancybox fancybox.ajax">Example</a>
//or
<a  class="fancybox" data-fancybox-type="ajax">Example</a>

/ //Iframe:
<a  class="fancybox fancybox.iframe">Beispiel</a>

//Inline (zeigt ein Element mit `id="example"`) an
<a href="#example" class="fancybox">Example</a>

//SWF:
<a  class="fancybox">Beispiel</a>

/ //Bild:
<a  class="fancybox">Beispiel</a>

Beachten Sie, dass Ajax-Anfragen der gleichen Ursprungsrichtlinie unterliegen. Wenn fancyBox nicht in der Lage ist, den Inhaltstyp zu erhalten, wird es versuchen, basierend auf 'href' zu erraten und wird stillschweigend beendet, wenn es nicht gelingt. (dies unterscheidet sich von den bisherigen Versionen, bei denen 'ajax' als Standardtyp verwendet wurde oder eine Fehlermeldung angezeigt wurde).

Fortgeschritten

Helfer

Helfer bieten einen einfachen Mechanismus, um die Möglichkeiten von fancyBox zu erweitern. Es gibt zwei eingebaute Helfer - 'Overlay' und 'Titel'. Du kannst sie deaktivieren, benutzerdefinierte Optionen festlegen oder andere Helfer aktivieren. Beispiele:

/ //Disable title helper
$(".fancybox").fancybox({ {
    helfer:  {
        titel:  null
    }
});

/ //Deaktivieren des Overlay-Helfers
$(".fancybox").fancybox({ {
    helfer:  {
        Überlagerung: null
    }
});

//Titelposition und Überlagerungsfarbe ändern
$(".fancybox").fancybox({ {
    helfer:  {
        title : {
            typ: 'inside' (innen)
        },
        overlay: { {
            css : {
                Hintergrund": rgba(255,255,255,255,0.5)''
            }
        }
    }
});

//Miniaturansichtshilfe aktivieren und benutzerdefinierte Optionen festlegen
$(".fancybox").fancybox({ {
    helfer:  {
        daumen: { {
            breite: 50,
            höhe: 50
        }
    }
});

API

Ebenfalls verfügbar sind ereignisgesteuerte Callback-Methoden. Dieses Schlüsselwort bezieht sich auf das aktuelle oder kommende Objekt (abhängig von der Callback-Methode). Hier erfahren Sie, wie Sie den Titel ändern können:

$(".fancybox").fancybox({ {
    beforeLoad : function() {) {
        this.title = 'Image' + (this.index + 1) + ' von ' + this.group.length + (this.title ? ' - ' - ' + this.title : '');

        /*
            "this.element" bezieht sich auf das aktuelle Element, so dass Sie z.B. das Attribut "alt" des Bildes verwenden können, um den Titel zu speichern:
            this.title = $(this.element).find('img').attr('alt');
        */
    }
});

Es ist möglich, fancyBox programmgesteuert auf verschiedene Arten zu öffnen:

//HTML-Inhalt:
$.fancybox( '<div><h1>Lorem Lipsum</h1><p>Lorem lipsum</p></div>', {
    titel: 'Benutzerdefinierter Titel'
});

//DOM-Element:
$.fancybox( $("#inline"), {
    titel: 'Benutzerdefinierter Titel'
});

//Custom Objekt:
$.fancybox({ {
    href:'example.jpg',
    titel: 'Benutzerdefinierter Titel'
});

//Array von Objekten:
$.fancybox([[
    {
        href:'example1.jpg',
        titel: 'Benutzerdefinierter Titel 1'
    },
    {
        href:'example2.jpg',
        titel: 'Benutzerdefinierter Titel 2'
    }
], {
    polsterung: 0
});

Es gibt mehrere Methoden, mit denen Sie beispielsweise mit fancyBox interagieren und diese manipulieren können:

/ //Schließen Sie die ausgefallene Box:
$.fancybox.close();

Es gibt eine einfache Möglichkeit, auf Wrapping-Elemente mit JS zuzugreifen:

$.fancybox.wrap
$.fancybox.skin
$.fancybox.outer
$.fancybox.inner

Sie können CSS überschreiben, um das Aussehen anzupassen. Machen Sie z.B. Navigationspfeile immer sichtbar, die Breite ändern und außerhalb des Bereichs verschieben (verwenden Sie diesen Ausschnitt nach der Einbindung von fancybox.css):

.fancybox-nav span {
    sichtbarkeit: sichtbar;
}

.fancybox-nav {
    breite: 80px;
}

.fancybox-prev {
    links: -80px;
}

.fancybox-next {
    rechts: -80px;
}

In diesem Fall solltest du vielleicht den Platz um die Box herum vergrößern:

$(".fancybox").fancybox({ {
    marge: [20, 60, 20, 60]
});

Bug Tracker

Sie haben einen bug? Bitte erstellen Sie eine Ausgabe über GitHub unter https://github.com/fancyapps/fancyBox/issues

Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.

Helpline: +49 40 609 40 79 40

Verteilung:GOJS_JQUERY_FANCYBOX ist auf

0.01 % aller TYPO3 installiert.

0.02 % aller TYPO3 7.6.x Installationen installiert
0.04 % aller TYPO3 6.2.x Installationen installiert

Aktualität:GOJS_JQUERY_FANCYBOX ist auf dem neusten Stand (v.unknown) bei

100 % aller TYPO3 Installationen

0 % aller TYPO3 9.5.x Installationen
0 % aller TYPO3 9.3.x Installationen
0 % aller TYPO3 9.2.x Installationen
0 % aller TYPO3 8.7.x Installationen
0.02 % aller TYPO3 7.6.x Installationen
0 % aller TYPO3 7.5.x Installationen
0 % aller TYPO3 7.4.x Installationen
0 % aller TYPO3 7.3.x Installationen
0 % aller TYPO3 7.2.x Installationen
0 % aller TYPO3 7.1.x Installationen
0 % aller TYPO3 7.0.x Installationen
0.04 % aller TYPO3 6.2.x Installationen
0 % aller TYPO3 6.1.x Installationen
0 % aller TYPO3 6.0.x Installationen
0 % aller TYPO3 5.0.x Installationen
0 % aller TYPO3 4.7.x Installationen
0 % aller TYPO3 4.6.x Installationen
0 % aller TYPO3 4.5.x Installationen
0 % aller TYPO3 4.4.x Installationen
0 % aller TYPO3 4.3.x Installationen
0 % aller TYPO3 4.2.x Installationen
0 % aller TYPO3 4.1.x Installationen
0 % aller TYPO3 4.0.x Installationen
0 % aller TYPO3 3.5.x Installationen

PHP Version:GOJS_JQUERY_FANCYBOX wird benutzt mit

33.33 % PHP/5.6
66.67 % PHP/5.5

Gosign-Responsive Index: TYPO3 Installationen nutzen GOJS_JQUERY_FANCYBOX zu

75 % wenn der Gosign-Responsive-Index zwischen 80 % und 100 % ist
25 % wenn der Gosign-Responsive-Index zwischen 60 % und 80 % ist
0 % wenn der Gosign-Responsive-Index zwischen 40 % und 60 % ist
0 % wenn der Gosign-Responsive-Index zwischen 20 % und 40 % ist
0 % wenn der Gosign-Responsive-Index zwischen 0 % und 20 % ist

Pagespeed: TYPO3 Installationen nutzen GOJS_JQUERY_FANCYBOX zu

0 % wenn der Pagespeed zwischen 80 % und 100 % ist
0 % wenn der Pagespeed zwischen 60 % und 80 % ist
0 % wenn der Pagespeed zwischen 40 % und 60 % ist
100 % wenn der Pagespeed zwischen 20 % und 40 % ist
75 % wenn der Pagespeed zwischen 0 % und 20 % ist

[DependciesAndConflicts]

Stichprobe n=36984 von Gosign gecrawlte TYPO3-Seiten mit den Top-Level-Domains <.de/.ch/.at>