We're growing into something new. Read More
pinceladasdaweb

Pedro Rogério de Assis Lemes


Discussion

Last.fm Recent Tracks

Get User Recent Tracks in Last.fm with jQuery and Handlebars.

Discussion

Dribbble

Grab Dribbble feed with jQuery and Handlebars

Discussion

Instagram access token generator

An access token is required by the Instagram API to make user specific queries. I created an application where it is possible to generate an access token without complications for the consultations Instagr.am API Look here:

Discussion

Youtubars

Display Youtube user feed with jQuery and Handlebars Template.

Discussion

Instaphotos

Display Instagram user feed with PHP, jQuery and Handlebars Template

Discussion

JavaScript templating engines

The ultimate list of JavaScript Template Engines

Discussion

Tweetbars

I created a sort of plugin to show the latest tweets from a user with jQuery + Handlebars.js

//HTML
<div class="thumb">
	<a href="http://vimeo.com/22842883" title="Vimeo Lightbox Gallery" rel="lightbox"><span>Play</span></a>
</div>

<div class="thumb">
	<a href="http://vimeo.com/21210984" title="Vimeo Lightbox Gallery" rel="lightbox"><span>Play</span></a>
</div>

//JavaScript
$.fn.center = function (relation) {
	var center_in = (relation) ? $(relation) : $(window);
        
	this.css("position","absolute");
	this.css("top", ( center_in.height() - this.height() ) / 2+center_in.scrollTop() + "px");
	this.css("left", ( center_in.width() - this.width() ) / 2+center_in.scrollLeft() + "px");
	this.css("z-index", "200");
	return this;
};

function vimeoid(url) {
	var vid = url.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/);
	vid = vid[1];
	return vid;
};

(function(){
	$("a[rel='lightbox']").each(function(){
		var that = this,
		url = $(this).attr('href'),
		id = vimeoid(url),
		thumb = $('<img />');
	
		$.getJSON('http://www.vimeo.com/api/v2/video/' + id + '.json?callback=?', {format: "json"}, function(data) {
			thumb.attr({
				"src" : data[0].thumbnail_large,
				"alt" : data[0].title,
				"title" : data[0].title
			});
			$(that).append(thumb);
			$(that).append('<p>'+data[0].title+'</p>')
		});
	});
		
	var $overlay = $('<div id="overlay"></div>');
	var $lightbox = $('<div id="lightbox"><a href="#">[ fechar ]</a><div id="lightbox-inner"></div></div>');
	$("a[rel='lightbox']").click(function(e){
		e.preventDefault();
		var href = $(this).attr('href'),
		id = vimeoid(href);
		$overlay.appendTo('body');
		$lightbox.find('#lightbox-inner').html('<iframe src="http://player.vimeo.com/video/'+id+'?title=0&byline=0&portrait=0" width="650" height="366" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>');
		$lightbox.appendTo('body').center();	
	});
	
	$('#lightbox a').live('click', function(e){
		e.preventDefault();
		$('#overlay').remove();
		$('#lightbox').remove();
	});
}());

Vimeo Lightbox Gallery

If you want to create a Lightbox with videos from Vimeo, this code can help you. Using Regular Expressions caught the ID of Vimeo video, I show its referent thumbnail, and after that show the video in a lightbox.