Question

我有一个页面需要在Magnific lightbox中发布视频，但在其下方我添加了一个＆＃34;项目详情＆＃34;链接，以及社交媒体图标。它看起来像这样：

enter image description here

该插件支持回调：

// Initialize Magnefic Lightbox
    $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
        iframe: {
            markup:
                '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '</div>'+
                '<div class="after-iframe">'+
                '<div class="details-link"><i class="icon-link"></i> <a class="project-link" href="#">Project Details</a></div>'+
                '<div>[Sharing Buttons]</div>'+
                '</div>'
        },
        delegate: 'a',
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: true,
        fixedContentPos: false,
        callbacks: {
            open: function() {
                // Will fire when this exact popup is opened
                // this - is Magnific Popup object
                initShare();
            },
            close: function() {
                // Will fire when popup is closed
            }
        }
    });

当我在WordPress中创建一个post循环时，我需要从页面中获取永久链接并将其作为唯一变量传递给正确的实例。也就是说，不幸的是，由于我的JS技能并不是我喜欢的地方，所以只是有点过头了。我的PHP循环模板（放弃所有变量定义）如下所示：

<li>
        <div class="overlay-box popup-vimeo">
            <img itemprop="image" data-interchange="[<?php echo $img_std[0]; ?>, (default)], [<?php echo $img_retina[0]; ?>, (retina)]" alt="<?php the_title(); ?>" />
            <noscript><img src="<?php echo $img_std[0]; ?>" alt="<?php the_title(); ?></noscript>
            <div class="details">
                <h3><?php the_title(); ?></h3>
                <p><?php echo get_the_excerpt(); ?></p>
                <p class="details-link mobile-only"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
                <p class="tiny button alignright"><i class="icon-play"></i> Play Video</p>
            </div>
            <a class="play-it desk-only" href="<?php echo $thisvid; ?>" title="{<?php the_title(); ?> - Watch Video}"><span></span></a>
    </li>

我认为最好，the click capture being used in this solution正朝着正确的方向发展。

一旦我知道如何添加回调并获得＆＃34;项目详细信息＆＃34;链接到功能，然后我应该能够应用相同的技术来传递社交媒体链接。一旦我有了初步的解决方案，这将为我做一个很好的练习练习。

我真的非常非常需要第一部分的帮助，因为我之前没有做过这样的事情，我对JS范围的理解可能比它更强大了= /

Answer 1

当你花费整个周末试图用艰难的方式做某事时，难道你不喜欢它，只用两行代码解决它吗？啊，甜蜜的经历。这就是它的胜利。

Magnific插件包含几个回调，您可以在the API documentation中详细了解（不够）详细信息。遗憾的是，部分文档不完整，如mentioned by the developer here。

如API中所述“在每个回调中，此是 $。magnificPopup.instance ”

未说明的是，为了访问实例下面的对象，您需要定位 this.st.el 而不是 this.el < / p>

/ cue灯泡图标图形

我的最终解决方案是将目标链接放在源中的数据属性中，如下所示：

data-target="<?php the_permalink(); ?>"

然后我在“打开”回调中访问了该目标，并将其动态应用到弹出窗口下的“详细信息链接”中：

callbacks: {
    open: function() {
        var $target = this.st.el.context.dataset.target;
        $('a.project-link').attr('href', $target);
    }
}

易豌豆。只要我在其他属性中编码了必要的数据，它对于所有社交媒体共享链接都是可重复的。

希望有一天有人偶然发现这一点，并发现它很有用。如果你这样做，请注意，这些解析数据都没有让SEO满意，所以如果你需要它，它应该包含在其他地方。

Answer 2

优秀的帖子。

您能举例说明如何实施社交媒体共享链接。我设法添加了Pinit和Facebook按钮，但我被困在Google +上。

您使用数据属性和回调的想法非常有趣。

需要将URL参数传递给灯箱脚本

2 个答案: