我在开发站点上实现了fancybox2.
当我使用fancybox(点击链接等)时,整个html会在它后面移动 - 然后转到顶部.我在另一个演示中工作正常,但是当我将相同的代码拖到这个项目时,它会跳到顶部.不仅有内联div的链接,还有简单的图库.
有没有人经历过这个？
Fancybox打破了新的jQuery v1.9.0.
它影响Fancybox v1.3.4及以下 - 和 - v2.1.3及以下.
显示的错误是:
v1.3.4:
Timestamp: 15/01/2013 10:03:28 AM
Error: TypeError: b.browser is undefined
Source File: ...fancybox/jquery.fancybox-1.3.4.pack.js
Line: 18
......其他错误
Uncaught TypeError: Cannot read property 'msie' of undefined jquery.fancybox-1.3.4.pack.js:18
Uncaught TypeError: Object [object Object] has no method 'fancybox'
在v2.1.3中:
Timestamp: 15/01/2013 10:09:58 AM
Error: TypeError: $.browser is undefined
Source File: h.../fancybox2.1.3/jquery.fancybox.js
Line: 139
如果你用它来调用jQuery:
<script src="http://code.jquery.com/jquery-latest.js"></script>
... 任何现有的fancybox实现都会失败!
我正在使用Unsemantic框架在HTML5中创建一个单页网站,链接到Fancybox 2中显示的隐藏div,并且无法正确地调整所有不同类型的内容.
有三个div - 一个包含div中的文本,包含在隐藏的div中,因此我可以相应地操作内容,一个包含图像库,另一个包含YouTube视频的链接.我创建了一个隐藏类,我通过CSS调用它:
文本部分的HTML:
<a class="fancybox" href="#bio">...blah blah blah...
...then later on...<article class="hidden" id="bio">
视频部分的HTML:
<a class="fancybox fancybox.iframe" href="https://www.youtube.com/video">Videos</a>
CSS:
.hidden {
overflow:hidden;
display:none;
}
在<head>标签内部调用Fancybox :
<script type="text/javascript">
$(document).ready(function() {
$("#fancybox-gallery").click(function() {
$.fancybox.open([
{
href : "image_1.jpg",
}, {
href : "image_2.jpg",
}, {
href : "image_3.jpg"
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
使用Fancybox 2默认值(autoSize:true,autoWidth:false和autoHeight:false …
我们使用fancybox2来显示图像.一切都很好,但是当更大的图像显示在fancybox中时,后面的页面会滚动到顶部.关闭fancybox后,用户必须向下滚动到打开盒子的位置.fancybox2站点上的示例不显示此行为.我无法找到,实现这一目标的区别在哪里.
fancyOptions = {
type: 'image',
closeBtn: false,
autoSize: false,
scrolling: 'no',
type: 'image',
padding: [10,10,10,10],
beforeLoad: function(){
this.title = getTitle(this);
this.href = $(this.element).closest('a').attr('href');
},
helpers: {
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.7)'
},
},
title: {
type: 'inside'
}
}
};
我们使用fancybox2作为require.js中的模块..fancybox()调用在$(document).ready块中.
那里有2个滚动条,我用css隐藏了一个
.fancybox-overlay {
overflow: hidden !important;
}
我正在寻找FancyBox 2的替代品.它应该是轻量级的,移动友好的(使用硬件加速的css过渡),并且可以免费使用(FancyBox不是).有什么好的选择？
我正试图摧毁Fancybox.我没有找到任何方法在文档中这样做.如何在初始化后销毁它？
这不起作用:
$("a").unbind('fancybox').unbind('click');
测试代码:http://jsfiddle.net/martinba/yy3cw/2/
我使用当前版本2.1.4.
我在使用fancybox在IE中的iframe中加载PDF时遇到问题.当我点击链接时,我得到了gif加载器,它只是永远旋转.控制台或页面上没有错误或类似的错误.所有版本的IE都会出现问题.所有其他浏览器工作正常.此外,PDF是内部文件.
这是一些代码:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href=<?php echo base_url("templates/style1/css/jquery.fancybox.css") ?> />
<script src=<?php echo base_url("js/jquery-1.7.2.min.js") ?> type="text/javascript"></script>
<script type="text/javascript" src="../js/jquery.fancybox.js"></script>
</head>
<body>
<a class="fancybox-media italic" href="../contract_docs/dummy.pdf" >Test Doc</a>
</body>
</html>
JS
$(document).ready(function(){
/* fancybox handler */
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
autoSize: true,
type : 'iframe'
});
});
编辑: 我也试过升级jQuery,无济于事.
编辑:这是一个jsFiddle,非常简单,在我的IE浏览器中不起作用.
在ipad/iphone上,叠加层显示在fancybox中的媒体顶部,即整个页面都填充了包含fancybox内容的叠加层.我有什么想法可以解决这个问题？
此外,我有jwplayer在fancybox中使用html5播放视频,而不是Flash,但问题是视频顶部出现了叠加层,因此当我触摸播放按钮时,fancybox消失...
请参阅我之前关于我在fancybox中为jos实现jwplayer的问题,在jwplayer中的fancybox没有在ipad/iphone上播放
编辑:
有趣的是,如果我注释掉这块css,我可以点击ipad上的fancybox视频而不会消失并播放视频:
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 9999;
background: url('fancybox_overlay.png');
}
虽然fancybox在iPhone和iPad上运行良好,但桌面设备的显示效果还不尽如人意......
http://xinhsangchanh.com/demos/FancyBoxDemo.html
这是我的演示页面展示如何使用Fancybox 2制作"Facebook Photo Viewer"
jQuery&Fancybox 2
<script src="http://xinhsangchanh.com/Scripts/jquery/js/jquery.js"></script>
<script src="http://xinhsangchanh.com/Scripts/fancybox/jquery.fancybox.pack.js"></script>
<link href="http://xinhsangchanh.com/Scripts/fancybox/jquery.fancybox.css" rel="stylesheet" />
CSS
<link href="http://xinhsangchanh.com/App_Themes/Web/css/global.css" rel="stylesheet" />
Facebook API
<script type="text/javascript">
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=339062419468905";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Javascript制作"Facebook照片查看器"
<script type="text/javascript">
var mainUrl = location.href;
var photoDetailUrl;
var fancyBoxIsOpen = false;
var isChrome = window.chrome;
var is_fullscreen = false;
var is_ff = function () { return …我有一个包含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链接: …
fancybox-2 ×10
jquery ×8
fancybox ×6
javascript ×3
css ×1
facebook ×1
iframe ×1
jwplayer ×1
open-source ×1
pinterest ×1