FancyBox插件不工作

Question

我的花式盒子有问题。当我单击一个链接时，花式框会获得内容，但不会显示lightbox，并跳转到我认为可以通过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花式框的链接，plugins.just将它们添加到头标记之间

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

js/fancybox-1.3.4/jquery.弛豫-1.3.Pack.js

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

请参阅http://fancybox.net/中的演示以获得更多信息

Answer 2

如果要打开外部页面，则可能需要使用API选项设置type of content，如

$("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调用都需要在服务器环境中进行测试，并且可能无法在本地主机中工作。

还要确保将fancybox脚本代码包装在.ready()方法中。