[英]Open a fancybox link with ajax
点击链接后,我在我的网站上使用Fancybox显示一些内容。 我用的代码:
JS在:
$(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页面?
我可以想到几种可能性。
一个是使用一个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调用受制于相同的原始策略
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.