FancyBox>将全屏切换按钮添加到动态图库

时间:2015-09-17 21:47:36

标签: jquery fancybox

我有一系列标签,每个标签都在一个列表项中,每个项目都会启动一个图库。 'href'值引用javascript文件(href =“javascript:;”)。我无法弄清楚如何为图库添加全屏切换按钮,其中每个单击的项目启动另一个子图库(底部有缩略图)。有一个图像附加了画廊目前的样子。

以下是HTML :::

中我的列表项的示例
      ...<ul>
      <li><a id="ui_1" href="javascript:;">
          <img src="img/ui_1.jpg" alt="" />
      </a>
      </li>...

这是一个标签的相应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
                    }
                }
            });
         });

1 个答案:

答案 0 :(得分:0)

如果您尝试使用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>