带有 div 的 fancybox 2答案

【问题标题】：fancybox 2 with div带有 div 的 fancybox 2
【发布时间】：2012-12-11 05:33:41
【问题描述】：

我认为我在使用带有 div 包裹的 nivo 滑块的fancybox 2 时遇到了问题，但经过一些测试，我发现我在使用带有 div 的 facybox 2 时遇到了问题。所以我会重新组织我的问题。为了更清楚，我将在下面发布我的代码：

对于 css：

<style>
  #content{
    background: red;
  }
  #maximize{ width: 24px; height: 24px; }
</style>

对于html：

<a href='#content' id="maximize"> max </a>
<div id="content"> </div>

对于 JS：

$('#maximize').click(function() {
$('#maximize').fancybox({
     'href' : '#content'
   });
});

如果我单击最大按钮，它会按预期工作。但是，如果我关闭了fancybox，弹出框就消失了，原来id=“content”的div也消失了。这不是预期的。我希望内容变成原来的样子，但不要消失。

其他问题：如何更改弹出的花式框的大小？我想把花式盒子做得更大。

我希望我的问题足够清楚。提前致谢。

【问题讨论】：

如果fancybox用id="slider-wrapper"打开div，那么在回调afterClose中不应该是$("#slider-wrapper").show()？

标签： javascript jquery fancybox fancybox-2

【解决方案1】：

您实际上并不需要：

$('#maximize').click(function() {
   $('#maximize').fancybox({
     'href' : '#content'
   });
});

...但只有这个：

$('#maximize').fancybox({
    // API options here
});

...因为.fancybox() 已经将click 事件绑定到选择器#maximize，否则是多余的...。'href' : '#content' 选项也是如此，因为href 已经取自@987654329链接中的@属性。

另一方面，fancybox 将始终隐藏打开的inline 内容，因为它将是它的预期状态（在fancybox 中显示已经可见的东西不是多余的吗？）......无论如何，你可以使用回调afterClose 再次可见：

$('#maximize').fancybox({
    afterClose: function() {
        $("#content").show();
    }
});

关于第二个问题，使用width 和height 选项以及fitToView 和autoSize 设置您喜欢的框尺寸，例如：

$('#maximize').fancybox({
    fitToView: false, // avoid the adjusting size to viewport
    autoSize: false, // avoid set size based on content
    width: 420, // or whatever
    height: 320,
    afterClose: function() {
        $("#content").show();
    }
});

见working DEMO

【讨论】：