Question

我遵循了这个jsfiddle中的代码，并在一个单独的html文件中写了所有内容什么是缺少的，因为它没有像jsfiddle中显示的那样工作？ http://jsfiddle.net/kevin11189/uZCC6/1270/

<!DOCTYPE html>
<html>
<head>
<style>
    .hidden {
        display: none;
    }
</style>
</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>
<script language="JavaScript">

    $('.fancybox-thumbs').fancybox({
        prevEffect : 'none',
        nextEffect : 'none',

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

        helpers : {
            thumbs : {
                width  : 50,
                height : 50
            }
        }
    });

</script>
</html>

**总新手在这里！

Answer 1

你的主要问题是对小提琴不熟悉，从我所看到的......

因为你会看到外部资源被加载将其添加到HTML文件的<head>中：

<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css">
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>

了解加载所有库后它是如何工作的 ;）

修改
嗯...
还要添加jQuery ...

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

我不知道为什么它在Fiddle外部没有表现出来......
但它需要。

第二次编辑
看起来它使用jQuery 2.2.4而不是jQuery 3.1.1 ...更好缩略图没有显示......

所以改为添加：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>

fancybox没有按预期工作

1 个答案: