Question

我试图模仿这个jsfiddle：http://jsfiddle.net/kevin11189/uZCC6/1269/然而缩略图没有出现。

这是我的代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Gallery</title>
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <link rel="stylesheet" href="">

        <style>
        .hidden {
    display: none;
}
        </style>

<!-- Add jQuery library -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


        <script type="text/javascript" src="js/jquery.fancybox.js"></script>
        <link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />


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

         <script type="text/javascript" src="js/jquery.fancybox-buttons.js"></script>
        <link rel="stylesheet" href="css/jquery.fancybox-buttons.css" type="text/css" media="screen" />

        <script type="text/javascript" src="js/jquery.fancybox-media.js"></script>

        <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
        <script>
           $('.fancybox-thumbs').fancybox({
                prevEffect : 'fade',
                nextEffect : 'fade',

                closeBtn  : true,
                arrows    : true,
                nextClick : true,                

                helpers : {
                    thumbs : {
                        width  : 40,
                        height : 40

                    }
                }
            });</script>


    </head>

    <body>
<a class="fancybox-thumbs" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs hidden" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs hidden" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a>






    </body>
</html>

jsfiddle：http://jsfiddle.net/3bbkjdcc/

我添加了与工作jsfiddle相同的资源，但它没有工作。任何帮助？

Answer 1

您需要在外部资源选项中添加绝对URL路径，而不是相对路径。请参阅Firebug中的控制台错误。

示例：http://fancyapps.com/fancybox/source/jquery.fancybox.js而非jquery.fancybox.js

检查一下：JSFiddle，我分叉了你的JSfiddle并编辑了外部资源。

External Sources

Fancybox缩略图不起作用

1 个答案: