向使用按钮助手的Fancybox添加社交共享按钮

Question

我目前正在尝试将社交分享按钮集成到我的fancybox图像弹出窗口中。Fancybox已经创建了一个JsFiddle来演示如何使用“done...but”> jquery.fancybox-buttons.js (see here)来实现。我如何组合这两个自定义解决方案，以便当fancybox图像弹出时，它下面有社交分享按钮(就像在JSFiddle中一样&有按钮助手吗？

下面是我的页面的Fancybox Gallery的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按钮的helper文件(位于下载的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

查看相同的修改后的。