从按钮单击启动fancyBox

Question

我遇到了fancyBox v2的一个小问题.

我想在按钮点击时启动fancyBox.点击后,它将加载列表中的所有图像(来自的src属性).

我创建了这个jsfiddle来展示我想要做的事情:http://jsfiddle.net/fPFZg/

jQuery(document).ready(function($) {
    $('button').on('click', function() {
        $.fancybox(); 
    });
});

任何人都可以看到这是可能的吗？

Answer 1

我有同样的问题,发现以下是一个更简单的方法:

HTML

    <button class="fancybox" value="Open Fancybox">Open Fancybox</button>
    <div class="hidden" id="fancybox-popup-form">
        (your Fancybox content goes in here)
    </div>

jQuery的

    $('.fancybox').click(function () {
        $.fancybox([
            { href : '#fancybox-popup-form' }
        ]);
    });

CSS

    .hidden { display: none; }

进一步阅读

Fancybox文档(单击"API方法"选项卡,然后阅读第一个方法,称为"打开").

Answer 2

你可以像这样使用它:

    $.fancybox.open([
    {
        href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
        title : '1st title'
    },
    {
        href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
        title : '2nd title'
    }    
], {
    padding : 0   
});

Answer 3

您的代码不起作用，因为它$.fancybox();没有告诉 fancybox 要打开什么，所以什么也不做。

如果您不想编辑 html 中的每个链接，我会做的是：

1）。将 an 添加ID到<ul>标签中，以便我们可以使用该选择器，例如

<ul id="images">

2）。将 fancybox 绑定到<a>元素子元素的所有锚点，#images例如

var fancyGallery = $("#images").find("a"); // we cache the selector here
fancyGallery.attr("rel","gallery").fancybox({
    type: "image"
});

请注意，我们正在rel向所有锚点动态添加一个属性，以便它们成为同一图库的一部分

3）。将一个click事件绑定到触发现有 fancybox 脚本的事件button（我建议您也给它一个，这样将来ID就不会与其他可能的按钮混淆），触发现有的 fancybox 脚本，如上所述，因此使用此 html

<button id="fancyLaunch">Launch Fancybox</button>

使用这个脚本

$('#fancyLaunch').on('click', function() {
    fancyGallery.eq(0).click(); // triggers a click
});

请注意，我们使用该方法从第一.eq()项启动图库（javascript 中的第一项始终为 0）index

总而言之，您的整个脚本可能如下所示：

jQuery(document).ready(function($) {
    var fancyGallery = $("#images").find("a");
    fancyGallery.attr("rel","gallery").fancybox({
        type: "image"
    });
    $('#fancyLaunch').on('click', function() {
        fancyGallery.eq(0).click(); 
    });
});

参见JSFIDDLE