Javascript 从功能打开fancybox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5094233/
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
Open fancybox from function
提问by keysersoze
I am trying to open a fancybox from a function I have - in short my HTML code looks like this;
我正在尝试从我拥有的函数中打开一个花式框 - 简而言之，我的 HTML 代码如下所示；
<a href="#modalMine" onclick="myfunction(this); return false;">
click
</a>
and a part of my function looks like this;
我的功能的一部分看起来像这样；
function myfunction(me) {
$(me).fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
});
}
The above works in IE but not in FireFox or Chrome - any idea how I can fix this? I know that one why is to trigger another link, but I hope another solution is possible.
以上适用于 IE，但不适用于 FireFox 或 Chrome - 知道如何解决这个问题吗？我知道为什么要触发另一个链接，但我希望另一种解决方案是可能的。
采纳答案by Matt Ball
Since you're using jQuery, stop binding event handlers in your HTML, and start writing unobtrusive JavaScript.
由于您使用的是 jQuery，请停止在 HTML 中绑定事件处理程序，并开始编写不引人注目的 JavaScript。
$(document).ready(function ()
{
function myfunction(me)
{
$(me).fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true // remove the trailing comma!!
}).click();
// fire the click event after initializing fancybox on this element
// this should open the fancybox
}
// use .one() so that the handler is executed at most once per element
$('a[href=#modalMine]').one('click', function ()
{
myfunction(this);
return false;
});
});
However, I don't particularly see a reason for setting up the fancybox on click. You could just do this instead:
但是，我没有特别看到在点击时设置fancybox 的原因。你可以这样做：
$(document).ready(function ()
{
function myfunction()
{
// note the use of "this" rather than a function argument
$(this).fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true
});
}
$('a[href=#modalMine]').each(myfunction);
});
回答by Daniel
If you'd like to simply open a fancybox when a javascript function is called. Perhaps in your code flow and not as a result of a click. Here's how you do it:
如果您想在调用 javascript 函数时简单地打开一个花哨的盒子。也许在您的代码流中，而不是因为点击。这是你如何做到的：
function openFancybox() {
$.fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
'href' : '#contentdiv'
});
}
This creates the box using "contentdiv" and opens it.
这将使用“contentdiv”创建框并打开它。
回答by Adrian Smith
What you need is:
你需要的是：
$.fancybox.open({ .... });
See the "API methods" section at the bottom of here:
请参阅此处底部的“API 方法”部分：
回答by Felix Kling
You don't have to add you own clickevent handler at all. Just initialize the element with fancybox:
您根本不必添加自己的click事件处理程序。只需使用fancybox初始化元素：
$(function() {
$('a[href="#modalMine"]').fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true // as MattBall already said, remove the comma
});
});
Done. Fancybox already binds a clickhandler that opens the box. Have a look at the HowTo section.
完毕。Fancybox 已经绑定了一个click打开盒子的处理程序。看看 HowTo 部分。
Later if you want to open the box programmatically, raise the clickevent on that element:
稍后，如果您想以编程方式打开该框，请click在该元素上引发事件：
$('a[href="#modalMine"]').click();
回答by Burcu Co
You do not have to trigger a click event, you can do it with fancybox type as ajax.
您不必触发点击事件，您可以使用fancybox 类型作为ajax 来完成。
$.fancybox.open({
href: "http://........",
type: 'ajax'
});
回答by Abdennour TOUMI
Make argument object extends from <a>,
and use openfunction of fancybox in click event via delegate.
使参数对象从 扩展<a>，并open通过委托在单击事件中使用fancybox 的功能。
var paramsFancy={
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
'href' : '#contentdiv'
};
$(document).delegate('a[href=#modalMine]','click',function(){
/*Now you can call your function ,
you can change fields of paramsFancy via this function */
myfunction(this);
paramsFancy.href=$(this).attr('href');
$.fancybox.open(paramsFancy);
});
回答by Henrik Erlandsson
Here is working code as per the author's Tips & Tricksblog post, put it in document ready:
这是作者的提示和技巧博客文章中的工作代码，将其放入文档中：
$("#mybutton").click(function(){
$(".fancybox").trigger('click');
})
This triggers the smaller version of the currently displayed image or content, as if you had clicked on it manually. It avoids initializing the Fancybox again, but instead keeps the parameters you initialized it with on document ready. If you need to do something different when opening the box with a separate button compared to clicking on the box, you will need the parameters, but for many, this will be what they were looking for.
这会触发当前显示的图像或内容的较小版本，就像您手动单击它一样。它避免再次初始化 Fancybox，而是将您在文档中初始化它的参数保持在就绪状态。与单击框相比，如果您在使用单独的按钮打开框时需要做一些不同的事情，您将需要参数，但对于许多人来说，这将是他们正在寻找的。
回答by Daniel
The answers seems a bit over complicated. I hope I didn't misunderstand the question.
答案似乎有点过于复杂。我希望我没有误解这个问题。
If you simply want to open a fancy box from a click to an "A" tag. Just set your html to
如果您只是想打开一个从点击到“A”标签的精美框。只需将您的 html 设置为
<a id="my_fancybox" href="#contentdiv">click me</a>
The contents of your box will be inside of a div with id "contentdiv" and in your javascript you can initialize fancybox like this:
你的盒子的内容将在一个id为“contentdiv”的div中，在你的javascript中你可以像这样初始化fancybox：
$('#my_fancybox').fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
});
This will show a fancybox containing "contentdiv" when your anchor tag is clicked.
当你的锚标签被点击时，这将显示一个包含“contentdiv”的fancybox。
回答by Prabhagaran
function myfunction(){
$('.classname').fancybox().trigger('click');
}
It works for me..
这个对我有用..
回答by Олег Стасюкевич
...
<div class="img_file" style="background-image: url('/upload/test/14120330.jpg')" data-img="/upload/test/14120330.jpg"></div>
<div class="img_file" style="background-image: url('/upload/test/14120330.jpg')" data-img="/upload/test/14120330.jpg"></div>
...
if($(".img_file[data-img]").length) {
var imgs_slider_img = [];
$(".img_file[data-img]").each(function(i) {
imgs_slider_img.push({
href:$(this).attr('data-img')
});
$(this).attr('data-index-img', i);
}).on("click", function(e) {
e.preventDefault();
$.fancybox.open(imgs_slider_img, {
index: $(this).attr('data-index-img'),
padding: 0,
margin: 0,
prevEffect: 'elastic',
nextEffect: 'elastic',
maxWidth: '90%',
maxHeight: '90%',
autoWidth: true,
autoHeight: true
});
});
}
...
