Bootstrap Selectable thumbnail list


	<div class="container">
	<div class="row">
		<ul class="listrap">
            <li>
                <div class="listrap-toggle">
                    <span></span>
                    <img src="http://lorempixel.com/60/60/people/?v=1" class="img-circle">
                </div>
                <strong>My Lorem Option #1</strong>
            </li>
            <li class="active">
                <div class="listrap-toggle">
                    <span></span>
                    <img src="http://lorempixel.com/60/60/people/?v=2" class="img-circle">
                </div>
                <strong>Your Ipsum Option #2</strong>
            </li>
            <li class="active">
                <div class="listrap-toggle">
                    <span></span>
                    <img src="http://lorempixel.com/60/60/people/?v=3" class="img-circle">
                </div>
                <strong>Their Consectuer Option #3</strong>
            </li>
            <li>
                <div class="listrap-toggle">
                    <span></span>
                    <img src="http://lorempixel.com/60/60/people/?v=4" class="img-circle">
                </div>
                <strong>His Adjascent Option #4</strong>
            </li>
            <li class="active">
                <div class="listrap-toggle">
                    <span></span>
                    <img src="http://lorempixel.com/60/60/people/?v=5" class="img-circle">
                </div>
                <strong>Her Split Option #5</strong>
            </li>
        </ul>
	</div>
</div>
	<script type="text/javascript"></script>

    /* 
// Listrap v1.0, by Gustavo Gondim (http://github.com/ggondim)
// Licenced under MIT License
// For updates, improvements and issues, see https://github.com/inosoftbr/listrap
*/

.listrap {
            list-style-type: none;
            margin: 0;
            padding: 0;
            cursor: default;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .listrap li {
            margin: 0;
            padding: 10px;
        }

        .listrap li.active, .listrap li:hover {
            background-color: #d9edf7;
        }

        .listrap strong {
            margin-left: 10px;
        }

        .listrap .listrap-toggle {
            display: inline-block;
            width: 60px;
            height: 60px;
        }

        .listrap .listrap-toggle span {
            background-color: #428bca;
            opacity: 0.8;
            z-index: 100;
            width: 60px;
            height: 60px;
            display: none;
            position: absolute;
            border-radius: 50%;
            text-align: center;
            line-height: 60px;
            vertical-align: middle;
            color: #ffffff;
        }

        .listrap .listrap-toggle span:before {
            font-family: 'Glyphicons Halflings';
            content: "\e013";
        }

        .listrap li.active .listrap-toggle span {
            display: block;
        }
    

	// Listrap v1.0, by Gustavo Gondim (http://github.com/ggondim)
// Licenced under MIT License
// For updates, improvements and issues, see https://github.com/inosoftbr/listrap

jQuery.fn.extend({
    listrap: function () {
        var listrap = this;
        listrap.getSelection = function () {
            var selection = new Array();
            listrap.children("li.active").each(function (ix, el) {
                selection.push($(el)[0]);
            });
            return selection;
        }
        var toggle = "li .listrap-toggle ";
        var selectionChanged = function() {
            $(this).parent().parent().toggleClass("active");
            listrap.trigger("selection-changed", [listrap.getSelection()]);
        }
        $(listrap).find(toggle + "img").on("click", selectionChanged);
        $(listrap).find(toggle + "span").on("click", selectionChanged);
        return listrap;
    }
});
$(document).ready(function () {
    $(".listrap").listrap().on("selection-changed", function (event, selection) {
        console.log(selection);
    });
});