Question

我没有html5或css的专业知识。但是，我仍在努力建立一个投资组合网站。我想在我的网站上展示一些照片，我想使用fancybox。但是，它不起作用。我在新页面中打开图像，这是我不想要的。此外，我正在尝试垂直滚动（带有垂直滚动的单页网站）。以下是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head><title>Sketches</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/font.css" media="all"></link>
    <link rel="stylesheet" href="css/style_vertical.css" type="text/css" media="screen"/>

      <!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="../js/jquery.mousewheel.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="../js/jquery.jscrollpane.min.js"></script>

<!-- EasySlider -->
<script type="text/javascript" src="../js/easySlider.js"></script>

<!-- fancybox -->
<script type="text/javascript" src="../js/fancybox/jquery.fancybox-1.3.2.pack.js"></script>

<!-- fancybox transitions -->
<script type="text/javascript" src="../js/fancybox/jquery.easing-1.3.pack.js"></script>

<script>
$(function()
{
    $('.scroll-pane').jScrollPane();
});

</script>  

<script>
$(document).ready(function(){   
    $("#slider").easySlider({
        auto: true,
        continuous: true 
    });
});

</script> 

<script>
$(document).ready(function(){   
    $(".fancybox").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   false
    });


});
</script>

    </head>
    <style>
        a{
            color:#fff;
            text-decoration:none;
        }
        a:hover{
            text-decoration:underline;
        }
        span.reference{
            position:fixed;
            left:10px;
            bottom:10px;
            font-size:13px;
            font-weight:bold;
        }
        span.reference a{
            color:#fff;
            text-shadow:1px 1px 1px #000;
            padding-right:20px;
        }
        span.reference a:hover{
            color:#ddd;
            text-decoration:none;
        }

    </style>
    <body>

        <div class="section black" id="section1">
            <P>LETS CHECK IF THIS WORKS</P>
            <div class="photo-gallery" id="">
                        <a class="fancybox" rel="group" href="images/sketches/01.jpg"><img src="thumbnails/Sketches/01.jpg" alt="" /></a>
                        <a class="fancybox" rel="group" href="images/sketches/02.jpg"><img src="thumbnails/Sketches/02.jpg" alt="" /></a>
            </div>          
            <ul class="nav">
                <li>1</li>
                <li><a href="#section2">2</a></li>
                <li><a href="#section3">3</a></li>
            </ul>
        </div>
        <div class="section white" id="section2">
            <h2>Section 2</h2>
            <p>
                ‘A fathomless and boundless deep,
                There we wander, there we weep;
                On the hungry craving wind
                My Spectre follows thee behind.

            </p>
            <ul class="nav">
                <li><a href="#section1">1</a></li>
                <li>2</li>
                <li><a href="#section3">3</a></li>
            </ul>
        </div>
        <div class="section black" id="section3">
            <h2>Section 3</h2>
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
            <ul class="nav">
                <li><a href="#section1">1</a></li>
                <li><a href="#section2">2</a></li>
                <li>3</li>
            </ul>
        </div>

        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>      
        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('ul.nav a').bind('click',function(event){
                    var $anchor = $(this);

                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1500,'easeInOutExpo');
                    /*
                    if you don't want to use the easing effects:
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1000);
                    */
                    event.preventDefault();
                });
            });
        </script>
    </body>
</html>

Answer 1

您的JS文件未加载：

enter image description here

确保它们位于您的网络服务器相对于您的HTML文件的正确位置，或使用绝对网址。我觉得您可能没有打算将../放在资源网址前面。

fancybox在我的网站上没有工作

1 个答案: