Getting Fancybox to work

问题

I must be going blind here, I've been trying for ages to get Fancybox to trigger! I've read and re-read the documentation and have even copied the exact code they have used, and yet Fancybox refuses to trigger...

<!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>

Many thanks!

回答1:

You are calling the fancybox js before jquery is called. It is also good practice to add any additional scripts before the closing body tag. I tested this and it works. :)

<!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>

来源：https://stackoverflow.com/questions/10917696/getting-fancybox-to-work

标签

jquery

fancybox