Love chooser style demo

This is the demo of Custom Facebook Friend chooser using the love css.

In this examlpe I will show you how easy it is to change the Friend Chooser default texts

Inline Chooser Demo with custom submit button

You can easily change friend chooser CSS styles and also you can edit the generated HTML markup for your chooser. For example you can add a transparent png as a mask on top of the user photo to make it look like a heart.

//change friend chooser texts
var lang = {
    title: "Love friend chooser",
    search: "Search for your love...",
    noFriends: "You have no friends to love",
    submit: "Love them all",
    cancel: "Cancel",
    selectedFrom: "loved <b>{0}</b> from max <b>{1}</b>;",
    close: "x",
    login: "Log in to love"    
}
                
loadInlineChooser(lang);
loadPopupChooser(lang);

function loadInlineChooser(lang){
    $('#inline-chooser').friendChooser({ 
        display: "inline",
        max: 3,
        returnData: "name",
        lang: lang,
        onBeforeLoadFriends: function() {
            var mask = $("<div />").addClass("fb-friend-mask");
            this.html.friendPicture.append(mask);
        },
        onSubmit: function(users) { alertSelected(users); }
    });    
}

Popup Chooser Demo

You can use custom animation to show or hide your friend chooser

function loadPopupChooser(lang){
    $('#popup-chooser').friendChooser({
        display: "popup",
        returnData: "name",
        lang: lang,
        onOpen: function() { $(this).slideDown(); },
        onClose: function() { $(this).slideUp(); }, 
        onBeforeLoadFriends: function() {
            var mask = $("<div />").addClass("fb-friend-mask");
            this.html.friendPicture.append(mask);
        },
        onSubmit: function(users) { alertSelected(users); }
    });    
}