Home > jQuery > jQuery + Fancybox + Vimeo PlugIn

jQuery + Fancybox + Vimeo PlugIn

February 3rd, 2012 Leave a comment Go to comments

Just a small jQuery plugin that I wrote to quickly add playing of vimeo clips in a fancybox (unobtrusive).

(function ($) {
    $.fn.vimeoInFancybox = function (options) {
        var opts = $.extend({}, $.fn.vimeoInFancybox.defaults, options);
 
        $(this).each(function () {
            var url = $(this).attr("href");
            var optionRegex = new RegExp(".*?/([\\d]+)$");
            var vimeoId = optionRegex.exec(url)[1];
            var playerUrl = "http://player.vimeo.com/video/" + vimeoId;
 
            $(this).fancybox({
                href: playerUrl,
                type: 'iframe',
                width: opts.width,
                height: opts.height
            });
        });
    };
 
    $.fn.vimeoInFancybox.defaults = {
        width: 640,
        height: 480
    };
 
})(jQuery);
 
$(function () {
    $("a.fancybox-vimeo").vimeoInFancybox();
});

Example: (Just include the js on the page in a javascript tag or in a separate file that is included)

<a href="http://vimeo.com/1084537" class="fancybox-vimeo">Add image here if you want</a>
Categories: jQuery Tags:
  1. No comments yet.
  1. No trackbacks yet.

Time limit is exhausted. Please reload CAPTCHA.