Multi selection like Gmail

Select multi pal html element like Gmail inbox

by Krupal Patel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<body class="jumbotron">
    <div class="container">
        <div class="row" id="gallery_thumb">
            <div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_1" data-number="1" data-selected="0">1</a></div>
            <div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_2" data-number="2" data-selected="0">2</a></div>
            <div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_3" data-number="3" data-selected="0">3</a></div>
            <div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_4" data-number="4" data-selected="0">4</a></div>
            <div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_5" data-number="5" data-selected="0">5</a></div>
            <div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_6" data-number="6" data-selected="0">6</a></div>
            <div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_7" data-number="7" data-selected="0">7</a></div>
            <div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_8" data-number="8" data-selected="0">8</a></div>
            <div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_9" data-number="9" data-selected="0">9</a></div>
            <div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_10" data-number="10" data-selected="0">10</a></div>
            <div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_11" data-number="11" data-selected="0">11</a></div>
            <div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_12" data-number="12" data-selected="0">12</a></div>
        ...

CSS

.selected{
	border-color:#428bca !important;
}

#gallery_thumb div a{
	text-align: center;
	background-color: #ddd;
	border: 4px #fff solid;
}

JavaScript

$(document).ready(function(e) {

    $("#gallery_thumb div a").click(function(e) {

        var is_click = $(this).attr("data-selected");
        var current_position = parseInt($(this).attr("data-number"));
        var last_click = parseInt($(".last_clicking").attr('data-number'));
        var lclick = $(".last_clicking").attr("id");
        $("#" + lclick).removeClass("last_clicking");

        if (is_click != 1) {
            $(this).addClass("selected");
            $(this).attr("data-selected", "1");
        } else {
            $(this).removeClass("selected");
            $(this).attr("data-selected", "0");
        }

        //======================== START Shift + Click ========================//
        if (e.shiftKey) {
            //====================== Step 1 ======================//
            if (current_position > last_click) {
                var current_on_off = $("#gallery_thumb div a:[data-number=" + current_position + "]").attr("data-selected");
                for (var i = last_click; i < current_position; i++) {
                    if (current_on_off == 1) {
                        $("#gallery_thumb div a:[data-number=" + i + "]").addClass("selected");
                        $("#gallery_thumb div a:[data-number=" + i + "]").attr("data-selected", "1");
                    } else {
                        $("#gallery_thumb div a:[data-number=" + i + "]").removeClass("selected");
                        $("#gallery_thumb div a:[data-number=" + i + "]").attr("data-selected", "0");
                    }
                }

            }

            //====================== Step 2 ======================//
            if (current_position < last_click) {
                var current_on_off = $("#gallery_thumb div a:[data-number=" + last_click + "]").attr("data-selected");
                for (var i = current_position; i < last_click; i++) {
                    if (current_on_off == 1) {
                        $("#gallery_thumb div...