用ajax打开一个fancybox链接

时间:2013-08-13 08:55:01

标签: jquery ajax fancybox fancybox-2

我在我的网站上使用Fancybox在您点击链接后显示一些内容。我用的代码:

JS in:

$(document).ready(function() {
$('.fancybox').fancybox();
});

打开Fancybox窗口的链接:

<a rel="nofollow" target="_blank" class="fancybox" href="#show_code_8">Show code</a>

在Fanctbox窗口中打开的代码(仅作为示例):

<div id="show_code_8" class="inline">
  Some content here
</div>

它工作正常,但我想通过ajax加载内容而不是这个。我尝试了很多,但无法正常工作。我已经设法通过ajax打开ajax页面,但那没有正确的ID(来自href =“#show_code_8”的8变量)。有人可以告诉我如何用正确的ID打开Ajax页面吗?如何将变量传递给ajax页面?

1 个答案:

答案 0 :(得分:2)

我可以想到几种可能性。

当您使用类似

之类的参数调用文件时,一个是使用返回特定代码(部分)的php文件
<a class="fancybox" href="allCodeContent.php?code=show_code_8" ...

另一个使用jQuery的人只是使用.load()来调用.html文件中的特定代码(部分)

例如,名为allCodeContent.html的文件可能包含以下内容:

<div id="show_code_1">This is code one</div>
<div id="show_code_2">This is code two</div>
<div id="show_code_3">This is code three</div>
<div id="show_code_4">This is code four</div>
... etc

然后,您调用主页中的每个代码部分,如:

<a class="fancybox" href="#show_code_1">show code one in fancybox</a>
<a class="fancybox" href="#show_code_2">show code two in fancybox</a>
<a class="fancybox" href="#show_code_3">show code three in fancybox</a>
<a class="fancybox" href="#show_code_4">show code four in fancybox</a>
...etc.

你可能需要创建一个占位符容器(在你的主页面中)来每次加载代码部分,如

<div id="ajaxContentPlaceholder" style="display:none;"></div>

然后使用此脚本:

jQuery(function($) {
    $(".fancybox").on("click", function(){
        var $code = this.href.split("#");
        $("#ajaxContentPlaceholder").load("allCodeContent.html #"+$code[1], function(){
            $.fancybox(this);
        });
        return false;
    }); // on
}); // ready

请记住,ajax调用受same origin policy

的约束