CODEWITHSUNDEEP
jqueryfancybox
Karl Barker
Karl Barker

Reputation: 11341

jQuery FancyBox initialisation not working

So I have a gallery of photos looking like this:

<div id="gallery">
  <a href="thumb1.jpg" class="fancybox">
    <img class="item"  src="thumb1.jpg">
  </a>
  ...
</div>

I initialise fancybox on my image links like so...

jQuery(document).ready(function() {
    jQuery('.fancybox').fancybox();
});

...but nothing happens - clicking the images in my gallery simply links to the href'd image.

I get no errors from the Chrome console, and jQuery('.fancybox') correctly selects all my <a> elements.

Any ideas why fancybox seemingly does not work?

Upvotes: 0

Views: 1595

Answers (2)

Sparky
Sparky

Reputation: 98728

Make sure you're using the latest versions of FancyBox and jQuery.

Upvotes: 2

JFK
JFK

Reputation: 41143

Your check list (load the files in this order) :

  1. Load jQuery js file first. Make sure you have a single instance of this file, ideally the latest version (some other plugins include a version of jQuery that is loaded when the plugin is installed)

  2. Load your fancybox's js and css files. Check that the (full) paths are correct (if you explore the source code and click on the links of those files, you should see the source script, otherwise the html of an error 404 page).

  3. Load your custom fancybox script. Also check that all your <script> tags are inside of either, the <head> or the <body> tags (I have seen some code where the scripts are in between)

  4. Last, check that your document has a proper DOCTYPE. Also check for syntax errors and tags not properly closed.

See a full example with the same initialization as in your code above.

Upvotes: 5

Related Questions