JQuery Fancybox not working

Question

I've followed the directions, but Fancybox isn't working right. I think I need some extra eyes to tell me what I am doing wrong.

Any Ideas?

HTML

The code:

<h1><a id="v" class= "letter fancybox" data-fancybox-group="group" href="http://placekitten.com/500/500">V</a></h1>

The References:

CSS (top of page):

<link rel="stylesheet" href="home/css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

JS (bottom of page, including other js):

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<!-- FancyBox -->
<script type="text/javascript" src="home/js/jquery.fancybox.pack.js?v=2.1.5"></script>

JS

main.js (inside of document ready):

$(".fancybox").fancybox({
    openEffect  : 'fade',
    closeEffect : 'fade'
});

I think I should also mention that I didn't put the entire project into one folder. I put the .css and .js files in separate CSS and JS directories and only included the two referenced files. I'm wondering if that has anything to do with it and if I should just copy over the source folder and keep everything in there.

Answer 1

You should add type field in your Fancybox' config. Fancybox tries to detect type of content, but when you href to e.g. php script which generates image, Fancybox sometimes can't recognize type of content.

Change:

$(".fancybox").fancybox({
   openEffect  : 'fade',
   closeEffect : 'fade'
});

to:

$(".fancybox").fancybox({
   openEffect  : "fade",
   closeEffect : "fade",
   type : "image"
});

Answer 2

I found my own mistake:

My problem was I was referencing a website in my code (even though it creates an image):

<h1><a id="v" class= "letter fancybox" data-fancybox-group="group" href="http://placekitten.com/500/500">V</a></h1>

It should be something like

href="image.png"