Fancybox2 with Additional Ajax Загружено содержимое

Question

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

В блоге подсказок fancybox существует пример ajax (@see http://fancybox.net/blog#tip5). По моему мнению, он должен работать с

$.fancybox.resize(); 

Если нет, может быть, вы можете попробовать переинициализировать FancyBox с комбинацией текущих данных и новым контентом (как это сделано в примере, после успешного вызова AJAX) :

$.fancybox(data);