如何在shopify页面的fancybox中获取iframe

时间:2012-07-07 17:54:42

标签: jquery fancybox liquid shopify

我正在尝试使用以下代码在shopify页面上加载一个简单的代码(我已经尝试过shopify及其工作)但是如何在shopify上获取这个是我的主要问题。

<!DOCTYPE html>
<html>
<head>
    <title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.0.6"></script>

    <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.0.6" media="screen" />


    <script type="text/javascript">
        $(document).ready(function() {
            $("#fancybox-manual-b").click(function() {
                $.fancybox.open({
                    href : 'http://2792.a.hostable.me/testing/instagram/loader.php?count=10',
                    type : 'iframe',
                    padding : 5
                });
            });

        });
    </script>
    <style type="text/css">
        .fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        }
    </style>
</head>
<body>
<a id="fancybox-manual-b" href="javascript:;">iframe loader</a>
</body>
</html>

我的另一个问题是如何在加载时将数据从父页面发送到此iframe(此数据用于计算并在iframe中显示结果),完成后,如果iframe关闭,是否可以将一些计算结果发送回父页面,如果是,请告诉我如何?

对此的任何启发都非常感谢,我非常喜欢这个。

感谢

1 个答案:

答案 0 :(得分:1)

Fancybox v2.x需要jQuery v1.6或更高版本才能正常运行。目前你有:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

请改为尝试:

<script src="http://code.jquery.com/jquery-latest.js"></script>