Question

在下面的代码中，我显示的是包含图像的图库。当我点击图像时，我想在弹出窗口中显示相同的图像，我还想显示下一个和上一个图像。知道我的错误是什么吗？

但它显示为一个新窗口。

任何人都可以帮助我吗？

HTML

  <!-- Add jQuery library -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="js/jquery.mousewheel.pack.js?v=3.1.3"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<div id="Gallery">
   <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7501/15812584301_1d63602c58_b.jpg" title="elgol sunset (matty brooks)">
    <img src="http://farm8.staticflickr.com/7501/15812584301_1d63602c58_m.jpg" alt="" width="150" height="113" />
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_b.jpg" title="Frondaisons (Valentin le luron)">
    <img src="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_m.jpg" alt="" width="150" height="113"/>
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_b.jpg" title="The cold morning (Raimondas Ka.)">
    <img src="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_m.jpg" alt="" width="150" height="113"/>
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_b.jpg" title="Silhouettes (una cierta mirada)">
    <img src="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_m.jpg" alt="" width="150" height="113"/>
</a>
     </div>
     </div>
  <script type="text/jscript">
 $(document).ready(function() {
    $(".fancybox-thumb").fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {
                type: 'outside'
            },
            thumbs  : {
                width   : 50,
                height  : 50
            }
        }
    });
});
  </script>

Answer 1

从网址

下载这些文件

<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>-->


<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<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>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

附加网址http://fancyapps.com/ 例如http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5

然后将所有这些文件包含在项目文件夹中。它会起作用:)）

弹出窗口图像无法使用jquery在html中工作

1 个答案: