Magnific popup facebook share button works just on second click

Question

I have a gallery with magnific popup with a share button as titleSrc. This is called on button click:

function callFacebook(item){
  console.log(item);
  FB.ui({
    method: 'feed',
    link: item,
    caption: 'Die besten Party-Pics bei party-news.de',
  }, function(response){
    console.log(response);
  });
}

This is the magnific popup call:

$('.gallery').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image',
  gallery: {
    enabled:true,
    tCounter: '%curr% von %total%',
    preload:false
  },
  image: {
    verticalFit:false,
    titleSrc:function(item){
        var image = item.el.attr("href");
        return '<a class="shareFacebook" onclick="callFacebook(\''+image+'\')" target="_blank"><i class="fa fa-facebook-official"></i>&nbsp;Foto teilen</a>';
    }
  },
    tClose: 'Schliessen',
    tLoading: 'Lade Bild...',
  // other options
});

I´m getting the href of the clicked image and pass it to the callFacebook function. The first time I click the share button it just shows the standard og:tags. When I close this window and click the share button again – it works. The image shows up at the share dialog. Any ideas why?

Answer 1

since I don't see all the code it is hard to tell exactly what's going on, either create a small jsbin/jsfiddle or I can try guessing :)

Make sure your initializer function is within the jQuery ready function such the following:

$(document).ready(function(){
  $('.gallery').magnificPopup({});
  //....
});

Hope that helps!