fancybox不能在我的網站工作

我沒有html5或CSS的專業知識。但是，我仍在努力構建一個投資組合網站。我有一些我想在我的網站上展示的照片，我想使用fancybox。但是，它不工作。我在一個新的頁面打開圖像，這是我不想要的。另外，我正在嘗試垂直滾動（帶有垂直滾動的單頁網站）。以下是我的代碼：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>

來源

2013-04-12 hotdog1987

我希望你不要忘記設置一個合適的'DOCTYPE'。我希望你證實你的文件的路徑是正確的，所以他們正確加載。我希望你沒有忘記fancybox的CSS文件。此外，不要在「」和「」標籤之間放置任何東西。你的'