Jak wywołać funkcję magnificPopup?

Mam guzik na stronie z ID="abc"

Kod JS, który nie działa

    
    $('#abc').click(function() {
        wykonaj();
    });

    function wykonaj() {
        $.magnificPopup({
            items: { src: '#small-dialog',},
            type: 'inline',
            fixedContentPos: false,
            fixedBgPos: true,
            overflowY: 'auto',
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            mainClass: 'my-mfp-zoom-in'
        });
    }

Natomiast ten kod działa bez problemu

    
        $('#abc').magnificPopup({
            items: {
                src: '#small-dialog',
            },
            type: 'inline',
            fixedContentPos: false,
            fixedBgPos: true,
            overflowY: 'auto',
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            mainClass: 'my-mfp-zoom-in'
        });

Da się jakoś to zrobić żeby zadziałał sposób nr 1?

W pierwszym kodzie wywołujesz magnificPopup na niczym. Być może nawet wywala Ci błąd w konsoli.

W wykonaj przekazuj jako parametr this, następnie go odczytuj (pod inną nazwą zmiennej) w tej funkcji i zastąp tym #abc w drugim kodzie.

Dobra Nie ma tematu. Zajrzałem do dokumentacji ponownie i mam

// Open directly via API
$.magnificPopup.open({
  items: {
    src: '<div class="white-popup">Dynamically created popup</div>', // can be a HTML string, jQuery object, or CSS selector
    type: 'inline'
  }
});

Wstawiłem to w funkcję i działa bez problemu. Dzięki za pomoc

mówiłem, żeby zastąpić #abc, a nie zostawić hasha i dodać do tego id obiektu - po co tak kombinujesz?

dwa - zapoznał byś się z dokumentacją. długo już siedzisz na forum, a wciąż zakładasz tematy o podstawach - może pora ruszyć do przodu i trochę myśleć i ROZUMIEĆ kod, a nie zmieniać losowo rzeczy, aż zadziała?

magnificPopup działa tak (poszukałem co to i obejrzałem dokumentację), że po inicjalizacji oczekuje na event kliknięcia. sama inicjalizacja nie powoduje, że popup wyskakuje. innymi słowy - magnificPopup robi coś takiego: $(this).click(jakasWewnetrznaFunkcjaTegoPluginu);

skoro po pierwszym kliknięciu robisz inicjalizację dopiero - to wykonuje się ona przy drugim kliknięciu (i jednocześnie inicjalizacja następuje jeszcze raz dzięki Twojemu kawałkowi kodu).

Ty widzę próbujesz po prostu wywołać otwarcie popupu bez inicjalizacji - od tego masz oczywiście API: http://dimsemenov.com/plugins/magnific-popup/documentation.html i metodę open, gdzie uruchamiasz magnificPopup BEZ selektora (podobnie jak próbowałeś robić w pierszym poście)

edit: i tyle pisania na marne, bo pierwsze piszesz posty, a potem myślisz ....

Nie na marne bo nauczyłem się dlaczego mi się to nie zainicjalizowało. Skoro ktoś wykonuje otwieranie obiektu na okienku to powinno w domyśle się zanicjalizować. Wczoraj też czytałem dokumentację z której wynikało:

// From an element with ID #popup
$('button').magnificPopup({
  items: {
      src: '#popup',
      type: 'inline'
  }
});

idąc tym tropem zrobiłem:

// From an element with ID #popup
$('button').magnificPopup({
  items: {
      src: '#popup',
      type: 'inline',
      fixedContentPos: false,
      fixedBgPos: true,
      overflowY: 'auto',
      closeBtnInside: true,
      preloader: false,
      midClick: true,
      removalDelay: 300,
      mainClass: 'my-mfp-zoom-in'
  }
});

Co niestety nie zadziała bo reszta parametrów powinna być poza items:tak jak w poscie pierwszym z przykładem. I też 2 godziny dlaczego ni mogę uruchomić animacji. Akurat z JS czuję się słaby i piszę tu bo tematy znikną i nie będą zaśmiecać forum a myślę, że mój problem był pewnie dziecinnie prosty ale w sumie nie wstydzę się tego i doceniam pomoc. W sumie teraz mam otwieranie okienka ale ciekawe czy spełni to oczekiwanie mojego projektu.