0

pano2vr パノラマ内から fancybox を開こうとしています。パノラマ内のホットスポットをクリックすると、次のような呼び出しがトリガーされます。 javascript:centeredPopup(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'));
    }
});

残念ながら、ファンシーボックスは表示されません。

以下の完全な HTML:

<!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>
4

0 に答える 0