FancyBox

Tutorials von Thomas Frei-Herrmann

 

FancyBox Version 1.3.4 - bitte lest auch die Erklärungen dazu auf der FancyBox Seite. Dort findet Ihr auch den Download der Skripte.
 


... hier eine kleine Galerie, die aus 4 Fotos besteht. Man kann auch mit der Maus durch die Galerie scrollen oder die Pfeiltasten verwenden.

 

Für diese Seite habe ich folgendes in NOF 11 gemacht  (in NOF 12 kann man diesen DOCTYPE nun auch wählen):

Zunächst benötigen diese Skripte einen erweiterten DOCTYPE (Dokumenttyp), der bis NOF 11 so nicht zur Verfügung steht. Daher habe ich diesen in den “Code-Editor” von NOF eingetragen, den Ihr unten links bei <>Code in der “Seiten-Ansicht” aufrufen könnt.

Diesen DOCTYPE habe ich im “Custom1” Bereich eingebracht und den alten (unvollständigen Typ) dementsprechend auskommentiert.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Nach dem Download von FancyBox und Entpacken der ZIP-Datei, erhaltet Ihr einen Ordner “jquery.fancybox-1.3.4”, den ich hier in nur “fancybox” umbenannt habe und in das Verzeichnis der lokalen Publizierung auf meinem PC, sowie in das Stammverzeichnis auf meinen Server mittels FTP-Programm kopiert habe. In dem Skript wird oben auf diese Dateien (.js und .css) der FancyBox verlinkt.

Das Skript kopiert Ihr in die Layout-HTML Eurer Seite (hier, als Beispiel, mit den Funktionen meiner Seite).


Und hier noch ein Beispiel mit einem ganz einfachen Code (als FancyBox in FancyBox).


> auf Layout klicken > Button “HTML” > “Zwischen Head Tags” Code einfügen (Ihr benötigt nur die Funktionen, die Ihr verwenden wollt).

Achtet auf die ID des einzelnen Fotos (Eichkater, Forum) und/oder den Gruppennamen, hier [Garten] der Galerie oder auch zu Wiki.


Die beiden Punkte (../)  vor den Ordnern bedeuten “gehe einen Ordner höher” (aus dem Verzeichnis “html” in das Stammverzeichnis), da ich diesen Code auf einer Unterseite, die sich in meinem Ordner “html” befindet, eingebaut habe. Solltet Ihr das auf der Startseite (Home) einbauen, dann muss diese relative Pfadangabe nur einen Punkt (./) haben, da diese Seite sich bereits im Stammverzeichnis befindet.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
   !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="../fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="../fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="../fancybox/jquery.fancybox-1.3.4.css" media="screen" />

<script type="text/javascript">

   $(document).ready(function() {

      /* Funktion einzelnes Foto nach ID */
      $("a#Eichkater").fancybox({
         'transitionIn': 'elastic',
         'transitionOut': 'elastic'
      });

      /* Funktion Galerie nach Relation-Attribut */
      $("a[rel=Garten]").fancybox({
         'transitionIn': 'elastic',
         'transitionOut': 'elastic',
         'titlePosition' : 'over',
         'titleFormat': function(title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">Foto ' + (currentIndex + 1) + ' von ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') +
            '</span>';
         }
      });

      /* Funktion Link zu Wikipedia im Iframe nach ID */
      $("a#wiki").fancybox({
         'width': '75%',
         'height': '75%',
         'autoScale': false,
         'transitionIn': 'elastic',
         'transitionOut': 'elastic',
         'centerOnScroll': 'true',
         'type': 'iframe',
         'titlePosition': 'inside',
         'opacity': true,
         'overlayColor'  : '#000000'
      });

      /* Funktion Link zum Forum im Iframe nach ID */
      $("#forum").fancybox({
         'width': '100%',
         'height': '80%',
         'autoScale': false,
         'transitionIn': 'elastic',
         'transitionOut': 'elastic',
         'centerOnScroll': 'true',
         'type': 'iframe'
      });

   });

</script>

nach oben


Der Code (unten) für die Galerie gehört in den Code-Editor der HTML eines Textfeldes (siehe Foto unten). Wir Ihr sehen könnt, habe ich mir hier für die großen Fotos einen Ordner

/data/images/

und für die Thumbnails einen Ordner

/data/thumbnails/

angelegt, um ein wenig “Ordnung” auf meinem Server zu halten. Diese Ordner mit den Fotos und Thumbs müsst Ihr natürlich “händisch”, mit Eurem FTP-Programm, in das Verzeichnis Eurer lokalen Publizierung auf dem PC und in das Stammverzeichnis auf Eurem Server kopieren.

Bitte achtet auch hier auf die korrekte relative Pfadangabe zu den Ordnern (die Punkte).

<a rel="Garten" href="../data/images/Eichhrnchen.jpg" title="Eichhörnchen"><img alt="" src="../data/thumbnails/Eichhrnchen.png" /></a>
<a rel="Garten" href="../data/images/Hibiskusrot.jpg" title="Hibiskus"><img alt="" src="../data/thumbnails/Hibiskusrot.png" /></a>
<a rel="Garten" href="../data/images/Peonie.jpg" title="Peonie"><img alt="" src="../data/thumbnails/Peonie.png" /></a>
<a rel="Garten" href="../data/images/Sonnenhut.jpg" title="Sonnenhut"><img alt="" src="../data/thumbnails/Sonnenhut.png" /></a>

nach oben


... und hier noch ein einzelnes Foto, das auf seine ID (hier Eichkater) erkannt wird. Oder Ihr verlinkt es so, wie unten beim Forum-Bild.

Eichhörnchen 

... unten der Code nach ID, der auch wieder in die HTML eines Textfeldes kommt (siehe Foto unten):

<a id="Eichkater" href="../data/images/Eichhrnchen.jpg" title="Eichhörnchen"><img alt="Eichhörnchen" src="../data/thumbnails/Eichhrnchen.png" /></a>

nach oben

 

... und unten noch als Bild-Link zu einer FancyBox im Iframe.
Diese Iframes folgen dem Scroll der Seite.

NOF-Forum

Bei dem Bild zum Forum muss man das mit NOF etwas anders machen. Wenn man mittels NOF einen Link in einem Bild setzt, dann könnte man die für die FancyBox notwendige ID nicht mehr in das <a> Tag einbringen. Daher habe ich das so gemacht:

Bild-Link zum Forum:

Bild markiert > im Fenster “Bild-Eigenschaften” > auf den Button “HTML” klicken

“vor dem Tag” (NOF 11 “vorher”) fügt Ihr den gesamten Link ein:

<a id="forum" href="http://www.nof-schule.de/forum/" title="Hier geht's zum NOF-Forum">

... und “nach dem Tag” (NOF 11 “nachher”) das abschließende </a> Tag.

</a>

Text-Link zu Wikipedia:

hier gilt das gleiche, denn die für die FancyBox notwendige ID, muss mit in das <a> Tag. Daher habe ich hier den gesamten Link in die HTML eines Textfeldes kopiert.

> Doppelklickt, an der Stelle wo der Link hin soll, in Euer Textfeld (Cursor blinkt) > im Fenster “Text-Eigenschaften”
> oben auf mittleren Button “Textfeld” klicken > Button “HTML” und dann den Code in den Objekt-Editor einfügen.

<a id="wiki" href="http://de.wikipedia.org/" title="Wikipedia">zu Wikipedia</a>

Für die möglichen Optionen der Erscheinung der FancyBox guckt bitte auch hier.

nach oben

diese Seite weiter empfehlen



Counter Statistik