Fancy Box in NOF einbauen

bitte guckt auch hier für die Version 1.3.4 (November 2010), für die Ihr andere Skripte downloaden müsst.

Zunächst bitte auf den Link (unten) klicken um die Skripte von meinem Server downzuloaden. Nach dem entpacken (extrahieren) dieser ZIP Datei erhaltet Ihr einen Ordner:

fancybox

Hier könnt Ihr Euch meine modifizierten Skripte downloaden. Downloads seit dem 12.08.2008: 1265

Hier die "Original-Seite" dazu, nach der ich gearbeitet habe. Natürlich könnt Ihr Euch die Skripte auch dort runter laden.

http://fancybox.net/, dann müsst Ihr jedoch für meine Erklärungen hier gucken.


Unten mal einige Beispiele für den Fancy Box Effekt, wobei mir bei dieser Variante von Lightbox auffällt, dass die großen Fotos im IE etwas verzerrt dargestellt werden können. Bitte klickt auf ein Foto.

(von links nach rechts und oben nach unten)

1. Foto = Fancy Box schließen am X (id=“Bild1”)
2. Foto = Fancy Box schließen am X oder auf Foto klicken (id=“Bild2”)
3. Foto = Fancy Box mit abgedunkeltem Hintergrund (id=“Bild3”)
4. Foto = Fancy Box schließen am X (id=“wiki”) ist externer Link
5. Foto = Fancy Box schließen am X (id=“player”) ist interner Link
6. Foto = Fancy Box schließen am X (id=“wetter”) ist interner Link

Jetzt macht Ihr folgendes:

Kopiert bitte diesen Ordner (fancybox), den Ihr gerade heruntergeladen habt, in den Ordner Eurer

Lokalen Publizierung, um das auch lokal sehen zu können, dieser entspricht der “Root” auf Eurem Server.

und ebenfalls auf Euren Server in die Root (Stammverzeichnis), dort wo sich auch Eure INDEX.HTML befindet.

Nun müsst Ihr folgenden Codes in Eure “HTML” schreiben, die auf der Original-Seite sind falsch, da diese sich auf falsche Skipt-Namen beziehen (Stand: 08/2008):

Klickt in den “Layout-Bereich” (oder auch in den “Master-Rahmen-Bereich”) und dann im Fenster

“Layout-Eigenschaften” auf den Button “HTML”. Dort fügt Ihr den 1. Code (unten) ein und zwar

“zwischen den Head Tags”

(bei NOF 11 heißt das jetzt “headInner”, dies ist der 2. Button von links oben).

Achtet bitte auf “../” (relative Pfadangabe zur Root).

Wenn Ihr das in der Startseite (Home) einbauen wollt,
müsstet Ihr eben “../” weglassen.

Code in “headInner” einfügen.

<script type="text/javascript" src="../fancybox/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="../fancybox/jquery.fancybox-1.0.0.js"></script>
<script type="text/javascript" src="../fancybox/jquery.pngFix.pack.js"></script>
<link rel="stylesheet" href="../fancybox/fancy.css" type="text/css" media="screen">


<SCRIPT type=text/javascript>
$(document).ready(function() {
   $("p#Bild1 a").fancybox();
  
   $("p#Bild2 a").fancybox({
           'hideOnContentClick': true
           });
          
   $("p#Bild3 a").fancybox({
           'zoomSpeedIn':0,
           'zoomSpeedOut':0,
           'overlayShow':true
           });
    });
       
</SCRIPT>

... so sieht das dann aus.

Wollt Ihr auch auf externe Seiten, wie hier “Wikipedia” oder auf interne Seiten, wie hier “Player” oder “Wetter” mittels “Fancy Box” verlinken, müsstet Ihr das Skript dafür noch etwas modifizieren.

Bei mir (hier auf dieser Seite) habe ich das so gemacht.

Modifiziertes Skript:
Ich habe mal die Funktionen “wiki”, “player”, “wetter” im Skript, zum besseren Verständnis, //kommentiert.

<script type="text/javascript">
   $(document).ready(function() {
   $("p#Bild1 a").fancybox();
  
   //Start: Funktion “wiki” von mir
      $("p#wiki a").fancybox();
     
      $("a#wiki").fancybox({
           'zoomSpeedIn':0,
           'zoomSpeedOut':0
       });
    //Ende: Funktion “wiki” von mir
   
    //Start: Funktion “player” von mir
       $("p#player a").fancybox();
      
       $("a#player").fancybox({
           'zoomSpeedIn':0,
           'zoomSpeedOut':0
       });
    //Ende: Funktion “player” von mir
   
    //Start: Funktion “wetter” von mir
       $("p#wetter a").fancybox();
      
       $("a#wetter").fancybox({
           'zoomSpeedIn':0,
           'zoomSpeedOut':0
       });
    //Ende: Funktion “wetter” von mir
   
    $("p#Bild2 a").fancybox({
        'hideOnContentClick': true
    });
   
    $("p#Bild3 a").fancybox({
        'zoomSpeedIn':0,
        'zoomSpeedOut':0,
        'overlayShow':true
        });
    });
</script>

Nun müsst Ihr die großen Fotos dieser Bilder auf Eurer Seite, die Ihr vorher natürlich entsprechend erstellt haben müsst, verlinken. Hierzu bei “Linktyp” mittels
Dropdown-Menü “Datei-Link” wählen und alle großen Fotos, die benötigt werden, suchen und mittels Button “Speichern” einlesen.

... und eben auch die “externen” bzw. “internen” Links mit den Bildern (2. Reihe Beispiel) verlinken (dazu natürlich bei “Linktyp” entsprechend auf “extern” oder “intern”wechseln).

Jetzt müsst Ihr noch, wie unten im Bild zu erkennen,
“Vor dem Link” und “Nach dem Link”

folgende Codes in die Objekt-HTML eingeben
(unten in diesem Fenster auf den Button “HTML” klicken).

... diese Codes müsst Ihr eben für jedes Bild einzeln anpassen, d.h. für die
externen Links (oder auch internen), wie z.B. “Wikipedia” steht dann eben dort, wo jetzt “Bild1” steht, die ID wie oben im Skript angegeben, bei mir wäre das für “Wikipedia” dann eben so:

diese Codes heißen soviel, wie:

innerhalb von "p" mit der id="Bild[Nummer]" oder z.B. id=“wiki” werden alle "a" mit der “FancyBox” ausgerüstet.

Dabei werden die verschiedenen Formatierungen durch die “id” angesprochen. In meinem Beispiel gibt es zu jedem der oben gezeigten 6 Fotos jeweils eine “id”, nämlich:

1. id=“Bild1”
2. id=“Bild2”
3. id=“Bild3”
4. id=“wiki”
5. id=“player”
6. id=“wetter”

was diese id’s bewirken, habe ich ganz oben beschrieben.

Nun könnt Ihr (wenn Ihr das wollt) noch den “Gruppennamen” eintragen, der dann in Fancy Box bei jedem Foto erscheint (hier: “Unsere Katze Alina”) und zwar “In dem Link” (siehe Bild oben, hier “Unsere Katze Alina”) trag Ihr folgenden Code ein:

title=“Unsere Katze Alina”

Die gleiche Prozedur macht Ihr nun mit den anderen kleinen Fotos auch.

Fertig.


Im Prinzip funktionieren alle Lightbox-Varianten sehr ähnlich. Hier mal ein Beispiel einer
Box mit dem Lytebox-Skripten vom Panda.

Oder auch mal hier gucken:

Flash-Fotogalerie oder der Variante “Fancy Zoom”.



Viel Erfolg!

zurück