Fancybox работает только иногда, не обновляя страницу

Question

Я пользуюсь Fancybox, поэтому пользователи могут нажимать на миниатюры изображений и просматривать увеличенные изображения.

Проблема, с которой я сталкиваюсь, заключается в том, что она не всегда работает, когда загружается страница. Я нажимаю на миниатюры, и Fancybox не показывает большие изображения. Однако, если обновить страницу, она работает нормально. Содержимое генерируется динамически, поэтому мне интересно, нужно ли обновлять DOM?

<script type="text/javascript"> 
     $(document).ready(function() { 
      $(".fancybox").fancybox({ 
       openEffect : 'fade', // openEffect/closeEffect/nextEffect/prevEffect 
       closeEffect : 'fade', // Animation effect ('elastic', 'fade' or 'none') for each transition type 
       nextEffect : 'fade', // String; Default value: 'fade', 'fade', 'elastic', 'elastic' 
       prevEffect : 'fade', 
       openSpeed : '1000', // openSpeed/closeSpeed/nextSpeed/prevSpeed  
       closeSpeed : '1000', // The time it takes (in ms, or "slow", "normal", "fast") to complete transition 
       nextSpeed : '1000', // Integer; Default value: 250 
       prevSpeed : '1000', 
       padding  : 3 
      }); 
     }); 
    </script> 

<a class='fancybox' rel='gallery' href='".$data['photo'][$x]."'><img src='".$data['photo'][$y]."' style='margin-right: 2.5px; margin-left: 2.5px; vertical-align: top;'></a> 

Когда он не работает, и я нажимаю на миниатюру, здесь ошибка, я получаю ...

TypeError: a[0] is undefined в jquery.fancybox.pack.js на линии 15.

Вот как Я звоню в Fancybox, может быть, в этом проблема?

<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js?v=2.1.4"></script>

Я не забочусь, какая версия FancyBox я, используя до тех пор, как я получаю функциональность здесь, а также на другой странице, где у меня есть FancyBox, который показывает, когда страница загружена.

Answer 1

если у вас есть несколько изображений одной страницы с тем же классом вместо вызова, как и выше вы можете использовать

$("a[rel=gallery]").fancybox({ 
    openEffect : 'fade', // openEffect/closeEffect/nextEffect/prevEffect 
      closeEffect : 'fade', // Animation effect ('elastic', 'fade' or 'none') for each transition type 
      nextEffect : 'fade', // String; Default value: 'fade', 'fade', 'elastic', 'elastic' 
      prevEffect : 'fade', 
      openSpeed : '1000', // openSpeed/closeSpeed/nextSpeed/prevSpeed  
      closeSpeed : '1000', // The time it takes (in ms, or "slow", "normal", "fast") to complete transition 
      nextSpeed : '1000', // Integer; Default value: 250 
      prevSpeed : '1000', 
      padding  : 3 
});