让花式盒子工作

我一定是在这里失明了，我一直在努力让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>

非常感谢！

在调用 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>

相关内容

最新更新

热门标签：