Why isn't fancybox working in this code snippet?

Question

Alright, trying to use fancybox to load an image and it just isn't working. Anything obvious I'm missing here?

<!DOCTYPE html>
<html>
<head>
    <title>fancybox test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css"></link>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(function () {
            $.fancybox.open([
                {
                    href: "http://s3.amazonaws.com/media.vast.com/carstory/upload-745916ec-fcf9-4289-b2ff-4606f4cc521c",
                    title: 'test'
                }
            ]);
        });
    </script>
</body>
</html>

Also check http://fancyapps.com/fancybox/#support ==> "FAQ" tab ==> No. 5 — JFK, Aug 21 '14 at 04:35
That was EXACTLY it. I had hoped it would be smart enough to use the content-type header of the response but I guess not. Setting type: image worked. — Eric, Aug 21 '14 at 21:29
If you want to make that an answer I'll go ahead and accept it. — Eric, Aug 21 '14 at 21:29
No need to answer again, but if you want to vote up my other answer http://stackoverflow.com/a/17554660/1055987 would be great ;) — JFK, Aug 22 '14 at 00:10

score 0 · Answer 1 · answered Aug 21 '14 at 00:39

0

Try using a document.ready instead:

<script type="text/javascript">

    $(document).ready(function () {
            $.fancybox({
                'width': '50%',
                'height': '50%',
                'autoScale': true,
                'transitionIn': 'fade',
                'transitionOut': 'fade',
                'type': 'iframe',
                'href': 'http://s3.amazonaws.com/media.vast.com/carstory/upload-745916ec-fcf9-4289-b2ff-4606f4cc521c',
                'title': 'test'
            });
    });

    </script>

answered Aug 21 '14 at 00:39

ml242

109
13

2

`$(function (){...});` is equivalent to `$(document).ready(function(){...})` http://api.jquery.com/ready/ – JFK Aug 21 '14 at 04:33
Yeah that shouldn't matter... It's the same behavior. Thanks though. – Eric Aug 21 '14 at 21:27
True that, sorry. Then maybe the only difference is that you need to put the href in apostrophes, like so: 'href': 'http://s3.amazonaws.com/media.vast.com/carstory/upload-745916ec-fcf9-4289-b2ff-4606f4cc521c', It worked on my machine when I tried it with your code. Sometimes it's just a little syntax thing............ – ml242 Aug 22 '14 at 22:54

Why isn't fancybox working in this code snippet?

1 Answers1