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

Question

我有一个页面，我需要在 Magnific lightbox 中发布视频，但在它下面我添加了一个“项目详细信息”链接以及社交媒体图标。它看起来像这样：

插件支持回调：

// 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 中创建帖子循环时，我需要从页面中获取永久链接并将其作为唯一变量传递给正确的实例。不幸的是，这有点超出我的想象，因为我的 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 正朝着正确的方向前进。

一旦我知道如何添加回调并获得“项目详细信息”链接以运行，那么我应该能够应用相同的技术来传递社交媒体链接。一旦我有了初步的解决方案，这对我来说是一个很好的练习。

我真的，真的，真的需要在第一部分得到帮助，因为我以前没有这样做过，而且我对 JS 作用域的理解可能比现在强得多 =/

Answer 1

当你整个周末都在努力做某事，只用两行代码解决它时，你不就是喜欢它吗？啊，甜蜜的经历。这样就赢了。

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

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

没有说的是，为了访问实例下面的对象，您需要定位 this.st.el 而不是 this.el

/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+ 上。

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