jQuery lightbox plugins not working (Wordpress)

Question

I am totally perplexed. I've tried maybe 10 different WordPress plugins to try to get a lightbox playing Vimeo. None are working.

I'm manually uploading fancybox 2 to a website I'm building and have followed all of the instructions (as far as I know). It seems like the jQuery isn't functioning, though all the links are loading.

I'm working with this last example (media helper) to try to get it to work.

HTML

    <iframe src="http://player.vimeo.com/video/65191942?title=0&amp;byline=0&amp;portrait=0&amp;color=dd4c23" width="500" height="282" frameborder="0" class="fancybox-media" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p>

And javascript is just before the </body> tag is

<script>
$(document).ready(function() {
    $('.fancybox-media').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        helpers : {
            media : { true }
        }
    });
});
</script>

Again, all css and js files are called in the header just fine.

And you can see it up and running here.

score 0 · Accepted Answer · answered Jul 21 '13 at 01:36

0

Did you check the console for errors?

I can see these two:

Uncaught TypeError: Cannot call method 'getElementsByClassName' of null new.stevenspiel.com/compositions/:137
Uncaught TypeError: Object [object Object] has no method 'fancybox'

You should fix this error first.

If you look at line 137, you see this:

var $body = document.body
    , $menu_trigger = $body.getElementsByClassName('menu-trigger')[0];

looks like you have a "," instead of a ";" to end the first line.

answered Jul 21 '13 at 01:36

phil

1,940
1
13
13

Awesome. I cleared the errors and now I am able to get some pictures working with the lightbox http://new.stevenspiel.com/compositions, but still Vimeo is taking me to another website! Do you have any other ideas? – stevenspiel Jul 21 '13 at 03:49
Yep. Looking at the docs, it doesn't mention videos, only images. Try to use the "iframe" or the "inline" type for the vimeo one: http://fancybox.net/howto – phil Jul 21 '13 at 04:19
@mr.musicman : try this format in the script `helpers : {media: true}` – JFK Jul 21 '13 at 04:27
@mr.musicman : it seems that you edited the [fancybox media file](http://new.stevenspiel.com/wp-content/themes/Photum/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6) and there you don't have any `.fancybox-media` selector (used in your vimeo link) bound to fancybox – JFK Jul 21 '13 at 04:35
ok, I switched to iframe, added `media:true` to my footer script, re-uploaded the [fancybox media file](http://new.stevenspiel.com/wp-content/themes/Photum/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6), and added the `class="fancybox-media"` to my iframe. But it's still not triggering a lightbox. Did I cover everything? – stevenspiel Jul 22 '13 at 15:27
After doing a search online, I saw someone with a similar console error I was getting and they had posted it [here](http://stackoverflow.com/questions/3992054/fancybox-is-not-a-function) Turns out I had another jquery script in my footer. Once I took it out, it worked great. Thanks for all the help. – stevenspiel Jul 22 '13 at 15:56
@jfk having trouble with the color parameter. any ideas? http://stackoverflow.com/questions/17793108/fancybox-vimeo-iframe-color-parameters – stevenspiel Jul 22 '13 at 16:51
right now I'm seeing "Uncaught SyntaxError: Unexpected token : on line 114" because you haven't put a comma on the previous line. the previous line should be "fullscreen : 1," not just "fullscreen : 1" – phil Jul 23 '13 at 03:03

jQuery lightbox plugins not working (Wordpress)

1 Answers1