Fancybox2带有附加的Ajax加载内容

Fancybox2 With Additional Ajax Loaded Content

本文关键字:Ajax 加载 Fancybox2      更新时间:2023-09-26

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);