jQuery 从按钮单击启动fancyBox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16340629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Launch fancyBox from button click
提问by Aaron
Im stuck with a little problem with fancyBox v2.
我遇到了fancyBox v2的一个小问题。
I want to launch fancyBox on button click. Once clicked, it will load all the images from the list (from the src attribute of the ).
我想在按钮点击时启动fancyBox。单击后，它将加载列表中的所有图像（来自 的 src 属性）。
I have created this jsfiddle to show what I am trying to do: http://jsfiddle.net/fPFZg/
我创建了这个 jsfiddle 来展示我想要做什么：http: //jsfiddle.net/fPFZg/
jQuery(document).ready(function($) {
$('button').on('click', function() {
$.fancybox();
});
});
Can anybody see how this would be possible?
有人能看到这怎么可能吗？
回答by Ryan Burney
I had the same question and found the following to be a simpler method:
我有同样的问题，发现以下是一种更简单的方法：
HTML
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
jQuery
$('.fancybox').click(function () {
$.fancybox([
{ href : '#fancybox-popup-form' }
]);
});
CSS
CSS
.hidden { display: none; }
Further Reading
进一步阅读
Fancybox Docs(click the "API Methods" tab, then read up on the first method, which is called "Open").
Fancybox Docs（单击“API Methods”选项卡，然后阅读第一个方法，称为“Open”）。
回答by user2990320
you can use it like this:
你可以这样使用它：
$.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
});
回答by JFK
Your code doesn't work because this $.fancybox();doesn't tell fancybox what to open so does nothing.
您的代码不起作用，因为这$.fancybox();不会告诉fancybox 要打开什么，所以什么也不做。
What I would do, if you don't want to edit every link in your html, is:
如果您不想编辑 html 中的每个链接，我会做的是：
1). add an IDto the <ul>tag so we can use that selector like
1）。ID在<ul>标签中添加一个，以便我们可以使用该选择器，例如
<ul id="images">
2). bind fancybox to all <a>anchors that are child of your element #imageslike
2）。将fancybox 绑定到<a>元素的子元素的所有锚点，#images例如
var fancyGallery = $("#images").find("a"); // we cache the selector here
fancyGallery.attr("rel","gallery").fancybox({
type: "image"
});
noticethat we are adding a relattribute on the fly to all anchors so they will be part of the same gallery
请注意，我们正在向rel所有锚点添加一个属性，因此它们将成为同一个画廊的一部分
3). bind a clickevent to the button(I would recommend you to give it an IDtoo so it won't mess with other possible buttonsin the future) that triggers the existing fancybox script as above, so with this html
3）。将一个click事件绑定到触发现有的fancybox脚本的button（我建议你也给它一个，ID这样将来它就不会与其他可能的按钮混淆），所以使用这个html
<button id="fancyLaunch">Launch Fancybox</button>
use this script
使用这个脚本
$('#fancyLaunch').on('click', function() {
fancyGallery.eq(0).click(); // triggers a click
});
noticethat we used the method .eq()to launch the gallery from the firstitem (first indexin javascript is always 0)
请注意，我们使用了.eq()从第一项启动图库的方法（indexjavascript 中的first始终为 0）
Summarizing, your whole script may look like this :
总而言之，您的整个脚本可能如下所示：
jQuery(document).ready(function($) {
var fancyGallery = $("#images").find("a");
fancyGallery.attr("rel","gallery").fancybox({
type: "image"
});
$('#fancyLaunch').on('click', function() {
fancyGallery.eq(0).click();
});
});
See JSFIDDLE
回答by Tohid Dadashnezhad
Your html:
你的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>
Your jQuery:
你的jQuery：
$(document).ready(function() {
$('button').on('click', function() {
$.fancybox($("a.fancybox"));
});});
