转至:http://fancybox.net/ 打开任何示例(在页面底部)
当鼠标悬停在fancybox内的内容上时,浏览器主窗口无法滚动.当鼠标在任何其他地方工作.我不想要这种行为.你怎么解决这个问题？
当鼠标光标位于fancyboxmodal内时,fancybox模式下的页面会进行滚动.
我有一个关于 FancyBox 集成的问题。我会创建一个包含 10 张图片但只有一个缩略图的画廊。例如： http ://fancyapps.com/fancybox/demo/ 第一个演示展示了四个图像：森林、大海、日落和埃菲尔铁塔。我可以包含单个缩略图吗，例如埃菲尔铁塔的缩略图，点击后会在灯箱中显示埃菲尔铁塔的图像，还有森林、大海和日落的图像。我尝试了很多东西，但没有任何工作正常。如果您有任何想法... 非常感谢。
PS：我使用 Twitter Bootstrap-1.3 和 FancyBox-2
我想知道是否有人可以帮助我。
首先道歉，因为对于某些人来说这可能是一个非常基本的问题，但我对此不熟悉，所以请耐心等待。
我使用下面的脚本在 fancyBox 中创建一个图像库。
<!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">
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="fancybox/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />
<script type="text/javascript">
$('.fancybox').fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
padding : 20,
fitToView : true,
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false, …我正在使用Fancybox 2.0,我希望标题框显示在图像上方或图像顶部,而不是下方.
就在所有内容之上.
我尝试制作fancybox-inner样式position:absolute,但随后高度fancybox-wrap不会设置为绝对像素.
有人可以帮我实现吗？
我正在使用fancybox有一个简单的vimeo弹出窗口:http://fancyapps.com/fancybox/
这是我的jQuery:
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none',
padding: 0
});
这是我的HTML:
<a class="fancybox" href="http://vimeo.com/5319920">
<img class="video_preview" src="/assets/home/video_preview.png">
</a>
问题是我收到The requested content cannot be loaded错误而没有任何记录错误.很明显,脚本被调用了.
这里可能会发生什么,有什么想法吗？我完全失去了.
谢谢!
我已经厌倦了所有的例子: - http://fancyapps.com/fancybox/
制作弹出式登录框没有任何帮助我.
我已经检查了旧版本的Fancybox 1.3.x,其中有一个登录框示例,但该方法并不适用于新的Fancybox v2.
如果有人能帮助我,我会很高兴.
到目前为止,我有这个代码,它是半工作的:
$("#top-login-button").click(function() {
$.fancybox.open({
href : "#login_form",
padding : 0,
onClosed : function() {
$("#login_error").hide();
}
});
});
$("#login_form_ajax").bind("submit", function() {
if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
$("#login_error").show();
return false;
}
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "/login.php",
data : $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
return false;
});
我有一个运行正常的fancybox 照片库，但我正在尝试为照片添加标题，但根本无法显示它们。
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />
<a data-fancybox="gallery" class="party" title="I met Anna in 2007 while in college at NAU in Flagstaff, AZ." href="images/anna.jpeg">
<img class="smig" src="images/anna.jpeg">
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
JS
$(document).ready(function() {
$("a.party").fancybox({
helpers : {
title: {
type: 'inside'
}
}
});
});
请帮忙！
我正在使用 Fancybox v3.5.4 和 Owl carousel v2.3.4 和lazyLoad 选项
当我们点击照片时，Fancybox 会弹出照片。然后如果我们点击“下一步”几次以获取 Fancybox 上的下一张照片然后关闭它，猫头鹰传送带上的照片就消失了。
似乎轮播已经改变了它的背景位置并显示了由于lazyLoad 选项而尚未加载的照片。有谁明白这里发生了什么？我花了很多时间在这上面..谢谢
你可以在这里看到一个例子：https : //codepen.io/Philippe_12/pen/bOVOrK
$('.owl-carousel').owlCarousel({
items: 4,
loop:true,
pagination: false,
slideSpeed: 700,
paginationSpeed: 700,
rewindSpeed: 700,
lazyLoad: true
});
$().fancybox({
selector : '.owl-item:not(.cloned) a',
hash : false,
thumbs : {
autoStart : true
},
buttons : [
'zoom',
'download',
'close'
]
});.img_container{ width:50%}<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.4/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.4/jquery.fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<h2>fancyBox v3.2 - OwlCarousel2 lazyLoad</h2>
<div …所以我为房地产网站上的房产页面制作了一个 Fancybox 画廊。该画廊展示了房产图片和平面图。
在属性页面上，我有一个打开平面图的按钮，但如何打开特定的画廊项目（在本例中是平面图）？
这是我的代码，我可以在其中找到平面图画廊项目的索引。
jQuery(document).ready(function() {
var galleryItem = document.getElementById('drawing-item-1');
var galleryItemIndex = jQuery(".property-gallery__item").index(galleryItem);
jQuery('.launch-gallery-drawing').click(function(){
// Open the gallery and display the correct item by the galleryItemIndex
})
});
我尝试过使用jQuery.fancybox.getInstance().jumpTo(galleryItemIndex);，但我认为此方法仅适用于画廊的开放且活动的实例，但目前还不是。
我也尝试过jQuery.fancybox.open();，但这会创建一个新实例/新画廊。
如何通过单击按钮从特定 fancybox 画廊中打开特定画廊项目？
我试图动态设置我的Fancybox对象的一些值基于存储在iframe正在加载的iframe内的标签中的信息.问题是,我唯一能够从内容中获取CORRECT值(iv几乎可以尝试每个回调组合)都在afterShow方法上.这会导致宽度和高度的跳跃过渡,在显示后会重置.
$('.fancybox').fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
autoSize:true,
afterShow : function() {
var fancy = this;
var h = $('.fancybox-iframe').contents().find('html').height();
var w = $('.fancybox-iframe').contents().find('html').width();
fancy.width = w;
fancy.height = (h+50);
}
});
在AfterShow方法之外的任何东西都给我正确的结果,甚至在Show之前(这就是我想要的).是否有任何回调/ jquery组合可以在显示奇特的盒子之前实现这一点？谢谢!
fancybox ×10
jquery ×9
javascript ×3
fancybox-2 ×1
fancybox-3 ×1
gallery ×1
hidden ×1
icons ×1
iframe ×1
owl-carousel ×1
scroll ×1
thumbnails ×1