FancyBox插件不起作用

Question

I have a problem with my fancy box. when I click on a link, the fancy box gets the content but doesn't show the lightbox and jumps to a page that I supposed to get its returned content via Ajax.

HTML :

<a class="butt red medium fancybox" href="http://localhost/food/index.php/food/ajaxExtras?foodId=412">سفارش </a>

JS :

$("a.fancybox").fancybox();

My Result :

Answer 1

from your shapshots, i can say that you havnt added the plugin files for fancy box .

here are the links for jquery fancy box plugins.just add them in between your header tags

http://code.jquery.com/jquery-1.10.2.min.js

js/fancybox-1.3.4/jquery.easing-1.3.pack.js

js/fancybox-1.3.4/jquery.mousewheel-3.0.4.pack.js

kindly see the demo in http://fancybox.net/ for further info

Answer 2

If you are opening an external page you may need to set the type of content , either using an API option like

$("a.fancybox").fancybox({
    type: "ajax" // or "iframe"
});

or using the HTML5 data-fancybox-type attribute in your link like

<a data-fancybox-type="ajax" class="butt red medium fancybox" href="http://localhost/food/index.php/food/ajaxExtras?foodId=412">سفارش </a>

Please notice that most ajax calls require to be tested in a server environment and may not work in localhost.

Also make sure you are wrapping your fancybox script code inside the .ready() method.