Fancybox 2.0無法加載

我一直在尋找和工作，我不能讓fancybox在這段代碼中工作。我修改了幾次，我不明白爲什麼它不起作用。我使用Dreamweaver和的fancybox下方標記，我不知道，如果一些代碼用的fancybox代碼對比Fancybox 2.0無法加載

<!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"><!-- InstanceBegin template="/Templates/GabLopezIT.dwt" codeOutsideHTMLIsLocked="false" --> 
<head> 
<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico" /> 
<!-- InstanceBeginEditable name="doctitle" --> 
<title>Gabriele Lopez</title> 
<!-- InstanceEndEditable --> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<style type="text/css"> 


--> 
</style> 
<link href="../css/psr_site_layout.css" rel="stylesheet" type="text/css" /> 
<link href="../css/psr_site_layout_content.css" rel="stylesheet" type="text/css" /> 
<link href="../css/psr_site_layout_gallery.css" rel="stylesheet" type="text/css" /> 
<link href="../css/psr_site_submenu.css" rel="stylesheet" type="text/css" /> 
<!-- InstanceBeginEditable name="head" --> 
<style type="text/css"> 

/*.video { 
    width:200px; 
    float:left; 
    margin-left:50px; 
}*/ 
</style> 



<!-- InstanceEndEditable --> 
<style type="text/css"> 
</style> 
<style type="text/css"> 
body,td,th { 
    color: #FFF; 
} 
a:link { 
    color: #CCC; 
    text-decoration: none; 
} 
a:visited { 
    color: #CCC; 
    text-decoration: none; 
} 
a:hover { 
    text-decoration: none; 
} 
a:active { 
    text-decoration: none; 
} 

#bio { 
    margin-bottom:-20px; 
} 

#social { 
    margin-top:5px; 
    height: 25px; 
    width: auto; 
    float: right; 

} 

#lang { 
    float:left; 
    width:auto; 
    margin-right:15px; 

} 
#twitter { 
    float: right; 
    width: 60px; 
    height: 24px; 
    vertical-align: bottom; 
    margin-left: 17px; 
    margin-right: 5px; 
} 
#google { 
    float: right; 
    width: 50px; 
    height: 24px; 
    vertical-align: bottom; 
    margin-left: 17px; 
    margin-right: 15px; 
} 


.fb-like { 
    height: 25px; 
    width: 85px; 
    float: right; 
    vertical-align: bottom; 
    margin-left: 17px; 
    margin-right: 5px; 
    display:inline-table 

} 



</style> 
<link href="../css/copyright.css" rel="stylesheet" type="text/css" /> 
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function MM_swapImgRestore() { //v3.0 
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
} 
function MM_preloadImages() { //v3.0 
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 

function MM_findObj(n, d) { //v4.01 
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
    if(!x && d.getElementById) x=d.getElementById(n); return x; 
} 

function MM_swapImage() { //v3.0 
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} 
} 

</script> 
<link href="../css/bottom.css" rel="stylesheet" type="text/css" /> 
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /> 
</head> 
<body bgcolor="#666666" background="../img/background001.jpg" onload="MM_preloadImages('../images/facebook2.png')"> 

<!-- FACEBOOK CODE--> 

<script>(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "http://connect.facebook.net/it_IT/all.js#xfbml=1"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 

<!--END FACEBOOK CODE--> 

<!--TWITTER CODE--> 
<script>!function(d,s,id){ 
    var js,fjs=d.getElementsByTagName(s)[0]; 
    if(!d.getElementById(id)){ 
    js=d.createElement(s);js.id=id; 
    js.src="//platform.twitter.com/widgets.js"; 
    fjs.parentNode.insertBefore(js,fjs);} 
    }(document,"script","twitter-wjs");</script> 

<!--END TWITTER CODE--> 

<!--GOOGLE+ CODE--> 
<script type="text/javascript"> 
    window.___gcfg = {lang: 'it'}; 

    (function() { 
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/plusone.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
    })(); 
</script> 
<!--END GOOGLE+ CODE--> 


<div id="psr_site_layout"> 
<table id="Table_01" width="800" align="center" border="0" cellpadding="0" cellspacing="0"> 
<tr> 
     <td><a href="../index.html"><img src="../img/bannerweb.png" alt="" width="800" height="200" border="0" /></a></td> 

</tr> 
    <tr> 
     <td colspan="5"> 
      <img src="../img/layout/PSR-website-(sliced-new)_03.png" width="800" height="8" alt="" /></td> 
    </tr> 
    <tr> 
    <td colspan="5"><ul id="MenuBar1" class="MenuBarHorizontal"> 
<li><a href="#">HOME</a></li> 
<li><a href="news_it.php">NEWS</a></li> 
<li><a href="tour_it.php">TOUR</a></li> 
<li><a href="#">FOTOS</a></li> 
<li><a href="videos_it.php">VIDEOS</a></li> 
<li><a href="#">ALBUMS</a></li> 
<li><a href="bio_it.html">BIO</a></li> 
</ul> 
<div id="social"> 
<div id="lang"><img src="../img/EN-button.png" width="20" height="20" /></div> 
<div id="google"><g:plusone size="medium"></g:plusone> 
</div> 
<div id="twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.gabrielelopez.com" data-text="Senti la musica di Gabriele Lopez" data-lang="it">Tweet</a></div> 

<div class="fb-like" data-href="http://www.gabrielelopez.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="trebuchet ms"></div> 
</div> 


</td> 
</tr> 
    <tr> 
     <td colspan="5"> 
      <img src="../img/layout/PSR-website-(sliced-new)_15.jpg" width="800" height="6" alt="" /></td> 
    </tr> 
    <tr> 
     <td colspan="5"><!-- InstanceBeginEditable name="Content1" -->

的fancybox腳本從這裏開始

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script> 
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> 
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=2.0.4"></script> 
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.4"></script> 
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" /> 
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" /> 
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css" media="screen" /> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".various").fancybox({ 
     maxWidth : 800, 
     maxHeight : 600, 
     fitToView : false, 
     width  : '70%', 
     height  : '70%', 
     autoSize : false, 
     closeClick : false, 
     openEffect : 'none', 
     closeEffect : 'none', 

    }); 
}); 
</script> 

<div id="psr_site_layout_content">

的fancybox HTML內容從這裏開始

<a class="various fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvpianeta.png"></a><p>Vorrei tanto dirtelo</p> 

<a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a> 

<div class="video"><a class="various fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvvorrei.png"></a><p>Vorrei tanto dirtelo</p></div> 

<div class="video"><a class="lavita fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvvita.png"></a> 
<p>La vita che vorrei</p></div> 

<div class="video"><a class="lavita fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvhistoria.png"></a><p>Historia de un perfecto idiota</p></div> 

<div class="video"><a class="lavita fancybox.iframe" href="http://www.youtube.com/embed/_DjiHFxPauw" title="Vorrei tanto dirtelo"><img src="../img/tvteletaxi.png"></a><p>Vorrei tanto dirtelo</p></div> 
</div> 

     <!-- InstanceEndEditable --></td> 
    </tr> 
    <div id="bottom"> 
    <tr> 
     <td colspan="5"> 
      <img src="../img/layout/PSR-website-(sliced-new)_17.jpg" width="800" height="5" alt="" /></td> 
    </tr> 
    <tr> 
    <td colspan="6"><div id="psr_site_submenu"><a href="index.php">Home</a> | <a href="outboard_it.html">News</a> | <a href="discografia.html">Tour</a> | <a href="media.html">Fotos</a> | Videos | <a href="contatti_it.html">Dischi</a> | <a href="www.facebook.com/pages/Poli-Studio-Recording/73432760131">Bio</a> | Cambia al Inglese</div></td> 
</tr> 
    <tr> 
    <td height="39" colspan="6" class="copyright"> 
&copy; 2012 <a href="http://www.orangeparkrecords.com">Orange Park Records srl.</a><br /> 
Tutti diritti riservati. 
</td> 
</tr> 
</div> 
</table> 
</div> 
<p>&nbsp;</p> 
<script type="text/javascript"> 
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); 
</script> 
</body> 
<!-- InstanceEnd --></html>

來源

2012-02-13 Giacomo Di Mase

旁邊的fancybox問題，你的HTML標記是無效的（不知過時），嘗試W3C驗證發現問題 - > HTTP：//validator.w3。 org/ – sysop 2012-02-13 08:44:17

我沒有看到你的代碼中包含jQuery或fancybox的css和js文件的任何地方。

確保您已將腳本和樣式表包含在文檔中（確保css和js文件位於您的服務器上）。確保你還加載了jQuery庫。

按照這個例子，並相應調整路徑：

<!-- Add jQuery library --> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 

<!-- Add fancyBox --> 
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" /> 
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script>

來源

2012-02-13 08:35:50 JFK

你好@JFK，感謝你的回覆，我不是爲什麼jQuery沒有在我原來的帖子中顯示，所以我又添加了它。所以要回答你的問題jQuery和fancybox js文件最初已包含在內。你知道什麼是錯的嗎？這裏是一個鏈接到在線頁面：http://www.gabrielelopez.com/it/videos_it.html再次感謝。 – 2012-02-13 14:17:15

您正在使用相對路徑鏈接到您的fancybox文件，因此最後的路徑變爲http://www.gabrielelopez.com/it/fancybox/source/jquery.fancybox.pack.js?v=2.0.4其中該文件未找到。 js文件的絕對路徑爲http://www.gabrielelopez.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.4，因爲fancybox文件夾位於根級別，而不是文件夾「它「 – JFK 2012-02-13 18:05:39

謝謝你，只是最後一件事，我怎麼可以用我的MAMP本地主機？（這是不工作） – 2012-02-13 22:49:30

Fancybox 2.0無法加載

回答

相關問題