在Magnific Popup中共享按钮

我希望为图库中的每个图像添加共享按钮（Pinterest启动），而无需进入并手动包含每个图像/条目的URL等。 在将其function包含在其他灯箱中时，还有很多指导 – 特别是与特定的CMS相结合; 我一直在审查这些说明，以及w3资源和其他stackoverflow.com条目 – 希望我可以放在一起。 我想把分享按钮放在柜台上。 到目前为止，我失败了。 我确实有一次尝试导致按钮显示，但是脚本没有确认图像的路径是否成功“pin”。 随后尝试包含“Pin It”按钮只会破坏Magnific。

目前，我有：

tCounter: '  '} 

任何提示将非常感谢！

谢谢！

Answer 1

添加按钮有很多种方法，最简单的方法之一：

 $('.image-link').magnificPopup({ type: 'image', closeBtnInside: false, mainClass: 'mfp-with-zoom mfp-img-mobile', image: { verticalFit: true, titleSrc: function(item) { var caption = item.el.attr('title'); var pinItURL = "http://pinterest.com/pin/create/button/"; // Refer to http://developers.pinterest.com/pin_it/ pinItURL += '?url=' + 'http://dimsemenov.com/plugins/magnific-popup/'; pinItURL += '&media=' + item.el.attr('href'); pinItURL += '&description=' + caption; return caption + ' · '; } }, gallery: { enabled: true }, callbacks: { open: function() { this.wrap.on('click.pinhandler', '.pin-it', function(e) { window.open(e.currentTarget.href, "intent", "scrollbars=yes,resizable=yes,toolbar=no,location=yes,width=550,height=420,left=" + (window.screen ? Math.round(screen.width / 2 - 275) : 50) + ",top=" + 100); return false; }); }, beforeClose: function() { this.wrap.off('click.pinhandler'); } } }); 

http://codepen.io/dimsemenov/pen/hutrb

Answer 2

不确定某人是否还有兴趣……虽然Dimitry给出的答案是正确的，但他忘了提到你必须改变一些事情：

 pinItURL += '?url=' + 'http://dimsemenov.com/plugins/magnific-popup/'; pinItURL += '&media=' + item.el.attr('href'); 

第一行

  pinItURL += '?url=' + '***add here your own website***'; 

第二行我不得不再次添加我的网站名称，以使所有工作：

 pinItURL += '&media=**add here the name of you website plus /**' + item.el.attr('href'); 

希望它可以帮到某人。 谢谢德米特里;）

Answer 3

媒体URL应指向灯箱图像而不是网站URL +图像URL。

对于每个图像，完整URL位于attr（’href’）。