Question

我目前正在尝试将社交分享按钮集成到我的fancybox图像弹出窗口中。 Fancybox创建了一个JsFiddle来演示如何做到这一点......但我正在使用“帮助者”＆gt; jquery.fancybox-buttons.js（see here）。我如何结合这些自定义解决方案，以便当弹出fancybox图像时，它下面有社交分享按钮（就像在JSFiddle＆amp;中有按钮助手一样？

以下是我的网页用于Fancybox图库的HTML的示例：

<div id="painting" class="content-pages">

<p>
    <a class="fancybox-buttons" href="painting/2011_b.jpg" data-fancybox-group="paintings" title="Sed vel sapien vel sem uno"><img src="painting/2011_s.jpg" alt="" /></a>

    <a class="fancybox-buttons" href="painting/beginnings-3_b.jpg" data-fancybox-group="paintings" title="Tegan Whitesel - Beginnings III"><img src="painting/beginnings-3_s.jpg" alt="" /></a>

    <a class="fancybox-buttons" href="painting/t-beginnings-i_b.jpg" data-fancybox-group="paintings" title="Tegan Whitesel - Beginnings I "><img src="painting/t-beginnings-i_s.jpg" alt="" /></a>

    <a class="fancybox-buttons" href="painting/t-beginnings-ii_b.jpg" data-fancybox-group="paintings" title="Tegan Whitesel - Beginnings II"><img src="painting/t-beginnings-ii_s.jpg" alt="" /></a>
</p>
</div>

Answer 1

首先，您需要加载js和css按钮的帮助文件（位于下载的helpers子目录中。）

第二次，将按钮帮助选项添加到自定义脚本。您可能需要禁用默认的close和arrows按钮，以便仅使用按钮帮助程序。

所以你必须添加的代码应该是：

// other options
helpers: {
    title: {
        type: 'inside'
    }, //<-- add a comma to separate the following option
    buttons: {} //<-- add this for buttons
},
closeBtn: false, // disable default close
arrows: false    // disable default arrows

查看相同的修改后的 JSFIDDLE 。

将社交分享按钮添加到使用按钮助手的Fancybox

1 个答案: