ALLES ÜBER gojs_jquery_fancybox UND WIE ES AUF WEBSITES EINGESETZT WIRD

Untersuchte Extension

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

Copyright (c) 2012 Janis Skarnelis - janis@fancyapps.com

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.

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

responsive - image 4

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

speed test - image 5

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


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

Ran an die Resultate – unser Newsletter für Sie!

Damit Sie gleich Wind davon bekommen, wenn wir in unserem Magazin zu neuen Erkenntnissen kommen.