Fancybox2 With Additional Ajax Loaded Content

Question

Im using fancybox2 to display images in a lightbox. This works fine for images that are present initially. However the images that are loaded via ajax (an infinite scroll) do not display in fancybox.

The dark grey overlay appears, but there is no image.

From researching i understand i need to reinitialize fancybox - i have tried various ways of doing this after the additional content has loaded but its just not working.

My Fancybox script

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

As you may be able to tell i suck at javascript - so any help or ideas would be appreciated.

Thanks in advance.

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