FancyBox with Vimeo not working

Question

I have followed the instructions here: fancybox 2.0.4 and Vimeo to try and get the videos to open as a lightbox but I still can't get the fancy box to work. Any ideas?

Page with videos here: http://kodiakgroup.com/clients.php

HTML:

<div class="lightbox-client" style="margin-right: 20px;">
                            <a href="http://player.vimeo.com/video/65867546?title=0&amp;byline=0&amp;portrait=0" class="lightbox"><img src="/images/thumb-video-carlton.jpg" /><br /><br />Carlton-Bates</a>
                        </div>
                        <div class="lightbox-client">
                            <a href="http://player.vimeo.com/video/65867545?title=0&amp;byline=0&amp;portrait=0" class="lightbox"><img src="/images/thumb-video-arris.jpg" /><br /><br />Arris</a>
                        </div>

Javascript near the bottom:

<!--script for lightbox-->
                        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
                        <script type="text/javascript" src="/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
                        <script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
                        <link rel="stylesheet" type="text/css" href="/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
                        <script type="text/javascript">
                            $(document).ready(function() {
                                $(".lightbox").fancybox({
                                    width: 400,
                                    height: 225,
                                    type: 'iframe',
                                    fitToView : false
                                });
                            });
                        </script>

Error:

Uncaught TypeError: Cannot read property 'msie' of undefined jquery.fancybox-1.3.4.pack.js:18
Uncaught TypeError: Object [object Object] has no method 'fancybox'

see http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read — Tamil Selvan C, May 13 '13 at 02:43

score 0 · Accepted Answer · answered May 13 '13 at 02:46

0

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

Remove 1 instance of jQuery (you are loading it twice) and load your scripts in the following order:

//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
/js/fancybox/jquery.fancybox-1.3.4.pack.js
/js/fancybox/jquery.mousewheel-3.0.4.pack.js

(Remove 2nd instance of //ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js)

answered May 13 '13 at 02:46

Francis Kim

4,235
4
36
51

You are right in addition to @tamil. It didn't work just switching the code around. I had to change the first Jquery call to version 1.8.3 – CaitlinHavener May 13 '13 at 03:00

FancyBox with Vimeo not working

1 Answers1