带有附加 Ajax 加载内容的 Fancybox2答案

【问题标题】：Fancybox2 With Additional Ajax Loaded Content带有附加 Ajax 加载内容的 Fancybox2
【发布时间】：2015-06-23 09:24:57
【问题描述】：

我正在使用 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>

无限滚动脚本

<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 - 所以任何帮助或想法将不胜感激。

提前致谢。

【问题讨论】：

标签： javascript jquery fancybox fancybox-2

【解决方案1】：

fancybox 的技巧博客中存在一个 ajax 示例（@see http://fancybox.net/blog#tip5）。在我看来，它应该与

$.fancybox.resize();

如果没有，也许您可以尝试结合当前数据和新内容重新初始化fancybox（就像示例中成功调用ajax 后所做的那样）：

$.fancybox(data);

【讨论】：