Fancybox不起作用

Question

Can't seem to get Fancybox to work - it just links to the 1st pic. I get the error: uncaught typeerror object # an object has no method 'fancybox'.

HTML

<a class="fancybox" data-thumbnail="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/imagecache/timeout_slideshow_player_thumbnail/P1010923.JPG" href="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/imagecache/timeout_492x330/P1010923.JPG"><img alt="" src="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/toclogo.jpg"></a>

<br />

<a class="fancybox" data-thumbnail="http://fancyapps.com/fancybox/demo/2_s.jpg" href="http://fancyapps.com/fancybox/demo/2_b.jpg"></a>​

Javascript

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").attr('rel', 'gallery').fancybox({
            helpers: {
                thumbs: {
                    width: 40,
                    height: 40,
                    source: function(current) {
                        return $(current.element).data('thumbnail');
                    }
                }
            }
        });
    });
</script>

Header

<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.3"></script>

It does seem to be pulling in the external files according to the Source in Chrome's Developer Tools.

Thx

Answer 1

Hmmm. It looks like jquery is loaded twice. Once with

<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

and the other (harder to find)

http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/advagg_js/js_13ec2e29dba08b369ccfdde54d836ec0_8.js

It looks like you're using drupal and with a bit of googling, it sounds like it injects a version of jquery for you (jQuery JavaScript Library v1.3.2)

The reason that error is occuring is the conflict between the two libraries. Try following this update http://drupal.org/project/jquery_update

Answer 2

You're pulling in the two versions of jQuery.

When you execute jQuery(".fancybox").jquery from the console, you get 1.3.2 . Undoubtedly, this is not compatible with fancybox.

jQuery 1.8.2 is loaded via the Google CDN with your explicit script tag request.

jQuery 1.3.2 is loaded as part of http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/advagg_js/js_13ec2e29dba08b369ccfdde54d836ec0_8.js , which comes from Drupal injecting this library for its own purposes.

For future reference, I was able to locate this file by using the Chrome Developer Tools, sorting by file size (largest first) and then looking at the JS files... found it pretty quickly after that.

Answer 3

I was having this same problem and I resolved it by changing the double quotes in the line:

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

To single quotes:

$('.fancybox').fancybox();

Sort of a 'gotcha' since the fancyBox site has double quotes.

Answer 4

if anything does not work:

 parent.window.document.getElementById("fancybox-wrap").style.display = 'none';

This hiding fancybox.