CODEWITHSUNDEEP
jqueryfancybox
Portekoi
Portekoi

Reputation: 1147

Basic Fancybox code have no effects

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/

Upvotes: 0

Views: 780

Answers (3)

kasper Taeymans
kasper Taeymans

Reputation: 7026

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')
                });


            });
        });

Upvotes: 2

Xiaodoudou
Xiaodoudou

Reputation: 326

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/

Upvotes: 0

Gurminder Singh
Gurminder Singh

Reputation: 1755

  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.

Upvotes: 0

Related Questions