Archive

Archive for the ‘jQuery’ Category

jQuery + Fancybox + Vimeo PlugIn

February 3rd, 2012 No 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:

jQuery fancybox with ajax content.

October 1st, 2010 1 comment

There are several ways to do this I guess. What I wanted was a default css class which I could apply to an anchor tag and have a specific part of the content loaded in fancybox. This is what I came up with. It is also possible to do this with the ajax property of fancybox itself I suppose.

$(function () {
    $("a.ajaxcontent").click(
        function (event) {
            event.preventDefault();
            var url = jQuery(this).attr("href");
 
            $.get(
                url,
                function (data) {
                    var content = jQuery(data).find("#content");
                    $.fancybox(content);
                }
            );
        }
    );
});
Categories: jQuery Tags: , ,