Question

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

提前致谢。

Answer 1

In the tips blog of fancybox exists an ajax example (@see http://fancybox.net/blog#tip5). In my opinion it should work with

$.fancybox.resize();

If not, maybe you can try to reinitialize the fancybox with a combination of the current data and the new content (like it is done in the example after the successful ajax call):

$.fancybox(data);

Fancybox2带有额外的Ajax加载内容

1 个答案: