1

我目前正在尝试将社交分享按钮集成到我的精美图片弹出窗口中。Fancybox 创建了一个JsFiddle来演示如何做到这一点……但我正在使用“帮助器”> jquery.fancybox-buttons.js（请参见此处）。我如何结合这两种自定义解决方案，以便当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>
4

1 回答 1

2

首先，您需要加载 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。

于 2013-02-05T21:39:36.037 回答