jQuery.Deferred исключение: $ (...). magnificPopup не является функцией - PullRequest
Новая
       10

jQuery.Deferred исключение: $ (...). magnificPopup не является функцией

0 голосов
/ 03 апреля 2019

У меня есть следующая разметка и порядок скриптов: 

<div class="js-gallery">
  <div class="row gtr-50 gtr-uniform">
    <div class="col-3">
      <span class="fit image"><a href="/images/lion.jpg" title="lion">
            <img alt="lion" src="/images/lion.jpg"></a>
          </span>
    </div>
  </div>
</div>

<script src="/js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script>
  $(function() {
    $('.js-gallery').magnificPopup({
      delegate: 'a',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0, 1] // Will preload 0 - before current, and 1 after the current image                      
      },
      image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
        titleSrc: function(item) {
          return item.el.attr('title');
        }
      }
    });
  });
</script>

Однако я получаю следующую ошибку:

jQuery. Отложенное исключение: $ (...). MagnificPopup не является функцией TypeError: $ (...). MagnificPopup не является функцией

Я проверил вкладку сети и увеличенное всплывающее окно загружено

1 Ответ

0 голосов
/ 03 апреля 2019

Ваш пример отлично работает, если используется один, посмотрите здесь фрагмент ...

Ваша проблема в другом месте, , как правило, исключение jQuery.Deferred возникает, когда страница загружает много экземпляров jQuery , вызывая конфликты. 

<div class="js-gallery">
   <div class="row gtr-50 gtr-uniform">
       <div class="col-3">
           <span class="fit image"><a href="https://lorempixel.com/400/200/sports/1/" title="lion">
                   <img alt="lion" src="https://lorempixel.com/400/200/sports/1/"></a>
            </span>
       </div>
   </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script>
  $(function () {    


     $('.js-gallery').magnificPopup({                     
         delegate: 'a',
         type: 'image',
         tLoading: 'Loading image #%curr%...',
         mainClass: 'mfp-img-mobile', 
         gallery: { 
                 enabled: true, 
                 navigateByImgClick: true,
                 preload: [0,1] // Will preload 0 - before current, and 1 after the current image                      
         },                     
         image: {                        
                tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                titleSrc: function(item) {
                         return item.el.attr('title') ; 
                }                      
          }          
     }); 

    });  
         
</script>
...