how to get an iframe inside fancybox for shopify page

Question

am trying an simple code to make the floatbox loaded on a shopify page using the following code(which i have tried outside shopify and its working) but how to get this on shopify is my prime question.

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

the other question i have is how can i send data from the parent page to this iframe while loading(this data is used for computing and displaying results in iframe) and after completion, if the iframe is closed, is it possible to send some computed results back to parent page, if yes please tell me how??

any enlightment on this is highly appreciated, am very beginner to this.

thanks

JFK JFK · Accepted Answer · 2012-07-07T20:35:03

Fancybox v2.x requires jQuery v1.6 or later to work properly. Currently you have:

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

Try this instead:

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

how to get an iframe inside fancybox for shopify page

1 Answers