0

私はここで盲目になっているに違いありません、私は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>

どうもありがとう！

4

1 に答える 1

2

jqueryが呼び出される前にfancyboxjsを呼び出しています。また、body終了タグの前にスクリプトを追加することもお勧めします。私はこれをテストしました、そしてそれは働きます。:)

<!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-06T15:56:46.200 に答える