2012-06-22 100 views
0

如何解决fancybox中的这个问题?Fancybox不能正常工作

Uncaught TypeError: Object #<Object> has no method 'fancybox' localhost/:74 
(anonymous function) http://localhost/:74 
o.extend.ready.o.readyList jquery.min.js:19 
o.extend.each jquery.min.js:12 
o.extend.ready jquery.min.js:19 
o.each.o.fn.(anonymous function) 

这里是header.php中的代码,我不知道在哪里可以有问题!我尝试使用simplemodal,但不工作!也许是tablider的问题!我在fancybox网站上写下所有内容。

<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      $('.slide-out-div').tabSlideOut({ 
       tabHandle: '.handle', 
       pathToTabImage: 'img/handle-bg.png', 
       imageHeight: '186px', 
       imageWidth: '30px', 
       tabLocation: 'left', 
       speed: 300, 
       action: 'click', 
       topPos: '150px', 
       leftPos: '20px', 
       fixedPosition: false 
      }); 
    }); 
    </script> 
    <script type="text/javascript"> 
     $(function(){ 
      $('.add_site_right').tabSlideOut({ 
       tabHandle: '.handle_right', 
       pathToTabImage: 'img/handle-bg.png', 
       imageHeight: '186px', 
       imageWidth: '30px', 
       tabLocation: 'right', 
       speed: 300, 
       action: 'click', 
       topPos: '150px', 
       leftPos: '20px', 
       fixedPosition: false 
      }); 
    }); 
    </script> 
    <script type="text/javascript"> 
      $(document).ready(function() { 
       /* 
       * Examples - images 
       */ 

       $("a#example1").fancybox(); 

       $("a#example2").fancybox({ 
        'overlayShow' : false, 
        'transitionIn' : 'elastic', 
        'transitionOut' : 'elastic' 
       }); 

       $("a#example3").fancybox({ 
        'transitionIn' : 'none', 
        'transitionOut' : 'none'  
       }); 

       $("a#example4").fancybox({ 
        'opacity'  : true, 
        'overlayShow' : false, 
        'transitionIn' : 'elastic', 
        'transitionOut' : 'none' 
       }); 

       $("a#example5").fancybox(); 

       $("a#example6").fancybox({ 
        'titlePosition'  : 'outside', 
        'overlayColor'  : '#000', 
        'overlayOpacity' : 0.9 
       }); 

       $("a#example7").fancybox({ 
        'titlePosition' : 'inside' 
       }); 

       $("a#example8").fancybox({ 
        'titlePosition' : 'over' 
       }); 

       $("a[rel=example_group]").fancybox({ 
        'transitionIn'  : 'none', 
        'transitionOut'  : 'none', 
        'titlePosition'  : 'over', 
        'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) { 
         return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + '/' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>'; 
        } 
       }); 

       /* 
       * Examples - various 
       */ 

       $("#various1").fancybox({ 
        'titlePosition'  : 'inside', 
        'transitionIn'  : 'none', 
        'transitionOut'  : 'none' 
       }); 

       $("#various2").fancybox(); 

       $("#various3").fancybox({ 
        'width'    : '75%', 
        'height'   : '75%', 
        'autoScale'   : false, 
        'transitionIn'  : 'none', 
        'transitionOut'  : 'none', 
        'type'    : 'iframe' 
       }); 

       $("#various4").fancybox({ 
        'padding'   : 0, 
        'autoScale'   : false, 
        'transitionIn'  : 'none', 
        'transitionOut'  : 'none' 
       }); 
      }); 
     </script> 
+2

你能告诉我们一些代码吗? – antyrat

+0

你是否正确地包含了fancybox脚本? – antyrat

+0

我修改我的帖子!现在检查 – Allen

回答

3

您需要包括jQuery的后的fancybox脚本:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script> 
+0

我包括之后!但不工作! – Allen

+0

你确定fancybox脚本在'js'文件夹中,并且你正确地包含它吗? – antyrat

+0

是的我确定!所有JavaScript已加载 – Allen

3

您的网站adzire.com抛出JavaScript错误使得做一些脚本(包括的fancybox)失败的。您需要稍微掌握自己的代码:

首先,您只需要一个jQuery实例(理想情况下是最新版本),到目前为止您有3个(1.4,1.6.2和1.7.2)。我想你应该删除v1.4和1.6.2(一些插件包括一个副本jQuery,但并不意味着你需要它们全部。)还要确保在任何其他脚本或jQuery插件之前加载jQuery。

其次,与jQuery相同,您只需要任何一个jQuery插件的单个实例。您正在加载jQuery UI 1.8.21两次...删除一个。我猜是因为你一个不同版本的jQuery后装入他们每个人,它创建这些误差修改:

Timestamp: 22/06/2012 11:35:54 AM 
Error: $(".cont .wrapper .block select.styled").select_skin is not a function 
Source File: http://www.adzire.com/js/main.js 
Line: 6 

Timestamp: 22/06/2012 11:36:03 AM 
Error: detailsBox is not defined 
Source File: http://www.adzire.com/ 
Line: 115 

的收拾了一下可能会解决你的问题,包括的fancybox问题。