花式盒子代码问题

FancyBox code issue

本文关键字：问题代码盒子更新时间：2023-09-26

我从这里下载了fancyBox：

http://fancyapps.com/fancybox/#license

这是我在我的"测试"网页中的代码：

<!DOCTYPE html>
<html lang="en">
    <head>  
        <title>fancyBox</title>
        <meta charset="utf-8">
        <!-- Add jQuery library -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="source/jquery.fancybox.pack.js"></script>
        <script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
        <!-- Add fancyBox main JS and CSS files -->
        <script type="text/javascript" src="source/jquery.fancybox.js"></script>
        <link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css" media="screen" />
        <!-- Add Button helper (this is optional) -->
        <link rel="stylesheet" href="source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
        <script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js"></script>
        <link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css" />
        <script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js"></script>
        <!-- Add Media helper (this is optional) -->
        <script type="text/javascript">
        $(document).ready(function() {
            /*
                *  Simple image gallery. Uses default settings
            */
            $('.fancybox').fancybox();
                /*  Different effects */
                // Change title type, overlay closing speed
            /*  Button helper. Disable animations, hide close button, change title type and content */
            $('.fancybox-buttons').fancybox({
                openEffect  : 'none',
                closeEffect : 'none',
                prevEffect : 'none',
                nextEffect : 'none',
                closeBtn  : false,
                helpers : {
                    title : {
                        type : 'inside'
                    },
                    buttons : {}
                },
                afterLoad : function() {
                    this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
                }
            });
        </script>
        <style type="text/css">
            .fancybox-custom .fancybox-skin {
                box-shadow: 0 0 50px #222;
            }
            body {
                max-width: 700px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <h3>Button helper</h3>
        <p>
            <a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
            <a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>
            <a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>
            <a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
        </p>
    </body>
</html>

我想我的服务器上有路径，但这就是我看到的：

http://www.bayingwolf.com/site_pop_up/image_pop.html

而不是他们网站上的花式框（在按钮助手下）。

请问我做错了什么？

谢谢。

蓝

我得到一个 404

"网络错误： 404 未找到 - http://www.bayingwolf.com/site_pop_up/source/jquery.fancybox-1.3.4.pack.js"

几个问题

1） jquery.fancybox-1.3.4.pack.js 没有加载。（404 错误。您可能需要正确检查路径2） $（document）.ready（function（）{

<script>
$(document).ready(function() {
        $('.fancybox').fancybox();
        $('.fancybox-buttons').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',
            prevEffect : 'none',
            nextEffect : 'none',
            closeBtn  : false,
            helpers : {
                title : {
                    type : 'inside'
                },
                buttons : {}
            },
            afterLoad : function() {
                this.title = 'Image ' + (this.index + 1) + ' of ' + 
                              this.group.length + 
                              (this.title ? ' - ' + this.title : '');
            }
        });
})
</script>

建议

正确缩进代码以避免细微的错误。