我可以有两个Fancybox 2.0实例吗?

问题描述

我的网站上安装了Fancybox 2.0，对其进行了略微的修改，使其看起来像Facebook图像预览框.我想要Fancybox的第二个实例"，但是它的位置有所不同.我的图像预览Fancybox(当前实例)应该距顶部20px(目前是这样)，但是我的共享对话框Fancybox(第二个实例)应该为450px x 300px(尺寸仅供参考，我没有看过并位于页面的中央(如Fancybox的默认设置).这可能吗?如果可以，怎么办?

I have Fancybox 2.0 installed on my site, modified slightlyto look like the Facebook image preview box. I want to have a second "instance" of Fancybox, but for it to be positioned differently. My image preview Fancybox (the current instance) should be 20px from the top (as it is at the moment), but my share dialog Fancybox (the second instance) should be 450px by 300px (dimensions for example purposes only, I have not looked at it in depth) and positioned in the centre of the page (as Fancybox defaults to). Is this possible? If so, how?

推荐答案

是的，您可以...我是在我的网站上完成的.

yes you can...I did it on my web site..

第一个fancybox界面.

first fancybox ues..

.fancybox-wrap {
margin: Xpx 0 0 Ypx;
}

放置您的盒子.

动态设置位置...你需要做两件事...答:在document.ready()功能之前添加一个javascriptB:在您的超链接中添加一个onclick ...

to dynamically set the position...you need to do two things...A: add a javascript before document.ready() fuunctionB: add a onclick in you hyperlink...

因此，当有人单击链接时，它将在fancybox出现之前更改css.

so when somebody click the link ,it will change the css before fancybox appear..

如下所示的Java脚本(我从网上获得，它是一个动态更改CSS值的函数)

the java script as follow (I get from the web, it is a function to dynamically change CSS value)

    function css(selector, property, value) {
for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles
//Try add rule
try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}',
document.styleSheets[i].cssRules.length);
} catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err)
{}}//IE
}
}

超链接示例:

<a class="fancybox fancybox.iframe" href="showmybox.html"  onclick="css('.fancybox-
wrap', 'margin', '-100px 0 0 250px')">

(这会在右上角显示框)

(this will show you box at up-right corner)

这篇关于我可以有两个Fancybox 2.0实例吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！