Question

我正在尝试将精美的盒子添加到砌体布局中，但图像不会打开到精美的盒子样式中，它只是打开图像。

源代码：

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  <div class="grid-item">
    <a class="fancybox" href="images/lg_denali.png" width="800">
      <img src="images/denali_outfitters.jpg" width="">
    </a>
  </div>
</div>

我已按照http://fancyapps.com/中有关如何链接到我下载的精美文件夹文件的步骤，因此我不认为这是问题所在。加载页面时，我没有收到任何控制台错误。

的jQuery

$document.ready(function(){
$(".fancybox").fancybox({
    openEffect: 'elastic',
    closeEffect: 'elastic',
    maxWidth: 800,
    maxHeight: 'auto'
});
$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 200,
  });
});

不确定我在这里做错了什么。

以下是我如何链接文件的方法。也许它的订购方式不正确？

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="resource-type" content="document" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="classification" content="Internet" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="ALL" />
<link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" 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" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script src="js/custom.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script></head>

Answer 1

您只需加载一次jquery。你应该在jquery之后加载fancybox js文件。这将解决问题。

图像没有显示在Fancy Box中

1 个答案: