Magnific Popup 中的共享按钮答案

【问题标题】：Sharing buttons in Magnific PopupMagnific Popup 中的共享按钮
【发布时间】：2013-08-07 06:06:48
【问题描述】：

我希望为画廊中的每张图片添加共享按钮（Pinterest 开始），而无需进入并手动为每个单独的图片/条目添加 URL 等。在为其他灯箱包含此功能时，有很多说明需要注意——尤其是与特定的 CMS 结合使用；我一直在查看这些说明，以及 w3 资源和其他 stackoverflow.com 条目——希望我能把一些东西放在一起。我想用分享按钮代替柜台。到目前为止，我失败了。我确实有一次尝试导致显示按钮，但是脚本没有确认图像的路径以获得成功的“图钉”。包含“Pin It”按钮的后续尝试完全破坏了 Magnific。

目前，我有：

tCounter:
'<a href="//pinterest.com/pin/create/button/?url=http%3A%2F  
%2Fgeraldmurai.com&media=http%3A%2F%2Fwindow.location.href&  
description=Aloha!%20Thank%20you%20for%20Pinning!" data-pin-do="buttonPin" data-pin-  
config="none" >
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>'}

任何提示将不胜感激！

谢谢！

【问题讨论】：

我一直在参考的一个来源以确认图像的 URL：stackoverflow.com/questions/406192/…

标签： jquery sharing pinterest magnific-popup

【解决方案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 + ' &middot; <a class="pin-it" href="'+pinItURL+'" target="_blank"><img src="http://assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>';
            }
        },


    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

【讨论】：

谢谢！我已经尝试过了，（重新实现了原始计数器代码并在 html 中为画廊调用放置/修改了上面的内容）但我一定做错了，因为我仍然只是得到一个损坏的脚本。
查看源代码：geraldmurai.com/build2/index2.php
如何使用此代码将 pin it 按钮嵌入图像右上角而不是标题中？否则工作出色。谢谢

【解决方案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');

希望它可以帮助某人。谢谢德米特里 ;)

【讨论】：

【解决方案3】：

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

每个图像的完整 url 位于 attr('href') 中。

【讨论】：