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 Docs（点击“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）。在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事件绑定到button（我建议你也给它ID，以便将来不会弄乱其他可能的按钮）如上所述触发现有的fancybox脚本，所以使用这个html

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

使用此脚本

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

通知我们使用方法.eq()从第一个项启动图库（javascript中的第一个index始终为0）< / p>

总结一下，您的整个脚本可能如下所示：

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

Answer 4

你的HTML：

<ul>
<li>
    <a href="http://placekitten.com/400/400" title="" class="fancybox">
        <img src="http://placekitten.com/100/100" alt="" />
    </a>
</li>

 <li>
    <a href="http://placekitten.com/400/400" title="" class="fancybox">
        <img src="http://placekitten.com/100/100" alt="" />
    </a>
</li>

<li>
    <a href="http://placekitten.com/400/400" title="" class="fancybox">
        <img src="http://placekitten.com/100/100" alt="" />
    </a>
</li>

<li>
    <a href="http://placekitten.com/400/400" title="" class="fancybox">
        <img src="http://placekitten.com/100/100" alt="" />
    </a>
</li>

你的jQuery：

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

从按钮单击启动fancyBox

4 个答案:

HTML

的jQuery

CSS

进一步阅读