1

Fancybox 2 出现问题。我可以单击 Fancybox 打开的照片，但我可以单击图像到不同的图像上，它会打开。X 按钮不起作用，导航按钮也不会出现。我只能用 esc 键关闭 Fancybox。提前感谢您的帮助。

网站 http://elainestyles.com/#/imagination

我的代码..

    <!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Elaine Styles</title>

    <meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com." />
    <meta name="author" content="Bartek Szopka" />

    <link href='http://fonts.googleapis.com/css?family=Duru+Sans' rel='stylesheet' type='text/css'>

    <link href="css/impress-demo.css" rel="stylesheet" />

    <link rel="shortcut icon" href="favicon.png" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
    <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />
    <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
    <script src="js/vendor/modernizr-2.5.3.min.js"></script>
</head>

<body class="impress-not-supported">

<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

<div id="impress">

    <div id="imagination" class="step" data-x="-1400" data-y="4700" data-rotate-x="80" data-scale="7">
        <div class="port">
            <div id="content" class="container pill clearfix">
                <a class="fancybox" rel="group3" href="img/elaineport/ASE.png">
                    <div class="box img3">
                    </div>
                </a>

                <a class="fancybox" rel="group4" href="img/elaineport/BusCard.jpg">
                    <div class="box img4">
                    </div>
                </a>

                <a class="fancybox" rel="group5" href="img/elaineport/DVhBanner1.jpg">
                    <div class="box img5">
                    </div>
                </a>

                <a class="fancybox" rel="group6" href="img/elaineport/KidsDashboardBanner.jpg">
                    <div class="box img6">
                    </div>
                </a>

                <a class="fancybox" rel="group7" href="img/elaineport/MVpvite.jpg">
                    <div class="box img7">
                    </div>
                </a>

                <a class="fancybox" rel="group8" href="img/elaineport/quilibleIphone.jpg">
                    <div class="box img8">
                    </div>
                </a>

                <a class="fancybox" rel="group8" href="img/elaineport/quilibleSmall.png">
                    <div class="box img9">
                    </div>
                </a>

                <a class="fancybox" rel="group9" href="img/elaineport/Sampleflyer1.jpg">
                    <div class="box img10">
                    </div>
                </a>

                <a class="fancybox" rel="group9" href="img/elaineport/sampleflyer2.jpg">
                    <div class="box img11">
                    </div>
                </a>

                <a class="fancybox" rel="group10" href="img/elaineport/weddingMenu.jpg">
                    <div class="box img12">
                    </div>
                </a>
            </div>
        </div>
    </div>
<div class="hint">
    <p>Use a spacebar or arrow keys to navigate</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) { 
    document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
</script>


<script src="js/impress.js"></script>
<script>impress().init();</script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>

<script src="js/vendor/jquery.masonry.min.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.3"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

</body>
</html>

JS文件

$(document).ready(function() {

  $('#content').masonry({
   columnWidth: 220,
   itemSelector: '.box',
   isFitWidth: true,
   isResizable: false,
  }).imagesLoaded(function() {
   $('#content').masonry('reload');
   isAnimated: !Modernizr.csstransitions
  });

  $(".fancybox").fancybox();

});
4

0 回答 0