我有以下fancybox代码:
$('.fancybox').fancybox({
'autoScale' : false,
'href' : $('.fancybox').attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
问题是我在页面上有20个不同的A标签id,我希望fancybox href属性获取被点击元素的id,即触发事件的id.
我尝试了几件事,但都没有奏效!
'href' : $(this).attr('id'),
'href' : $(this.element).attr('id'),
这看起来很简单,但任何时候我插入'this'或类似的东西都没有用.
这是我的问题,这是我的示例代码.
HTML:
<a class="fancybox" rel="group" href="img1.jpg"> <img src="img1_thumb.jpg"> </a>
<a class="fancybox" rel="group" href="img2.jpg"> <img src="img2_thumb.jpg"> </a>
JS:
var header = '<img id="w" src="logo.gif">';
$('.fancybox').fancybox({
afterLoad: function() {
this.wrap.prepend(header);
}, // afterLoad
}); //fancybox
$('#w').click(function() {console.log('clicked');});
如果单击缩略图以启动FancyBox,afterLoad则会放入标题,但是当您单击图像并观察控制台时,您什么也得不到.
思考？我正在尝试使用FancyBox的$.fancybox.close()方法,但是如果我无法触发click事件,我将被迫使用内联,我不想为了不使用JS inline而这样做.
所以我有一个图像库和一些链接.这样的事情
<a href="/images/1.jpg" rel="1">title</a>
<a href="/images/1.jpg" rel="1">link to first image</a>
<a href="/images/2.jpg" rel="1">link to second image</a>
<a href="/images/3.jpg" rel="1">link to third image</a>
这导致第一张图像在fancybox中复制.像这样:http: //filebeam.com/2dec41a1820f2525f040424578c4421c.jpg
如何在不重复的情况下创建指向同一对象的多个链接？
我有一个包含Fancybox和Pinterest pin按钮的页面.两者似乎都应该工作,但是当我关闭Fancybox叠加层时,我看到以下JavaScript错误:
Uncaught TypeError: Cannot read property 'data-pin-aha' of null
我的Pinterest按钮呈现如下:
<a href="http://pinterest.com/pin/create/button/?url=http://www.mywebsite.com/somepage&media=http://www.mywebsite.com/content/images/2c63a4e0-3b65-4464-934c-77f2a7166090-Dim459X612.jpg&description=some description" class="PIN_1354830754034_pin_it_button PIN_1354830754034_pin_it_beside PIN_1354830754034_hazClick" data-pin-aha="button_pinit" data-pin-config="beside"><span class="PIN_1354830754034_pin_it_button_count" id="PIN_1354830754034_pin_count_0"><i></i>3</span></a>
只是为了好玩,我的Pinterest按钮与这个异步加载:
(function () {
window.PinIt = window.PinIt || { loaded: false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load() {
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
if (window.location.protocol == "https:")
s.src = "https://assets.pinterest.com/js/pinit.js";
else
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
和我的Fancybox链接: …
一段时间后,我仍然遇到在FancyBox2中调整iframe高度的问题.我在父母那里打电话给我:
$(document).ready(function() {
$('.fancybox').fancybox();
$('.showframe').fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
beforeShow: function(){
this.width = ($('.fancybox-iframe').contents().find('body').width());
this.height = ($('.fancybox-iframe').contents().find('body').height());
},
afterClose : function() {
location.reload();
return;
},
onUpdate : { autoHeight: true},
helpers : {
overlay : {closeClick: false}
}
});
});
当iframe打开时它可以正常工作,但在iframe中我有一个脚本,允许用户上传图像并显示上传图像的预览,因此iframe的高度会发生变化(取决于上传的照片数量),但是FancyBox不会"调整高度".我在我的"子"iframe中使用它来触发调整大小:
...some functions here that handle image upload and image display...
parent.$.fancybox.scrollBox();
现在这仅适用于Firefox,而Chrome和IE将显示滚动条而不是调整iframe高度.有没有办法使这种跨浏览器兼容？
编辑:我得到这个代码在所有浏览器中工作:
parent.$('.fancybox-inner').height($('#wrap').height()+20);
但问题是iframe不会居中(它只会调整高度,但不会重新居中于屏幕).我已经尝试了parent.$.fancybox.center();, parent.$.fancybox.reize();而且parent.$.fancybox.update();什么不是,但这只适用于Firefox.
我发现(纯粹的运气)这实际上适用于所有浏览器(甚至是IE8):
parent.$('.fancybox-inner').height($('#wrap').height()+30);
parent.$.fancybox.reposition();
当它的内容比视口高时,我试图让我的fancyBox在高度上扩展.这样,用户使用浏览器的滚动条滚动其内容.相反,我的fancyBox不断获得自己的滚动条.
我只是使用内联内容,而不是iframe.这些是我设定的选项:
$('.fancybox').fancybox({
autoSize: 'false',
fitToView: 'false',
maxWidth: 940
});
添加scrolling: 'no'截止底部的内容.明确定义一个非常高的高度,但我想要动态确定高度.
我正试图让YouTube嵌入在Fancybox中打开.我基于Fancybox页面上的代码 - http://fancyapps.com/fancybox
这是我有的:
<a class="various fancybox" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>
然后在 call.js
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
})
但每次点击链接时,它都会在同一个窗口中全屏显示YouTube视频...而不是在Fancybox中
我已经检查以确保我的Js文件正在加载它们,我在FF控制台中也没有错误.
谁能看到我做错了什么？
我在这里发布问题和解决方案，以帮助遇到过与我相同的问题的任何人。
<div>我的页面上有一个，我希望允许用户通过单击图标来“放大”。该<div>不会是隐藏的。
我使用fancyBox（fancyBox主页）将其显示<div>为一种模式窗口。我在其他灯箱类型插件上使用fancyBox的原因是，它不复制的内容<div>，而是将其移动，因此所有表单元素等都可以继续工作。问题在于，在关闭fancyBox窗口后，<div>会隐藏在主页上。
解决方案：
我用的是fancyBox 2.1.2。
我使用了JFKDIAZ在github（https://github.com/fancyapps/fancyBox/issues/103）上发布的解决方案，以确保在关闭fancyBox窗口后div返回到其父级。
然后，我使用了jquery show功能再次显示div内联。
我的初始化花式框的代码如下。注意beforeLoad和afterClose函数，以标识父级<div>，并将其<div>返回给父级（这要感谢JFKDIAZ）。请注意添加再次$(inlineTarget).show();显示，<div>以便它不会消失。其余的是fancyBox的标准初始化。
$(document).ready(function() {
$(".various").fancybox({
beforeLoad: function() {
inlineTarget = this.href;
parentNodename = $(inlineTarget).parent().get(0).tagName.toLowerCase();
$(inlineTarget).parent(parentNodename).addClass("returnTo");
},
afterClose: function() {
$(inlineTarget).appendTo(".returnTo");
$(".returnTo").removeClass("returnTo");
$(inlineTarget).show();
},
maxWidth: 880,
maxHeight: 600,
fitToView: false,
width: '70%',
height: '70%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});
});
我的代码<div>以及<div> …
我试图出来的fancybox 2,我已经去除了arrows,closebutton和loop,并启用nextclick.我想要超级干净,易于使用.
我现在遇到的问题是我点击图库,但是当我点击最后一张幻灯片时,我希望它关闭,而它没有 - 点击图片不会做任何事情.
我的猜测答案是通过类添加自我关闭动作,如下所示:
<a class="gallery1 closeaction" href=...
但我真的不知道.我认为这种事情会在演示中,但我找不到类似的东西.
救命？