fancybox實現

我是jquery的新手，並且在實現花哨的盒子時遇到了很大的麻煩。根據用戶指南，我遵循了所有說明，並在互聯網上搜索了很多示例。我把它綁在代碼點火器上，所以不知道這是否有所作爲。fancybox實現

我想只是用它來做一個簡單的 - 點擊一個鏈接並顯示一個帶有內容和超鏈接的文本框。

我在我的應用程序文件夾中有一個名爲'fancybox'的文件夾中的所有文件。

這裏是我的頭：

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.3" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" type="text/css" media="screen" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
    <script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> 
    <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.0"></script> 
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script> 
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.3"></script> 
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $(".fancybox").fancybox(); 
      content:kljsadlkfajsdlfkjasdflkjads; 
     }); 
    </script>

，這裏是HTML視圖：

 <div class="resources"> 
      <a class="fancybox" rel="group" href="#">test</a> 
     </div>

感謝您的幫助

來源

2012-09-20 LightningWrist

示

// Override content $(".fancybox").fancybox({ content: "kljsadlkfajsdlfkjasdflkjads" });

另外的實例是 '內容' 的fancybox的屬性/參數（）？ – n8wrl

你忘了引用內容的價值。 –

我其實不確定tbh。這就是我問的原因。 :) – LightningWrist

如果你想的fancybox自動查找元素來展示，將該元素的ID放在href屬性中。

<a href="#box1" class="fancybox">Show box 1</a> 
<div style="display:none"><div id="box1">I am in fancybox!</div></div>

和JavaScript：

$(document).ready(function() { 
    $("a.fancybox").fancybox(); 
});

如果你想手動顯示的fancybox對話框，只是把它：

$("#box1").fancybox();

來源

2012-09-20 20:01:03 Lian

這很有意義，但我仍然沒有得到任何東西。我想我正在訂購我的腳本標籤和/或CSS標籤有問題。我所有的路徑似乎都是正確的。我也不確定我是否包含正確的js文件，您是否有我可以看到的標題示例或基於上面發佈的內容的建議？謝謝 – LightningWrist

我建議您使用調試工具（Chrome中的Developer Tools或Firefox中的Firebug）並查找任何運行時錯誤，並查找是否存在'$ .fn.fancybox'和'$ .fancybox'。您可以在控制檯中鍵入'$ .fanc'並查看它是否存在建議'$ .fancybox'。 – Lian

的錯誤是你如何調用的fancybox。你的語法錯了。

您需要將您的選項作爲對象傳遞。

e.g在docs

來源

2012-09-20 20:09:11

回答

相關問題