从按钮单击启动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）。 在<ul>标签中添加一个ID ，以便我们可以使用该选择器

<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）

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

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")); 
});});