Question

如何将新div（不是.js）插入fancybox（当fancybox - 图像打开时）？像这样：

image http://s14.directupload.net/images/120319/qbrd6nev.png

Answer 1

我也试图制作一个div css以适应那种描述:)）仍无济于事。我吮吸css造型，当我弄清楚它时会回到这个。我的理论是，如果你理解我的意思，它应该是div中div内的div：））

!!!!!!!! 更新我尝试搞乱css，这就是我得到的（我为了简单而使用 1.3.4v ）并参考，这些图像和代码我使用的是在fancybox.net的1.3.4演示包中找到的

如果我没有很好地解释我的代码，那只是意味着我仍然在努力，所以我只是希望你明白为什么它是模糊的，但关键是它是可行的，你只需要计算出css文件。我希望有人有一个更好看的代码

输出： MySampleTry http://img52.imageshack.us/img52/3034/fancytry.png

1. 我所有这些来自jquery.fancybox-1.3.4.css 只需更改这些1 2 3并在demo

中使用example7搞乱

 #fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
padding-right:50%;  /*this part extends the right side of the photo so it would look like thet're on the same page*/
  }

2.这会将原始标题重新定位到图像的右上角

.fancybox-title-inside {
padding-bottom: 10px;
text-align: left;
color: #333;
position: absolute;
top:0;
left:65%;
border:1px solid black;/*for you to see how large the div is*/
height:100%;
}

3.我将成为新的RED div

div.fancycontent{ /*saviour do word wrap here*/
border:1px solid black;
padding:2px;
color: #333;
background: #FF0000;
width:50%;
height: 100px;
}

Answer 2

我尝试在我的一个项目中使用fancybox，但不得不恢复使用DIV元素实现我自己的弹出窗口。如果您知道一些JQuery试图查看这些链接，那么很容易创建自己的弹出窗口，而不是使用fancybox或facebox。您可以自定义div标签以包含您需要的内容。

output source

Answer 3

在你的fancybox JS中，将类型设置为iframe：

$(document).ready(function() {
    $('.callout').fancybox({
        type: 'iframe',
        width:  '640px',
        height: '480px',
    });
});

然后，您只需将该类应用于您的链接即可在fancybox中打开您想要的任何内容：

<a class="callout" href="{path}">{link}</a>

如果iframe显示有问题，您可以尝试添加一个辅助类来告诉fancybox您要链接到哪种类型的内容（这是最新版本中引入的新约定，所以我不知道是否我建议默认使用它：

<a class="callout callout.iframe" href="{path}">{link}</a>

希望有所帮助！

TY

Answer 4

我刚刚创建了这个fancybox“a la”facebook演示，看起来非常像你想要的：

http://picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html

Fancybox 2 - 包括一个新的Div成像？

4 个答案: