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();
}); |
(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> |
<a href="http://vimeo.com/1084537" class="fancybox-vimeo">Add image here if you want</a>
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);
}
);
}
);
}); |
$(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);
}
);
}
);
});