FancyBox › 将全屏切换按钮添加到动态图库答案

【问题标题】：FancyBox › Adding fullscreen toggle button to dynamic galleryFancyBox › 将全屏切换按钮添加到动态图库
【发布时间】：2015-09-18 09:34:37
【问题描述】：

我有一系列标签，每个标签都在一个列表项中，每个项目都会启动一个画廊。 'href' 值引用一个 javascript 文件 (href="javascript:;")。我不知道如何为画廊添加全屏切换按钮，其中每个单击的项目都会启动另一个图像子画廊（底部带有缩略图）。附有画廊当前外观的图像。

这是我在 HTML::: 中的列表项的示例

      ...<ul>
      <li><a id="ui_1" href="javascript:;">
          <img src="img/ui_1.jpg" alt="" />
      </a>
      </li>...

这里是一个 a 标签对应的 javascript。（我已经有正常工作的助手：缩略图）[![在此处输入图像描述][1]][1]

            $("#ui_1").click(function() {
            $.fancybox.open([
            {
                href : 'img/ui_1a.jpg',
                // title : 'My title'
            }, {
                href : 'img/ui_1b.jpg',
                // title : 'My title'
            }, {
                href : 'img/ui_1C.jpg',
                // title : 'My title'
            }, {
                href : 'img/ui_1d.jpg',
                // title : 'My title'
            }, {
                href : 'img/ui_1e.jpg',
                // title : 'My title'
            }, {
                href : 'img/ui_1f.jpg',
                // title : 'My title'
            },


            ], {
                helpers : {
                    thumbs : {
                        width: 75,
                        height: 50
                    }
                }
            });
         });

【问题讨论】：

标签： jquery fancybox

【解决方案1】：

如果您尝试使用fancybox buttons 扩展功能（包括全屏切换按钮），那么只需将其添加到helpers 选项中，例如

helpers : {
    thumbs : {
        width: 75,
        height: 50
    },
    buttons : {}
}

当然，你还得加载正确的js和css文件

<link rel="stylesheet" href="{your correct path}/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="{your correct path}/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

【讨论】：