5

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

我想在按钮单击时启动 fancyBox。单击后，它将加载列表中的所有图像（来自 src 属性）。

我创建了这个 jsfiddle 来展示我想要做什么：http: //jsfiddle.net/fPFZg/

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

谁能看到这怎么可能？

4

4 回答 4

8

我有同样的问题，发现以下是一种更简单的方法：

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 方法”选项卡，然后阅读第一种方法，称为“打开”）。

于 2015-05-13T16:27:04.717 回答
5

你可以像这样使用它：

    $.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   
});
于 2013-11-14T03:02:42.117 回答
1

您的代码不起作用，因为这$.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()从第一项启动画廊（indexjavascript 中的 first 始终为 0）

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

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

于 2013-05-02T17:06:34.147 回答
1

你的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")); 
});});
于 2016-04-30T09:15:15.103 回答