6

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?

derabbink
  • 2,419
  • 1
  • 22
  • 47
m1crdy
  • 1,371
  • 2
  • 25
  • 58
  • 1
    I don't think this is Facebook related; it seems to be an issue the `` element you are rendering. Try replacing the `callFacebook()` invocation with something simpler that allows you to isolate the issue. E.g. `console.log('share click', image);` Besides, for me, the "Foto Teilen" button works, as you [suggested](http://stackoverflow.com/questions/32526110/magnific-popup-facebook-share-button-works-just-on-second-click#comment53031697_32583123) for a repro. Perhaps a popup blocker is getting in your way? – derabbink Sep 17 '15 at 14:21

1 Answers1

5

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!

MagJS
  • 422
  • 3
  • 3
  • Try it live: http://www.party-news.de/de/bilder/2303 ;) Click on an image and go "Foto teilen". It will not work. Close fb-window and click "Foto teilen" again. Works. – m1crdy Sep 15 '15 at 14:44
  • It did say 'an error occurred' when clicking the link in the FB popup page, there was no obvious reason in the console though, sorry. – MagJS Sep 15 '15 at 15:29