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实现都会失败!
我在Jquery FencyBox中成功运行了Youtube视频.但是,我无法在Jquery FencyBox中运行本地MP4视频文件(此文件存在于文件夹中)
请告诉我如何在JQUERY FENCYBOX中运行本地视频文件(与我在FencyBox中运行youtube视频相同).
以下是我正在使用的代码:
1).我正在使用这些文件(插件):
jquery.fancybox-1.3.4.js和jquery.fancybox-1.3.4.css
2).在Fancy Box中成功播放Youtube上的视频:
<div class="main">
<h1>VIDEO Playing From YOUTUBE</h1>
<p><a href="http://www.youtube.com/embed/WAZ5SmJd1To" class="youtube iframe">Watch this amazing YouTube video</a></p>
</div>
3).现在我无法在Fancy Box中播放本地视频文件MP4:
<div class="main">
<h1>Local Video File Playing</h1>
<p><a href="example/video.mp4" class="youtube iframe" > My Local Video in Example Folder</a></p>
</div>
请建议/指导/帮助.
我们使用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;
}
当我关闭Fancy Box弹出框架时,我希望我的父页面刷新.我在弹出窗口中有一个登录页面,所以我需要刷新父页面以在Fancy Box关闭时显示新的登录状态.
我可以在没有iFrame代码的情况下使用它:
<script type="text/javascript">
$(document).ready(function() {
$("a.iframeFancybox1").fancybox({
'width': 800,
'height': 450,
'onClosed': function() {
parent.location.reload(true);
;}
});
});
</script>
但我无法使用iFrame代码:
<script type="text/javascript">
$(document).ready(function() {
$('a.iframeFancybox1').fancybox({
'width': 800,
'height': 450,
'type' : 'iframe'
'onClosed': function() {
parent.location.reload(true);
;}
});
});
</script>
问题与这条线有关:
'type' : 'iframe'?
一旦我添加该行,弹出窗口就会停止工作.
任何人都可以建议一个解决方案,我如何iframe在Fancy Box中弹出一个弹出框,并在框关闭时仍然可以刷新父页面？谢谢!
我在使用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浏览器中不起作用.
我正在尝试与pikachoose集成时创建一个fancybox画廊.我有一切工作,除了我无法显示箭头或画廊工作时fancybox弹出显示.
这是我的HTML:
<ul class="jcarousel-skin-pika" id="pikame">
<li><a rel="gallery" href="/image1.jpg"><img alt="large image" src="/image1.jpg" /></a></li>
<li><a rel="gallery" href="/image2.jpg"><img alt="large image" src="/image2.jpg" /></a></li>
<li><a rel="gallery" href="/image3.jpg"><img alt="large image" src="/image3.jpg" /></a></li>
<li><a rel="gallery" href="/image4.jpg"><img alt="large image" src="/image4.jpg" /></a></li>
</ul>
这是我的js:
jQuery(document).ready(function () {
var a = function (self) {
self.anchor.fancybox({
'arrows': 'true'
});
};
jQuery("#pikame").PikaChoose({
carousel: true,
autoPlay: false,
buildFinished: a
});
});
这是一个关于基本集成的pikachoose网站的链接:除了一个fancybox画廊工作之外,我有一切(该选项不在这个网站上).http://www.pikachoose.com/how-to-fancybox/我见过其他人问过这个并没有可靠的答案.它甚至可能是不可能的.任何帮助表示赞赏.
我有以下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'或类似的东西都没有用.
我有一个项目,其中要求#footer向上移动页脚(),同时向下滚动页面的视差效果.当您开始向下滚动页面时,页脚应该开始向上移动,直到它在视口的(底部)可见.
当页脚<div>到达视口顶部时,页脚应该覆盖前面的大部分上半部分.
该页面可能具有类似的html结构:
<body>
<div id="sectionA" class="div">First section</div>
<div id="sectionB" class="div">Second section</div>
<div id="sectionC" class="div">Third section
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="footer" class="div cf">Footer</div>
</body>
通过javascript/jQuery向(相对定位的)页脚的CSS属性添加动态负值来实现类视差效果top.以下是重要的代码:
var $window = jQuery(window),
$footer = jQuery("#footer"),
$viewport = window.innerHeight,
$startEffect = $footer.offset().top - $viewport;
function footerParallax() {
var $scrollPos = $window.scrollTop() - $startEffect,
$ratio = 0.6;
$footer.css({
top: -($scrollPos * $ratio)
});
}
$window.scroll(function () {
footerParallax();
});
(显而易见的)问题是,只要top属性开始获得负值 …
我正在创建一个单个文件HTML5应用程序,其中嵌入了所有图像资源Data Uri.这个应用程序包含一个图像库(花式框),它使用<a>标签作为图像的来源在其弹出窗口中显示,正如许多其他人所做的那样.例如
<li>
<a href="photos/FL6C2632.jpg">
<img src="data:image/jpeg;base64,somebase64stringetc014564hkjhkj" />
</a>
</li>
更换src的属性img与URI将按预期数据标签,但在更换a标签的href同一个base64等同,而不是一个像一些真正的路径没有.
无论如何能够在href属性中使用数据uri而不是现有的物理位置吗？
所以例如(哪个不起作用)
<li>
<a href="data:image/jpeg;base64,someotherbase64stringetc014564hkjhkj">
<img src="data:image/jpeg;base64,somebase64stringetc014564hkjhkj" />
</a>
</li>
我正在使用Fancybox在我的网站上输出计算器的结果:inlandprotitle.com
桌面和iphone上的输出效果很好:
-webkit-overflow-scrolling: touch;
在Android手机上裁剪输出.
有没有办法在Android手机上启用fancybox滚动？