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

My browser prints a bunch of "404 Not Found" messages for files that are supposed to be located in http://jessetattoo.com/fancybox/source and http://jessetattoo.com/fancybox/lib, and, as a result of it, that `$(...).fancybox` is not a function. — Abrixas2, Aug 06 '13 at 18:46
I would suggest adding those and than come back if you still have a problem. Don't forget the CSS, fancybox always seem to not work without it. — putvande, Aug 06 '13 at 18:47
Your calls to the fancybox files (/fancybox/source/jquery.fancybox.pack.js for instance) return 404 errors .... so the files are not in the place you told your document they are — JFK, Aug 06 '13 at 18:47
They happen to be here http://jessetattoo.com/testing/fancybox/source/jquery.fancybox.pack.js (under the "testing" subdirectory) so you either use relative paths or correct absolute paths — JFK, Aug 06 '13 at 18:51

score 0 · Answer 1 · answered Aug 06 '13 at 18:53

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.

score 0 · Answer 2 · answered Aug 06 '13 at 19:32

There are two problems with the page:

As pointed out in the comments above, the script and stylesheet file paths are wrong, they must be /testing/fancybox/... or fancybox/...
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).

I got it working, thank you @Abrixas2! I changed $("a.group") to $("a.fancybox") and that's what worked. — Megan Fiona Simpson, Aug 06 '13 at 22:19

Fancybox doesn't initialize when images are clicked

2 Answers2