Web Fancybox javascript帮助和链接

问题是我想用我的导航链接“about”打开fancybox，但一旦我打开我的网站，“about”fancybox就会自动出现在我的页面上。当我关闭fancybox，然后再次单击我的“关于”链接时，fancybox不再处于固定的宽度和高度，并且存在我不想要的滚动条。我是javascript新手。。。我需要帮助

代码：

脚本：

<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>  

$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox（）；
});
$（“.fancybox”）.fancybox({
填充：0
});
$.fancybox({
href:'about.html'，
宽度：953，
身高：1200，
自动调整大小：false，
键入：“iframe”，
iframe：{
滚动：“否”，
预加载：真
}});

由于我没有fancybox.js，我只是猜测一下：您是否已经尝试在文档准备就绪时删除初始fancybox调用，并且只在“关于”链接上使用它？ 像

更新：调整为在一个页面上有多个内容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>

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');
    }
  });
});

 <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").fancybox({
     type : 'iframe',
     iframe : {
       scrolling : 'no'
     },
     ......

当您知道每个Fancybox的值时，请按如下方式调整链接：

 $(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');
    }
  });
});

 <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").fancybox({
     type : 'iframe',
     iframe : {
       scrolling : 'no'
     },
     ......

更新3：如何在Fancybox中隐藏滚动条

下一个问题是如何隐藏Fancybox iframe的滚动条。如果还没有，请使用选项

iframe

和

滚动“否”

扩展选项，如下所示：

 $(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');
    }
  });
});

 <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").fancybox({
     type : 'iframe',
     iframe : {
       scrolling : 'no'
     },
     ......

如需进一步参考，您应查看Fancybox网站，例如以下提示：

---

即使您是javascript新手，您也会发现不同选项的描述和工作示例，以防您需要检查其他内容。

我不确定您的意思。我在index.html页面中有所有脚本。我的about.html页面中没有脚本。误解-我的意思是在你的index.html中尝试这个脚本，而不是你目前正在使用的脚本，因为它看起来就像你正在调用fancybox 3次。我不确定这一点，因为我没有fancybox.js，但只是与我所知道的普通jquery UI相比。它工作了！！谢谢现在我可以让我的其他链接正常工作了：contact.html services.htmlGlad它有帮助：）只是检查他们页面上的fancybox选项。我猜你在其他链接上也不会有任何问题。还有一个问题，现在我已经用你的脚本替换了脚本，我的index.html页面上的所有fancybox都无法工作。当我打开index.html上的所有花式框时，会出现about.html。我只是想知道为什么当iframe滚动时，滚动条会显示在你的页面上，而我刚才注意到没有任何部分。我不知道你的意思。。我从Update:Adjust复制了您的脚本，以便在一个页面上有多个内容FancyBox。链接可以工作，但我不确定我是否为库添加了正确的js。几分钟后，我会在fiddle上检查它。什么不适合你？你还有滚动条吗？我的图库花式方框不是iFrame。他们是普通的幻想家。这可能是错误吗？是的，还有滚动条如果我给你我的脚本，你能从小提琴中添加脚本吗？我不确定我加的是否正确。？