Fancybox doesn't initialize when images are clicked

Question

The Fancybox isn't initializing it is only opening image file in the browser.

I'm working on a portfolio gallery for a tattoo artist and using Fancybox to display the images, however, when I click on the images it just goes to the image file on the server and no lightbox shows. I have everything linked correctly, there aren't any errors. This has been driving me crazy for too long now. Any help is much appreciated.

Website: http://jessetattoo.com/testing/portfolio.html

Answer 1

i view the site and give me the next error:

Uncaught TypeError: Object [object Object] has no method 'fancybox'

this could be for the load script is wrong. I see in the head of the document and this script is empty:

<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js"></script> 

you must load the source to execute the fancybox method.

Answer 2

There are two problems with the page:

1. As pointed out in the comments above, the script and stylesheet file paths are wrong, they must be /testing/fancybox/... or fancybox/...
2. In the script you use on the page, you address the images using $("a.group"). You have to use $("a.fancybox") instead, because the selector you use works on the class value, not the rel value (documentation).

An alternative approach for the second point would be using $('a[rel="group"]') as the element selector (documentation).