问题是我想用我的导航链接打开fancybox' about'但是'关于'打开我的网站后,fancybox会自动出现在我的页面上。当我关闭fancybox然后点击我的关于'关于'再次链接,fancybox不再是固定的宽度和高度,还有我不想要的滚动条。我是javascript的新手...我需要帮助。
代码:
<li><a class="fancybox fancybox.iframe" href="about.html">about</a></li>
脚本:
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox();
});
$(".fancybox").fancybox({
padding : 0
});
$.fancybox({
href: 'about.html',
width: 953,
height: 1200,
autoSize: false,
type : 'iframe',
iframe: {
scrolling : 'no',
preload : true
}});
</script>
答案 0 :(得分:0)
因为我没有fancybox.js只是猜测:你是否已经尝试删除文件就绪的初始fancybox调用并且只在about-link上有它? 像
$(document).ready(function(){
$(".fancybox").fancybox({
href: 'about.html',
width: 953,
height: 1200,
autoSize: false,
type : 'iframe',
padding : 0, //not sure if padding needed as you added is as fix
iframe: {
scrolling : 'no',
preload : true
}
});
});
更新:调整以在一个页面上包含多个内容Fancybox
由于提供的答案适用于单个链接,第二个问题是如何在一个页面上具有不同链接的多个fancybox。再次猜测:
<li><a class="fancybox fancybox.iframe" href="about.html">about</a></li>
<li><a class="fancybox fancybox.iframe" href="service.html">service</a></li>
从js:
中删除href: 'about.html',
$(document).ready(function(){
$(".fancybox").fancybox({
width: 953,
height: 1200,
autoSize: false,
type : 'iframe',
padding : 0, //not sure if padding needed as you added is as fix
iframe: {
scrolling : 'no',
preload : true
}
});
});
Fancybox将从链接中获取href并且不需要它作为选项。
更新2:如何使用不同大小的Fancybox
对于第三个问题,它可以这样工作 - 扩展你的js如下:
$(document).ready(function(){
$(".fancybox").fancybox({
// width: 953, // just commented out here
// height: 1200, // just commented out here
autoSize: false,
type : 'iframe',
padding : 0, //not sure if padding needed as you added is as fix
iframe: {
scrolling : 'no',
preload : true
},
beforeLoad: function() {
this.width = $(this.element).data('width');
this.height = $(this.element).data('height');
}
});
});
当您知道每个Fancybox的值时,请按如下方式调整链接:
<li><a class="fancybox fancybox.iframe" href="about.html"
data-width="953" data-height="1200">about</a></li>
<li><a class="fancybox fancybox.iframe" href="example.html"
data-width="auto" data-height="auto">about</a></li>
不确定Fancybox是否支持自动宽度和高度,但只检查data-width和data-height的不同值是否会影响大小。如果您未在Fancybox选项中定义宽度和高度静态,则可以使用beforeLoad
- 选项获取不同的值,并将值设置为data
- 属性为链接。
并且作为第二个猜测 - 为了避免为应该以相同大小打开的所有链接设置数据属性 - 可以仅为其他链接设置这些数据属性并将宽度和高度保持为默认值:
$(document).ready(function(){
$(".fancybox").fancybox({
width: 953, // kept as default width
height: 1200, // kept as default height
autoSize: false,
type : 'iframe',
padding : 0, //not sure if padding needed as you added is as fix
iframe: {
scrolling : 'no',
preload : true
},
beforeLoad: function() {
if($(this.element).data('width')) // check if element has data-width
{
this.width = $(this.element).data('width'); // then override default
}
if($(this.element).data('height')) // check if element has data-height
{
this.height = $(this.element).data('height'); // then override default
}
}
});
});
更新3:如何在Fancybox中隐藏滚动条
下一个问题是如何隐藏Fancybox iframe的滚动条。如果还没有,请使用选项iframe
和scrolling : 'no'
扩展选项,如下所示:
$(".fancybox").fancybox({
type : 'iframe',
iframe : {
scrolling : 'no'
},
......
如需进一步参考,请查看Fancybox网站,例如:来自这里的提示:
即使您不熟悉javascript,您也可以找到不同选项的说明和工作示例,以防您必须检查其他内容。