1. Lieber Benutzer,

    Du musst bei uns registriert sein, um an den Diskussionen teilzunehmen. Melde dich jetzt an - kostenfrei und unverbindlich. Und stelle Deine eigenen Fragen oder gib uns hilfreiche Antworten

Fancybox einbinden

Dieses Thema im Forum "JavaScript, AJAX und DHTML" wurde erstellt von user_1234, 17 Mai 2011.

  1. user_1234

    user_1234 Neues Mitglied

    Registriert seit:
    28 März 2011
    Beiträge:
    77
    Punkte für Erfolge:
    0
    Hallo alle Miteinander!

    Ich wollte gerne "Fancybox" in meine Webseite einbauen. (Fancybox - Fancy lightbox alternative)

    Im Root-Verzeichnis auf dem Server existiert die Datei "index.html".
    Außerdem ist dort der Ordner "images", der die Bilder enthält, sowie der Ordner fancybox mit den dazugehörigen Dateien.

    Verlinke ich nun wie in der Demo-Datei (Von der Webseite im runtergeladenen Archiv) und in der Anleitung auf der Webseite erklärt, öffnet sich das Bild (./images/001.png) nicht mit dem gewünschten Effekt, sondern ganz normal in einem neuen Fenster.

    JavaScript ist im Browser aktiviert.

    Könnte mit vllt. einer den Code geben, den ich zur Einbindung in meine Webseite brauche? Ich werd' daraus nämlich echt nicht schlau (Sitze schon den 2. Tag daran...)

    Viele Grüße
     
    Werbung: Jetzt registrieren, damit diese Werbung verschwindet
  2. Cheffchen

    Cheffchen Senior HTML'ler

    Registriert seit:
    21 Oktober 2008
    Beiträge:
    3.058
    Punkte für Erfolge:
    48
    Hallo,

    ohne link von dir ist schwer zu sagen wo es bei dir hengt.

    - hast wie unter punkt 2 und 3 die sachen im header deiner index eingebunden.
    - hast den Link wie in punkt 4 Images gemacht.

    wenn immer ja dann hast ein fehler gemacht, den meine Taro-Karten mir jetzt nicht sagen :O)

    Cheffchen
     
  3. 2ndReality

    2ndReality Neues Mitglied

    Registriert seit:
    13 September 2011
    Beiträge:
    1
    Punkte für Erfolge:
    0
    Hi!

    Ich klinke mich mal einfach in das Thema hier ein. Habe auch ein Problem mit der Fancybox.

    Ich möchte Adobe Flash Dateien mit der Fancybox öffnen, also *.swf Files. Das klappt mit der Beispiel-Datei wunderbar. Die *.swf öffnet sich in einem kleinen Fenster.

    Verlinke ich aber jetzt eine eigene *.swf von mir, öffnet sich die Datei in voller Browser Fenstergröße. Woran kann das liegen?

    Hab schon probiert die Bühne der *.fla Datei zu verkleinern und dann neu als *.swf zu speichern, aber trotzdem wird die Datei immer im Vollbildmodus geöffnet, im Gegensatz zur Beispiel-Datei von Adobe.

    Woran kann das liegen?

    Gruß, 2ndReality
     
  4. Gilles

    Gilles Blogger

    Registriert seit:
    20 Juli 2009
    Beiträge:
    1.644
    Punkte für Erfolge:
    38
    Bitte mal euren Aufruf Code zeigen und den/die dazugehörigen Links. Ich kann euch gerne mal zeigen, wie es bei mir funktioniert hat:
    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    5.   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    6. <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    7.     <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    8.     <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    9.      <link rel="stylesheet" href="style.css" />  
    10.   <script type="text/javascript">
    11.    
    12.     $(document).ready(function(){
    13.       $("#video").fancybox({
    14.                 'padding'            : 0,
    15.                 'autoScale'            : false,
    16.                 'transitionIn'        : 'none',
    17.                 'transitionOut'        : 'none'
    18.             });
    19.      
    20.       $("a.image").fancybox();
    21.     });
    22.      
    23.      
    24.   </script>
    25.  </head>
    26.   <a id="video" href="player.swf">Player</a>
    27.   <a class="image" href="1.png">Bild1</a>
    28. </body>
    29. </html>
    30.  
    Drei Sachen sind wichtig:
    1. Ihr müsst dem Script schon sagen welche Links als FancyBox angezeigt werden sollen
    2. Der Aufruf darf erst nach dem Laden des Dokumentes passieren (dafür ist der document ready Teil da)
    3. Eure Links müssen auch zu den Selektoren passen

    In meinem ersten FancyBox Aufruf sag ich, dass diese Einstellung nur für das Element mit der id video gilt.
    Im zweiten Aufruf sag ich: Wende FancyBox auf alle Links mit der Klasse image an.

    Sollte es nicht daran liegen, solltet ihr bitte einmal in die Fehlerkonsole schauen, ob sich dort etwas verbirgt (In Firefox befindet sich diese Konsole unter Extras->Fehlerkonsole)

    Für weitere Informationen steh ich gern zur Verfügung ;)
     

Diese Seite empfehlen