我正在尝试从我拥有的函数中打开一个 fancybox - 简而言之，我的 HTML 代码如下所示；
<a href="#modalMine" onclick="myfunction(this); return false;">
click
</a>
我的函数的一部分看起来像这样；
function myfunction(me) {
$(me).fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
});
}
上述内容在 IE 中有效，但在 FireFox 或 Chrome 中无效 - 知道如何解决这个问题吗？我知道原因之一是触发另一个链接，但我希望可以有另一种解决方案。
如果您想在调用 javascript 函数时简单地打开一个 fancybox。也许在您的代码流中而不是单击的结果。操作方法如下：
function openFancybox() {
$.fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
'href' : '#contentdiv'
});
}
这将使用“contentdiv”创建框并打开它。
既然您使用的是 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;
});
});
但是，我没有特别看到在点击时设置 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);
});
您根本不必添加自己的
click$(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
});
});
完成。 Fancybox 已经绑定了一个打开盒子的
click稍后，如果您想以编程方式打开该框，请在该元素上引发
click$('a[href="#modalMine"]').click();
您不必触发点击事件，您可以使用 fancybox 类型作为 ajax 来完成。
$.fancybox.open({
href: "http://........",
type: 'ajax'
});
使参数对象从
<a>open 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);
});
答案似乎有点过于复杂。我希望我没有误解这个问题。
如果您只是想通过点击“A”标签来打开一个精美的盒子。只需将您的 html 设置为
<a id="my_fancybox" href="#contentdiv">click me</a>
您的盒子的内容将位于 ID 为“contentdiv”的 div 内，并且在您的 javascript 中您可以像这样初始化 fancybox：
$('#my_fancybox').fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
});
当您的锚标记被单击时，这将显示一个包含“contentdiv”的精美框。
这是根据作者的 Tips & Tricks 博客文章编写的工作代码，请将其放入准备好的文档中：
$("#mybutton").click(function(){
$(".fancybox").trigger('click');
})
这会触发当前显示的图像或内容的较小版本，就像您手动单击它一样。它避免再次初始化 Fancybox，而是保留文档中初始化时使用的参数。如果您需要在使用单独的按钮打开盒子时与单击盒子时执行不同的操作，则您将需要参数，但对于许多人来说，这将是他们所寻找的。
function myfunction(){
$('.classname').fancybox().trigger('click');
}
它对我有用..
...
<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
});
});
}
...
如果 jQuery.fancybox.open 不可用（在 fancybox 1.3.4 上），您可能需要使用 semafor 来解决递归问题：
<a href="/index.html" onclick="return myfunction(this)">click me</a>
<script>
var clickSemafor = false;
myfunction(el)
{
if (!clickSemafor) {
clickSemafor = true;
return false; // do nothing here when in recursion
}
var e = jQuery(el);
e.fancybox({
type: 'iframe',
href: el.href
});
e.click(); // you could also use e.trigger('click');
return false; // prevent default
}
</script>
在 v4 中，您触发打开它的方式如下：
Fancybox.show([{ src: "#modalForm" }]);
在旧版本中
$.fancybox.open({src: '#modalForm', type: 'inline'});