Basic Fancybox code have no effects

Question

I don't understand why this simple code is not running.

I've miss something but i don't see what :

Html :

<span class="test" url="mapage.php">It's a test</span>

Javascript :

 jQuery(function () {
    $(document).ready(function () {

        $('.test').on('click', function () {
            //alert($(this).attr('url'));
            $.fancybox({ 'href': $(this).attr('url') });
        });
    });

});

I don't have any error in firebug.

Fiddle : http://jsfiddle.net/6ZZJH/4/

kasper Taeymans · Answer 1 · 2013-09-27T10:34:38.980

first you have nested document ready functions...

try

$(document).ready(function () {

    $('.test').on('click', function () {
        //alert($(this).attr('url'));
        $.fancybox({ 'href': $(this).attr('url') });
    });
});

or which is shorthand for above.

 $(function () {

        $('.test').on('click', function () {
            //alert($(this).attr('url'));
            $.fancybox({ 'href': $(this).attr('url') });
        });
});

UPDATE Working jsfiddle: http://jsfiddle.net/kasperfish/6ZZJH/9/ if you want to open a url you'll need to specify fancybox type to iframe...

            $(document).ready(function () {

            $('.test').click(function () {

                btn=$(this);

                btn.fancybox({
                    "type": 'iframe',
                    "href": btn.attr('url')
                });


            });
        });

that is because, fancybox is not included in jquery. You have to include it to your html as a script tag. If not it doesn't get loaded. Have a look at the documentation of fancybox — kasper Taeymans, Sep 27 '13 at 09:51

Gurminder Singh · Answer 2 · 2013-09-27T09:53:23.320

  jQuery(function () {
 $(document).ready(function () {

    $('.test').on('click', function () {
        //alert($(this).attr('url'));
        $.fancybox({ 'href': $(this).attr('url') });
    });
 });

});

should be

$(document).ready(function () {
    $('.test').on('click', function () {
        //alert($(this).attr('url'));
        $.fancybox({ 'href': $(this).attr('url') });
    });
 });

And make sure you have included jquery.fancybox.version.js and jquery.fancybox.version.css inside the html.

score 0 · Accepted Answer · answered Sep 27 '13 at 09:59

You have several issues : First: you should write your code like that :

$(function () {
 //your code here
});

It will fire your code only when jQuery is ready.

Secondly, in your case inside your jsfiddle, fancybox lib isn't loaded.

you should add that:

<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

Then finally, your url must be a picture:

Like that:

<span class="test" url="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg">It's a test</span>

Here the jsfiddle : http://jsfiddle.net/5QYGe/1/

I have change the link of jsfiddle, it was yours... sorry for that. — Xiaodoudou, Sep 27 '13 at 10:04
No problem but why it must be an image? If i want to load my page for example, i can't? Thanks for your help — Portekoi, Sep 27 '13 at 10:09
I find my reply : http://stackoverflow.com/questions/11618221/how-do-i-make-fancybox-href-dynamic Thanks ! — Portekoi, Sep 27 '13 at 10:15
fancy box does not have to be loaded in jsfiddle... it should in your own html. Your url doesn't have to be a picture... it can be a normal html page to... in that case you need to specify the type to iframe. see my answer. — kasper Taeymans, Sep 27 '13 at 10:31
You are right, but as I wasn't sure of that; I take that direction ;) — Xiaodoudou, Sep 28 '13 at 00:16

Basic Fancybox code have no effects

3 Answers3