CODEWITHSUNDEEP
jquerymagnific-popup
adam78
adam78

Reputation: 10078

jQuery.Deferred exception: $(...).magnificPopup is not a function

I have the following markup and order of scripts:

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

However I'm getting the following error:

jQuery.Deferred exception: $(...).magnificPopup is not a function TypeError: $(...).magnificPopup is not a function

I've checked the network tab and magnific popup is loaded

Upvotes: 0

Views: 3324

Answers (1)

DanieleAlessandra
DanieleAlessandra

Reputation: 1555

Your example works perfectly if used alone, look at the snippet down here...

Your problem is elsewhere, tipically the jQuery.Deferred exception occurs when a page loads many instance of jQuery causing conflicts.

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

Upvotes: 1

Related Questions