TypeError: $(...).magnificPopup is not a function

» javascript » TypeError: $(...).magnificPopup is not a function

By : addison_jie

Date : November 28 2020, 11:01 PM

should help you out You may not have included the JQuery library in your code. Remember that the JQuery file must be placed above all other Javascript code.

code :

Share :

"TypeError: $(...).magnificPopup is not a function" in nopCommerce 3.40

By : mark_co

Date : March 29 2020, 07:55 AM

help you fix your problem I found the problem. It was SOME addon of mine. Probably noscript or request policy... I've yet to figure out which one prevented a single js library from being loaded. That explains why it suddenly stopped working. The addon must have been updated and started to cause issues.
This is bad... really bad. If those addons start to interfere with websites even though I have explicitly put them on my white list something is going terribly wrong.

Adding magnificPopup via Fluid

By : Tony Sullivan

Date : March 29 2020, 07:55 AM

wish help you to fix your issue I want to add images via a DCE in Typo3. For normal images you just have to add a tick to activate jh_magificpopup for images. But within the DCE, I cant just check a box or something to add the magnificpopup. so I looked into the Source-code and found that magnificpopup adds a class named "magnificpopup to the a-tag of the images. So i tried it this way: , I fixed it like this. It was missing a class thats needed.

code :

<f:section name="main">
<div class="row">
<f:for each="{dce:fal(field:'images', contentObject:contentObject)}" as="fileReference" iteration="iterator">
    <div class="col-sm-6 col-md-4"> 
        <div class="image-wrap csc-textpic-imagewrap">
        <a class="magnificpopup" href="fileadmin/user_upload/{fileReference.originalFile.name}">
            <f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" width="200px"/>    
        </a>
        </div>  
    </div>
</f:for>
</div>

Use magnificPopup with dynamic elements

By : Deepanshu Ahalawat

Date : March 29 2020, 07:55 AM

hop of those help? I found a solution. I added the event listeners into a function, then i just call this function anytime when i need to reinitialise it.

code :

function init_magnificPopup()
{
        $('.foto').magnificPopup
        (
            {
                type: 'image',
                closeOnContentClick: false,
                closeBtnInside: false,
                mainClass: 'mfp-with-zoom mfp-img-mobile',
                image: 
                {
                    verticalFit: true,
                    titleSrc: function(item) 
                    {
                        return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
                    }
                },
                gallery: 
                { 
                    enabled: true 
                },
                zoom: 
                {
                    enabled: true,
                    duration: 300, // don't foget to change the duration also in CSS
                    opener: function(element) 
                    {
                        return element.find('img');
                    }
                }
            }
        );
}

$(document).ready
(
    function()
    {
        init_magnificPopup();
    }
);

Angular 2+ TypeError: $(...).magnificPopup is not a function

By : Nayr

Date : March 29 2020, 07:55 AM

help you fix your problem To get this to work, I utilized the following steps:
I created a new project with the cli ng new ng-magnific-popup I ran npm install --save jquery magnific-popup I updated app.component.html to

code :

`<a #img href="assets/BingWallpaper-2018-03-23.jpg">img</a>`

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

import * as $ from 'jquery';
import 'magnific-popup';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('img') imgElement: ElementRef;

  ngAfterViewInit(): void {
    $(this.imgElement.nativeElement).magnificPopup({ type: 'image' });
  }
}

MagnificPopup not working with iScroll 5

By : Berenice Serrano

Date : March 29 2020, 07:55 AM

I hope this helps you . Basically, since iscroll prevents the touchevent's default onBeforeScrollStart, a click event is simulated and dispatched on the target element if iscroll realizes the user did not scroll.
Great, but some elements (like text fields, anchor tags. image tag with hyperlink) would have received focus; that is unfortunately not taken into consideration.