Fancybox2带有附加的Ajax加载内容
Fancybox2 With Additional Ajax Loaded Content
Im使用fancybox2在灯箱中显示图像。这适用于最初出现的图像。然而,通过ajax(无限滚动)加载的图像不会显示在fancybox中。
将显示深灰色覆盖,但没有图像。
从研究中我了解到我需要重新初始化fancybox——在加载了额外的内容后,我尝试了各种方法,但都不起作用。
我的Fancybox脚本
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
"closeClick": "true",
"closeBtn": "true",
"overlay": "true",
"type": "image",
"nextClick": "false",
"scrolling": 'no',
helpers: {
overlay: {
locked: false,
css: {
'background': 'rgba(0, 0, 0, 0.50)'
}
},
keys: {
next: {
},
prev: {
}
},
}
});
});
</script>
Infinate滚动脚本
<script type="text/javascript">
var BlockNumber = 2; //Infinate Scroll starts from second block
var NoMoreData = false;
var inProgress = false;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height() && !NoMoreData && !inProgress) {
inProgress = true;
$("#loadingDiv").show();
$.post("@Url.Action("InfinatePopularScroll", "Wall")", { "BlockNumber": BlockNumber, "AlreadyShown": alreadyDone },
function (data) {
BlockNumber = BlockNumber + 1;
NoMoreData = data.NoMoreData;
$("#bookListDiv").append(data.HTMLString);
$("#loadingDiv").hide();
inProgress = false;
});
}
jQuery("abbr.timeago").timeago
//here is where i have tried to reinitialize
// i have tried copying the entire script posted in the code block above
// i have tried $(".fancybox").fancybox();
});
</script>
正如你可能知道的那样,我在javascript方面很糟糕,所以任何帮助或想法都将不胜感激。
提前谢谢。
在fancybox的tips博客中存在一个ajax示例(@seehttp://fancybox.net/blog#tip5)。在我看来,它应该与合作
$.fancybox.resize();
如果没有,也许您可以尝试使用当前数据和新内容的组合重新初始化fancybox(就像在成功的ajax调用后的示例中所做的那样):
$.fancybox(data);
相关文章:
- 无法在通过jQuery的ajax加载的页面中执行javascript
- 获取ajax加载的图像的大小
- 分页:如何用AJAX加载第一个页面
- 页面加载之前的jQuery Ajax加载程序
- ajax加载了内容,脚本没有执行
- 如何使用post和ajax加载视图Codeigniter
- $(select).selectmenu('打开')不'如果使用ajax加载页面,则不起作用
- ajax加载()后,包含图表的图像不会重新绘制
- 如果数据为空,Ajax加载不会停止
- 防止用户在jQuery Mobile中ajax加载页面时单击其他位置
- 将内容ajax加载到html弹出窗口中
- 导航栏和AJAX加载
- 用于各个元素的Ajax加载程序
- 通过AJAX加载页面并执行javascript和CSS
- 使用ajax加载页面的一部分
- 从表单中动态生成一个字符串,传递给通过AJAX加载的PHP文件
- 显示全屏Ajax加载程序的最佳方式
- 获取通过AJAX加载的元素
- 如何在rails应用程序中测试AJAX加载的内容
- 如何在Ajax加载新内容时停止JavaScript执行