Question

问题是我想用我的导航链接打开fancybox＆＃39; about＆＃39;但是＆＃39;关于＆＃39;打开我的网站后，fancybox会自动出现在我的页面上。当我关闭fancybox然后点击我的关于＆＃39;关于＆＃39;再次链接，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>

Answer 1

因为我没有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网站，例如：来自这里的提示：

Fancybox Site

即使您不熟悉javascript，您也可以找到不同选项的说明和工作示例，以防您必须检查其他内容。

Fancybox javascript帮助和链接

1 个答案: