Jquery image selector Facebook style

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/

6 Responses to “Jquery image selector Facebook style”

  • EspadaV8 says:

    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:

    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?

  • Hi, I think your website might be having browser compatibility issues.

    When I look at your website in Ie, it looks fine but when
    opening in Internet Explorer, it has some overlapping.

    I just wanted to give you a quick heads up! Other then that, very good blog!

  • I visited several blogs however the audio feature for audio songs current at this web site is in fact
    superb.

  • Wow, marvelous blog layout! How long have you ever been running
    a blog for? you make running a blog look easy. The overall
    look of your website is magnificent, as neatly
    as the content!

  • One part of the e-mail that was sent tto all Play – Station Network Users really rubbed me
    the wrong way. If you wait a month to pull
    another cedit report, there could already be a severe amount of damage done to your
    crsdit score. Also, keep in mind that you likely will need to buy a computer and television if you don’t already own them; the
    computer is especially critical for your scholwork as you may not have easy access to campus computer labs once you move off campus.

Leave a Reply

*