让Fancybox开始工作

我必须在这里失明，我一直在努力争取时间来让Fancybox触发！我已阅读并重新阅读相关文件，并复制，即使他们使用确切的代码，仍然拒绝的fancybox触发...让Fancybox开始工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN:UK"> 
<head> 
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> 
<meta name="description" content="" /> 
<meta name="keywords" content="" /> 
<meta name="robots" content="index,follow" /> 
<link type="text/css" rel="stylesheet" href="styles/style.css" /> 
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" /> 
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.6"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$(".various").fancybox({ 
maxWidth : 800, 
maxHeight : 600, 
fitToView : false, 
width  : '70%', 
height  : '70%', 
autoSize : false, 
closeClick : true, 
openEffect : 'none', 
closeEffect : 'none' 
}); 
}); 
</script> 
<title>Title</title> 
</head> 

<body> 

<div id="wrapper"> 
<div class="menu"> 
    <div id="box1_and_2"> 
     <a class="various" data-fancybox-type="iframe" href="http://fancyapps.com/fancybox/demo/iframe.html"> 
     <div id="box1" class="link"> 
      <img src="images/box1.jpg" alt="" class="fade" /> 
      <div class="info"> 
       <p>Title</p> 
       <img src="images/info.png" alt="" /> 
      </div> 
     </div>

非常感谢！

来源

2012-06-06 HedKandiMan

控制台中的错误？ – Jivings

页面上是否有另一个javascript错误？ – Rooster

你检查了你的JS日志，看看是否有任何错误？ – halfer

您在调用jquery之前调用fancybox js。在关闭正文标签之前添加任何其他脚本也是一种好的做法。我测试了这个，它工作。 :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN:UK"> 

    <head> 
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" 
    /> 
    <meta name="description" content="" /> 
    <meta name="keywords" content="" /> 
    <meta name="robots" content="index,follow" /> 
    <link type="text/css" rel="stylesheet" href="styles/style.css" /> 
    <link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.6" 
    type="text/css" media="screen" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
    <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.6"></script> 
    <title>Title</title> 
</head> 

<body> 
    <div id="wrapper"> 
     <div class="menu"> 
      <div id="box1_and_2"> 
       <a class="various" data-fancybox-type="iframe" href="http://fancyapps.com/fancybox/demo/iframe.html"> 
    <div id="box1" class="link"> 
     <img src="images/box1.jpg" alt="" class="fade" /> 
     <div class="info"> 
      <p>Title</p> 
      <img src="images/info.png" alt="" /> 
     </div> 
    </div> 
    <script type="text/javascript"> 
$(document).ready(function() { 
$(".various").fancybox({ 
maxWidth : 800, 
maxHeight : 600, 
fitToView : false, 
width  : '70%', 
height  : '70%', 
autoSize : false, 
closeClick : true, 
openEffect : 'none', 
closeEffect : 'none' 
}); 
}); 
</script> 
    </body> 
    </html>

来源

2012-06-06 15:56:46 Blainer

oooooooooooooh我是一个愚蠢的赫克托！知道这将是微不足道的。非常感谢您的帮助！ – HedKandiMan

让Fancybox开始工作

回答

相关问题