• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fancybox einbinden

U

user_1234

Neues Mitglied
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:
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
 
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
 
Werbung:
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: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></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" />
     <link rel="stylesheet" href="style.css" />  
  <script type="text/javascript">
    
    $(document).ready(function(){
      $("#video").fancybox({
                'padding'            : 0,
                'autoScale'            : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none'
            });
      
      $("a.image").fancybox();
    });
      
      
  </script>
 </head>
<body>
  <a id="video" href="player.swf">Player</a> 
  <a class="image" href="1.png">Bild1</a>
</body>
</html>

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 ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben