FancyBox插件不起作用

Question

我的化妝盒有問題。 當我單擊鏈接時，精美的框會顯示內容，但不會顯示燈箱，而是會跳轉到我應該通過Ajax獲取其返回內容的頁面。

HTML：

<a class="butt red medium fancybox" href="http://localhost/food/index.php/food/ajaxExtras?foodId=412">سفارش </a>

JS：

$("a.fancybox").fancybox();

我的結果：

Answer 1

從您的照片中，我可以說您沒有為花哨的盒子添加插件文件。

這是jQuery fancy box plugins的鏈接。只需在標題標簽之間添加它們

http://code.jquery.com/jquery-1.10.2.min.js

js / fancybox-1.3.4 / jquery.easing-1.3.pack.js

js / fancybox-1.3.4 / jquery.mousewheel-3.0.4.pack.js

請查看http://fancybox.net/中的演示以獲取更多信息

Answer 2

如果您要打開外部頁面，則可能需要使用以下API選項設置content type ：

$("a.fancybox").fancybox({
    type: "ajax" // or "iframe"
});

或在鏈接中使用HTML5 data-fancybox-type屬性，例如

<a data-fancybox-type="ajax" class="butt red medium fancybox" href="http://localhost/food/index.php/food/ajaxExtras?foodId=412">سفارش </a>

請注意，大多數ajax調用都需要在服務器環境中進行測試，並且可能無法在localhost中運行。

還要確保將fancybox腳本代碼包裝在.ready()方法中。