jQuery Tutorial: Das Fancybox Plugin für die eigene Website

Die Fancybox basiert auf jQuery und ist eine gute alternative zur bekannten Lightbox. Die Fancybox ermöglicht durch eine simple Einbindung in die eigene Website, eine benutzerfreundliche Darstellung von Inhalten wie Bildern, Youtube Videos, Texten, Google Maps oder kompletten anderen Websites. Mit der Fancybox lassen sich Bilder, welche man auf der eigenen Website eingebunden hat, vergrößert darstellen. Zudem kann man mithilfe der Fancybox auch leicht komplette Galerien darstellen.

In diesem Tutorial zeige ich, wie man die jQuery Fancybox in eigene Webprojekte integrieren kann, wie die Parameter einzustellen sind und was sonst noch zu beachten ist.

 

jQuery Fancybox downloaden

Als erstes muss man die benötigten Daten der offiziellen Fancybox Website downloaden. Die Fancybox gibt es aktuell in der Version 1.3.4 und diese wird auch nicht mehr weiterentwickelt. Die Entwickler haben den Nachfolger veröffentlicht, die Fancybox 2 und entwickeln nur noch diese weiter. Die 2te Version der Fancybox ist nur nicht lizenfrei und muss käuflich erworben werden. Die erste Fancybox Version darf aber nach wie vor frei verwendet werden und genügt auch vollkommen.

Den Download-Link für die Fancybox findet man rechts in der Sidebar der Website.

 

jQuery Fancybox Dateien bereitstellen

Nach dem Download entpackt man als erstes das Zip-Archiv. Aus dem entpackten Ordner benötigt man das Verzeichnis welches „fancybox“ heißt. Dieses muss man dann zu seiner Website hochladen, meistens erfolgt das über FTP. Es reicht aus, wenn man den Ordner direkt ins Stammverzeichnis packt aber ich jQuery Plugins immer in ein eigenes Verzeichnis, welches ich zum Beispiel „inc“ = include nenne.

 

jQuery über die Google API einbinden

Damit die Fancybox funktioniert, muss vorher die jQuery Bibliothek eingebunden werden. Dies kann über den eigenen Website erfolgen aber ratsamer ist es, jQuery über die Google API zu laden. Dazu fügt man zuerst folgenden Code-Schnipsel ein:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

 

jQuery Fancybox Dateien laden und integrieren

Sind die Dateien auf dem Server hochgeladen worden, muss man diese jetzt in seine Website einbinden. Das erfolgt folgendermaßen:

 

Zuerst muss die CSS-Datei der Fancybox eingebunden werden

<link type="text/css" rel="stylesheet" href="/inc/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

 

Danach folgt die notwendige Javascript-Datei für die Fancybox

<script type="text/javascript" href="/inc/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

 

Weitere Features der Fancybox verwenden

Bei dem Download sind noch weitere Javascript-Dateien dabei die für zusätzliche Features in der Fancybox sorgen. Eine Funktion die mit eingebunden werden kann, ist die Mousewheel Funktion, welche dafür sorgt das man sich in einer Galerie mit dem Scrollrad durchschalten kann. Das andere zusätzliche Features ist jQuery.easing, das sorgt für zusätzliche Animationseffekte beim aufrufen und schließen der Fancybox.

 

jQuery Mousewheel mit für die Fancybox einbinden

Sollte man die Scrollrad Funktion benötigen, kann man die Mousewheel Javascript-Datei mit einbinden. Die zusätzliche Funktionalität agiert automatisch, sobald die Datei eingebunden ist. Die Einbindung der Mousewheel-Datei sieht dann so aus:

<script type="text/javascript" src="/inc/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

 

jQuery Easing für zusätzliche Effekte einbinden

Will man für die Fancybox den Swing-Effekt für das öffnen und schließen verwenden, muss man die jQuery Easing Bibliothek einbinden.

<script type="text/javascript" src="/inc/fancybox/jquery.easing-1.3.pack.js"></script>

 

jQuery Aufruf für die Fancybox

Nachdem alle benötigten Dateien für die Fancybox eingebunden sind, wird noch ein Aufruf benötigt, damit die Fancybox auch reagiert. Je nachdem für was man die Fancybox verwenden will, sollte man den Aufruf anpassen. Bei dem jQuery Aufruf, kann man auf gleich die Fancybox anhand von Parametern entsprechend so wie man sie braucht anpassen. Alle Paremeter-Einstellungen und die dazugehörigen Beschreibungen findet man auf der Fancybox Website.

Hier einige Beispiele wie ein Aufruf für die Fancybox aussehen kann.

 

Fancybox für ein Bild

Soll mit der Fancybox ein Bild angezeigt werden, sieht der jQuery Aufruf folgendermaßen aus:

<script type="text/javascript">
  $(document).ready(function(){
    $('a.image').fancybox();
  });
</script>

 

Fancybox für die Darstellung von Galerien

Mit der Fancybox lassen sich auch gut Galerien darstellen. Der Befehl muss so aussehen:

<script type="text/javascript">
  $(document).ready(function(){
    $('a[rel="gallery"]').fancybox();
  });
</script>

 

Ein Youtube Video mit der Fancybox anzeigen

Ein Youtube Video lässt sich auch mithilfe der Fancybox gut darstellen. Hier der Code:

<script type="text/javascript">
$(document).ready(function(){
  $("a.youtube").fancybox({
    'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
    'type' : 'swf',
    'swf' : {
      'wmode':'transparent',
      'allowfullscreen':'true'
    }
  });
});
</script>

 

Mit der Fancybox lassen sich auch weitere Inhalte darstellen, zum Beispiel Inline-Texte, Google Maps Karten oder andere Websiten über Iframes. Mit der Fancybox lassen sich auch Daten bequem per Ajax verarbeiten aber dazu später ein ausführlicher Artikel.

Die Fancybox ist ein nützliches jQuery Plugin um Bilder, Videos und andere Inhalte einer Website gut zu präsentieren. Die Fancybox ist ein Muss unter den jQuery Plugins, es ist einfach zu bedienen, gut anpassbar und eignet sich für verschiedene Anwendungsgebiete.

 

Weiterführende Links:

• Offizielle Fancybox Plugin Website