Lightboxes, Liteboxes, Greyboxes and Fancyboxes, we have seen them all by now and they all work kind of well. However, they are not very original and work in pretty much the same way. If you want something new and original, yet still oldschool and simple, say hello to the latest addition to the slideshow plugins – DiaProjector.

Remember watching photos with the help of these slides? All you needed was a screen, a diaprojector machine and a ton of slides and you were in for hours of fun with your friends or family. This neat jQuery plugin is almost as fun! At least it’s trying to be, simulating the very same old fuzzy diaprojector feeling. Try it out here on our site and then download it to use on your own site. Please drop a line here when you have it running or have some questions/comments

The plugin should work in Internet Explorer 7+, Firefox, Opera and Safari.

Sites that are using the script at the moment are:
- Monkey Agency

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/