1

重複の可能性：
iframeから親のFancyboxを呼び出す

こんにちは私はiframe私のホームページにあります。その中にはギャラリーがあり、写真をクリックすると親ページで写真を開きたいですfancybox。私は何でも試しましたが、1つの画像しか開かず、次と前のボタンのある完全なギャラリーは開きません。

私の例：

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>FancyBox 1.3.4 | Demonstration</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script>
        !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
    </script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    <link rel="stylesheet" href="style.css" />

    <script type="text/javascript">
        function readyFancy(){
            $("a#sample").trigger("click");
        }
        function callMe(site){ 
            $("#sample").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'href'              : ''+site+'',
                'autoScale'          : true,
                'onStart'           : function(){$("body").css({'overflow':'hidden'});},
                'onClosed'          : function(){$("body").css({"overflow":"visible"});}
            });
        readyFancy();
        }
    </script>

</head>
<body style="padding: 20px;">
<a href="#" id="sample"></a> <!-- here we set a decoy link for the frame to be triggered-->
<p>Below is an iframe</p>
<iframe src="sample.html" width="300" height="200"> <!--the link of the iframe-->
</body>
</html>

sample.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body >
<div>
<a onClick="parent.callMe('http://localhost/fan/1_b.jpg');" href="#" ><img src="1_s.jpg"></a>
<a onClick="parent.callMe('http://localhost/fan/2_b.jpg');" href="#" ><img src="2_s.jpg"></a>
</div>
</body>
</html>
4

1 に答える 1

1

IDセレクターとして使用している場合は$("#selector").fancybox();、クラスに切り替えてください-$(".selector").fancybox();

于 2013-01-19T17:27:13.820 に答える