Javascript 在pano2vr panorama中以编程方式打开fancybox_Javascript_Fancybox

Javascript 在pano2vr panorama中以编程方式打开fancybox

javascript

Javascript 在pano2vr panorama中以编程方式打开fancybox,javascript,fancybox,Javascript,Fancybox,我正试图从pano2vr全景中打开一个fancybox。我点击全景中的一个热点，触发如下调用：javascript:centeredpoop（17）在基础页面中，我有： function centeredPopup(id){ $.fancybox.open({ 'autoScale': true, 'transitionIn': 'elastic', 'transitionOut': 'elastic', 'speedIn': 500, 'speedOut': 300, 'aut

我正试图从pano2vr全景中打开一个fancybox。我点击全景中的一个热点，触发如下调用：javascript:centeredpoop（17）

在基础页面中，我有：

function centeredPopup(id){
 $.fancybox.open({
 'autoScale': true,
 'transitionIn': 'elastic',
 'transitionOut': 'elastic',
 'speedIn': 500,
 'speedOut': 300,
 'autoDimensions': true,
 'centerOnScroll': true,
 'href' : 'popup.asp?qID='+id;
});
}

$(document).ready(function(e) {
//alert('started');
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
    type: 'iframe',
    autoSize : false,
    beforeLoad : function() {         
        this.width  = parseInt(this.element.data('fancybox-width'));  
        this.height = parseInt(this.element.data('fancybox-height'));
    }
});

唉，没有一个fancybox出现

完整的HTML格式如下：


函数hideUrlBar（）{
document.getElementsByTagName（“body”）[0].style.marginTop=“1px”；
滚动到（0，1）；
}
窗口。addEventListener（“加载”，hideUrlBar）；
window.addEventListener（“调整大小”，hideUrlBar）；
window.addEventListener（“方向更改”，hideUrlBar）；
功能中心弹出窗口（id）{
$.fancybox.open({
“自动缩放”：正确，
“transitionIn”：“弹性”，
“transitionOut”：“弹性”，
“speedIn”：500，
“加速输出”：300，
“自动维度”：true，
“centerOnScroll”：正确，
'href'：'popup.asp？qID='+id
});
}
$（文档）.ready（函数（e）{
//警报（“启动”）；
$（“.fancybox”）
//.attr（'rel'，'gallery'）
.fancybox({
键入：“iframe”，
自动调整大小：false，
beforeLoad:function（）{
this.width=parseInt（this.element.data（'fancybox-width'）；
this.height=parseInt（this.element.data（'fancybox-height'）；
}
});
});
阀体，分区，h1，h2，h3，跨度，p{
字体系列：Verdana、Arial、Helvetica、无衬线；
颜色：#000000；
左边距：0px；
边际上限：0px；
右边距：0px；
边缘底部：0px；
}
身体{
字号：10pt；
背景：#ffffff；
}
表，tr，td{
字号：10pt；
边框颜色：#777777；
背景：#dddddd；
颜色：#000000；
边框样式：实心；
边框宽度：2倍；
填充物：5px；
边界塌陷：塌陷；
}
h1{
字号：18pt；
}
氢{
字号：14pt；
}
.警告{
字体大小：粗体；
} 
/*修复webkit和Mac OS X Lion*上的滚动条
：-webkit滚动条{
背景色：rgba（0,0,0,0.5）；
宽度：0.75em；
}
：-webkit滚动条拇指{
背景色：rgba（255255,0.5）；
}    
此内容需要HTML5/CSS3
//使用容器创建全景播放器
pano=新的pano2vrPlayer（“容器”）；
//添加蒙皮对象
皮肤=新的pano2vrSkin（pano）；
//加载配置
readConfigUrl（“hotspots.xml”）；
//隐藏iPhone上的URL栏
hideUrlBar（）；
请启用Javascript

什么版本的fancybox？你也可以显示你的html吗？也许可以添加'type:'ajax'或'iframe'，这是fancybox版本2.1.5添加type:ajax成功了

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="jquery-2.0.3.js"></script>
<script src="shadowbox-3.0.3/shadowbox.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<script type="text/javascript">

    function hideUrlBar() {

        document.getElementsByTagName("body")[0].style.marginTop="1px";
        window.scrollTo(0, 1);
    }
    window.addEventListener("load", hideUrlBar);
    window.addEventListener("resize", hideUrlBar);
    window.addEventListener("orientationchange", hideUrlBar);

    function centeredPopup(id){
         $.fancybox.open({
         'autoScale': true,
         'transitionIn': 'elastic',
         'transitionOut': 'elastic',
         'speedIn': 500,
         'speedOut': 300,
         'autoDimensions': true,
         'centerOnScroll': true,
         'href' : 'popup.asp?qID='+id
        });
    }

    $(document).ready(function(e) {
    //alert('started');
        $(".fancybox")
        //.attr('rel', 'gallery')
        .fancybox({
            type: 'iframe',
            autoSize : false,
            beforeLoad : function() {         
                this.width  = parseInt(this.element.data('fancybox-width'));  
                this.height = parseInt(this.element.data('fancybox-height'));
            }
        });
    });
</script>

<style type="text/css" title="Default">
    body, div, h1, h2, h3, span, p {
        font-family: Verdana,Arial,Helvetica,sans-serif;
        color: #000000; 
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    }
    body {
      font-size: 10pt;
      background : #ffffff; 
    }
    table,tr,td {
        font-size: 10pt;
        border-color : #777777;
        background : #dddddd; 
        color: #000000; 
        border-style : solid;
        border-width : 2px;
        padding: 5px;
        border-collapse:collapse;
    }
    h1 {
        font-size: 18pt;
    }
    h2 {
        font-size: 14pt;
    }
    .warning { 
        font-weight: bold;
    } 
    /* fix for scroll bars on webkit & Mac OS X Lion */ 
    ::-webkit-scrollbar {
        background-color: rgba(0,0,0,0.5);
        width: 0.75em;
    }
    ::-webkit-scrollbar-thumb {
        background-color:  rgba(255,255,255,0.5);
    }    
</style>    
</head>
<body>
<script type="text/javascript" src="pano2vr_player.js">
</script>
<script type="text/javascript" src="skin.js">
</script>
<div id="container" style="width:1024px;height:768px;">
This content requires HTML5/CSS3
</div>
<script type="text/javascript">
    // create the panorama player with the container
    pano=new pano2vrPlayer("container");
    // add the skin object
    skin=new pano2vrSkin(pano);
    // load the configuration
    pano.readConfigUrl("hotspots.xml");
    // hide the URL bar on the iPhone
    hideUrlBar();
</script>
<noscript>
    <p><b>Please enable Javascript!</b></p>
</noscript>

<a class="fancybox" href="popup.asp?qID=17" data-fancybox-width="300" data-fancybox-height="300">Open 500x200</a>
</body>
</html>