我正在一个托管大量PDF文件的网站上工作,我想在fancybox(2.1)中打开它们进行预览.它适用于Chrome和Firefox.但它在IE8中不起作用.我已经尝试直接链接到PDF文件,链接到iframe,并链接到嵌入标签(以及其他更疯狂的东西).我不能用谷歌来包装它们.这是一个演示该问题的页面.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My Page</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fancybox.js?v=2.1.0"></script>
<link type="text/css" rel="stylesheet" media="screen" href="jquery.fancybox.css" />
</head>
<body style="background-color:grey">
<p><a href="mypdffile.pdf" class="fancypdf">a link</a> to a PDF file.</p>
<p><a href="#Frame1" class="fancy">a link</a> to an iframe with the pdf in it.</p>
<div style="display:none">
<iframe id="Frame1" src="mypdffile.pdf" style='width:100%;' height="600" frameborder="0" allowTransparency="true"></iframe>
</div>
<p><a class="fancy" href="#mypdf" >a link</a> to a pdf in an embed tab</p>
<div style="display:none"><div id="mypdf">
<embed src="mypdffile.pdf" type="application/pdf" width="640" height="480" …我在这里发布问题和解决方案，以帮助遇到过与我相同的问题的任何人。
<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模式,在其中弹出一个iframe,显示一些文字和诸如此类的东西.然而,经过这个版本的QA团队注意到它迫使网站认为窗口的最大宽度是480px,这会使网站陷入我建立的响应式媒体查询.
这在IE10,Chrome或Firefox中不会发生.它也不会发生在IE9仿真中.我有IE10,无法在IE的任何版本/移动中复制它,但我可以看到它发生在IE9的每台计算机上.由于我无法复制,我有一点困难时间找到问题.Fancybox是否存在可能导致此问题的已知错误或问题？
谢谢你的帮助!
我试图出来的fancybox 2,我已经去除了arrows,closebutton和loop,并启用nextclick.我想要超级干净,易于使用.
我现在遇到的问题是我点击图库,但是当我点击最后一张幻灯片时,我希望它关闭,而它没有 - 点击图片不会做任何事情.
我的猜测答案是通过类添加自我关闭动作,如下所示:
<a class="gallery1 closeaction" href=...
但我真的不知道.我认为这种事情会在演示中,但我找不到类似的东西.
救命？
对于我正在处理的网站存在一些问题,我似乎无法让fancybox正常使用YouTube剪辑进行测试.
这是我的脚本文件.使用2.1.4与jQuery 1.9
的script.js
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.flexslider').flexslider({
animation: "slide"
});
$j('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
flexslider工作正常,但fancybox-media有问题.当我点击链接时,它只是打开链接而不是在fancybox窗口中打开媒体文件.
在Chrome控制台内部,它说
Uncaught TypeError: Cannot read property 'helpers' of undefined jquery.fancybox-media.js:88
(anonymous function) jquery.fancybox-media.js:88
(anonymous function) jquery.fancybox-media.js:196
该链接定义为:
<h2><a class="fancybox-media" href="http://www.youtube.com/watch?v=czQipWJA8EU">Watch This Video</a></h2>
此外,如果您想查看开发中的网站,可以在www.miems.co找到
任何想法,请告诉我.真诚的,大卫
我正在使用FancyBox 2.1.4和jQuery,
是否可以在HTML页面上只有一个缩略图,指向包含多张照片的整个FancyBox照片库？
因此,当单击一个缩略图时,它将在可以查看的现有HTML页面上启动FancyBox照片库.
默认情况下,需要一个HTML页面上的所有缩略图,如果您再单击任何一个,它将打开该一个,您可以单击"向左"或"向右"查看其他照片.
我背后的逻辑:在HTML页面上有信息.关于一个地方(一个住宅区),在那个页面上我只想放置一个缩略图并称之为"综合体的照片库",所以当有人点击那个缩略图时,它会启动FancyBox照片库幻灯片,其中包含所有照片.
谢谢你的帮助,
莱因哈德.
我需要解决这篇文章中讨论的body元素和css overflow属性的问题:
当激活fancybox 2时,父页面上的滚动条会闪烁,导致内容向左移动然后向后移动
使用帮助helpers: {overlay: {locked: false}}程序选项修复了我的问题,但我需要一个解决方案来为所有Fancybox调用设置此选项,这样我就不需要在每次调用时都使用此设置.
我尝试了不同的形式,但不起作用:
$.fancybox.open([{
helpers: {
overlay: {
locked: false
}
}
}]);
$.extend($.fn.fancybox.helpers, {
overlay: {
locked: false
}
});
$.fn.fancybox.defaults.overlay.locked = false;
我不想更改css组件,因为目前使用相同的通过Bower.
我正在阅读文档:
http://fancyapps.com/fancybox/#docs
和$ .fancybox.open([group],[options])和开放的解释很好,但我想知道我是否可以在组数组中使用youtube视频的链接？在dom准备就绪之后,我正试图播放YouTube视频,例如:
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : '1st title'
},
{
href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title : '2nd title'
}
], {
padding : 0
});
我可以让我的视频出现在一个很棒的fancybox中,但是我希望它在页面自动加载后显示而不需要点击链接,例如fancybox在上面的jsfiddle示例中使用.open .
感谢您提前提供的所有帮助.
我的javascript语法是新手级别,但我正在学习:>
我正在使用Fancybox 2.1.4来显示内联<div id="content">.传统上,<div>将设置为style="display:none",Fancybox将在激活时将其更改为阻止,并none在关闭时更改为阻止.
在我的情况下,我实际上<div>在页面上显示的内容在不同的位置(这是项目的正确的事情,我知道可以有各种意见).
所以我需要<div id="content">在关闭fancybox(它本身消失)之后不要消失.
经过一番研究,我发现,使用afterClose回调,我可以简单地改变或内联样式添加id"content"到display:block(这解决了这个问题.
问题是...我的开玩笑:>我试了很长时间,只是不知道在哪里放置代码,以及正确的语法.
我如何将它添加afterClose到我的fancybox功能？
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox(
);
});
</script>
非常感谢任何帮助
我在这里看到了一个类似的问题: Fancybox在包含"&"的URL上窒息 而且我已经尝试了所有提供的解决方案,但它们都没有工作!我已经正确地包含了所有链接(首先是jquery链接),并且在我的文档开头,我声明了像这样的fancybox:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({'type' : 'image'});
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
我的代码是:
echo '<a class="fancybox" rel="group1" href="square/'.$fic_serie .'">
<img src="square/'.$fic_serie .'" alt=""/></a>';
$ fic_serie是将被图像名称替换的var
现在,我觉得没什么作用; 与我说它们应该是(在fancybox.js文件中)相比,图像太大了,当我点击它们时,它们作为链接打开,而不是在灯箱中打开.
我也试过了
class='fancybox fancybox.image'
但没有运气....谢谢!