使用fancybox升级greybox无法正常工作

时间:2014-04-21 11:02:46

标签: jquery fancybox greybox

我正在使用工作正常的灰盒子。但我尝试升级到fancybox但它重定向到链接。任何人请帮忙

这是我的代码:

  <script src="//code.jquery.com/jquery-1.8.0.min.js"></script>
 <script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.1.1"></script>
 <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.1" media="screen" />
     <script type="text/javascript">
        var GB_ROOT_DIR = "greybox/";
    </script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

  <script>
   $(document).ready(function(){
      $("body").on("click",".fancybox",function() {
      link=($(this).attr('href'));
            $.fancybox({
            'width'                : '1000',
            'href'                 : link,
            'height'            : '750',
            'autoScale'         : false,
            'transitionIn'        : 'none',
            'transitionOut'        : 'none',
            'type'                : 'iframe'
            }); 
       event.preventDefault();
           });
 });
</script>  
</head>
<body>
<a class="fancybox" href="detail.php">Detail</a>
</body>
</html>

我还有什么需要补充的吗?

1 个答案:

答案 0 :(得分:1)

可能是灰盒与fancybox冲突。删除greybox脚本并尝试。它会起作用

<script src="//code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.1.1"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.1" media="screen" />

<!--
<script type="text/javascript">
   var GB_ROOT_DIR = "greybox/";
</script>

<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
-->