Code That Matters : Jquery image selector Facebook style

Jquery image selector Facebook style

by bjorn February 3rd, 2010

In late 2008, the guys over at emposha wrote an excellent image selector for jQuery. It works very similar to the friend chooser on Facebook. However, I wanted a way to limit the selections to only one friend/picture. With the current code there is no such possibility. So instead of complaining, I simply rewrote some lines in the script. If you want to do the same thing, this is how you do it.

Row 80-84 in “fcbklistselection.js” looks like this:

obj.click(function() {
        addToSelected(obj);                            
        obj.toggleClass("itemselected");
        obj.parents("li").toggleClass("liselected");                     
});

Replace these lines with the following:

obj.click(function() {
 
       //check if this is already selected. in that case it should be deselected
       deselect_this = false;
       if(parseInt(obj.attr("class").indexOf("selected")) > -1) deselect_this = true;
 
       //deselecting all items
       $("li .fcbklist_item").each(function(x, obj2) {
              obj2 = $(obj2);
              obj2.removeClass("itemselected"); 
              obj2.parents("li").removeClass("liselected");
              obj2.parents("li").removeAttr("addedid");
              removeValue(obj2);
              hiddenCheck(obj2);
       });
 
       //if the clicked item should be deselected, do so
       if(!deselect_this)
       {
              addToSelected(obj);                            
              obj.toggleClass("itemselected");
              obj.parents("li").toggleClass("liselected");
       }
});

To get rid of the selected/unselected, simply add “display: none;” below “#filters .selections” in the css file (fcbklistselection.css). Enjoy!

Original demo: http://www.emposha.com/demo/fcbklistselection/
Demo with our solution: http://www.codethatmatters.com/source/fcbkListSelection/

Tags: facebook, javascript, jQuery

2 Responses to “Jquery image selector Facebook style”

EspadaV8 says:

2010/10/05 at 05:03

Just a minor improvement to the above code. Instead of calling

removeValue();
hiddenCheck();

Before you remove the ‘itemselected’ class, just call ‘addToSelected’ and that will do the magic. It also meant that the ‘Selected (1)’ will show the correct number.

Also, instead of doing the .each() for every fcbklist_item, you can just select the ‘itemselected’ ones.

obj.click(function(){
//check if this is already selected. in that case it should be deselected
deselect_this = false;
if(parseInt(obj.attr(”class”).indexOf(”selected”)) > -1)
{
deselect_this = true;
}

//deselecting all items
$(”li .fcbklist_item.itemselected”).each(function(x, obj2)
{
obj2 = $(obj2);
addToSelected(obj2);
obj2.removeClass(”itemselected”);
obj2.parents(”li”).removeClass(”liselected”);
obj2.parents(”li”).removeAttr(”addedid”);
});

//if the clicked item should be deselected, do so
if(!deselect_this)
{
addToSelected(obj);
obj.toggleClass(”itemselected”);
obj.parents(”li”).toggleClass(”liselected”);
}
});
Ruan says:

2011/05/25 at 11:17

Hi Guys,

First of all, to the both of you (Bjorn & EspadaV8), brilliant improvements/alterations to the Image Selector.

However, I have a question.

My knowledge on jQuery is very limited, and I’m having trouble trying to achieve a certain goal.

I’ve implemented the plugin and made a few changes to suit my needs, and all works well. For each list item that is selected, the list item is assigned a unique “id” attribute that corresponds with the row ID I’ve retrieved from a list of people in the database. For example:

Row 1 in database:
ID: 1
Name: John
Surname: Doe.

When the list item (John Doe) is selected, it gets assigned an “id” attribute of “recipient_1″ – the “1″ being the row id of the database.

So in short, all the list items in the entire “fcbklist” unordered list that has an id attribute starting with “recipient_” means that the person is selected as a recipient and added to the recipient list – which is a different div container containing the selected recipients. Each recipient element in the recipient list (they’re all div elements) has a corresponding id attribute which starts with “recipientItem_”, which in this case would be “recipientItem_1″ for John Doe. The recipient element also has a “remove” button that enables the removal of the recipient. So when clicked on, the recipient element is removed from the recipient list via “$(”#recipientItem_” + recipientID).remove();”.

All this works perfectly fine, though the problem I’m facing is that I’m not able to deselect the corresponding list item in the “fcbklist” whenever the “remove” button in the recipient list is clicked.

I’ve tried the following for example:

$.fcbkListSelection.addToSelected(”#recipient_1″);

but I get an error that the function does not exist.

How would I go about calling the “addToSelected” or any other function in the fcbkListSelection plugin from an anchor link in order to deselect the corresponding list item?

Jquery image selector Facebook style

2 Responses to “Jquery image selector Facebook style”

Leave a Reply