jquery-ui-slectable

by codecowboy

HTML

<ol id="selectable">
    <li id="prod_103">
        <img src="http://s3.shareight.com/items/106/252x303/Atelier-61-Black-34-sleeve-blazer.jpg" />
    </li>
    <li id="prod_104">
        <img src="http://s3.shareight.com/items/446/252x303/Atelier-61-Wine-34-sleeve-blazer-black.jpg" />
    </li>
    <li id="prod_102">
        <img src="http://s3.shareight.com/items/106/252x303/Atelier-61-Black-34-sleeve-blazer.jpg" />
    </li>
    <li id="prod_101">
        <img src="http://s3.shareight.com/items/106/252x303/Atelier-61-Black-34-sleeve-blazer.jpg" />
    </li>
</ol>

CSS

#feedback {
    font-size: 1.4em;
}
#selectable .ui-selected {

}

#selectable .ui-selected:after {
filter: hue-rotate(90deg);
}
#selectable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#selectable img{width:80px; height:80px}
#selectable li {
    margin: 2px;
    padding: 1px;
    float: left;
    width: 80px;
    height: 80px;
    border: 1px solid #CCCCCC;
    overflow:hidden
}

JavaScript

$('#selectable').selectable();