$(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 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");
}
}
}
}
//======================== END Shift + Click ========================//
$(this).addClass("last_clicking");
//$.cookie('last_click', current_position);
});
$("#save_gallery").click(function() {
var allVals = [];
$("#gallery_thumb div a:[data-selected=1]").each(function() {
allVals.push($(this).attr("data-number"));
});
if (allVals != "") {
alert("Selected images is " + allVals);
} else {
alert("Please select images.");
}
});
});
<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>
<div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_13" data-number="13" data-selected="0">13</a></div>
<div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_14" data-number="14" data-selected="0">14</a></div>
<div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_15" data-number="15" data-selected="0">15</a></div>
<div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_16" data-number="16" data-selected="0">16</a></div>
<div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_17" data-number="17" data-selected="0">17</a></div>
<div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_18" data-number="18" data-selected="0">18</a></div>
<div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_19" data-number="19" data-selected="0">19</a></div>
<div class="col-lg-1 col-md-1 col-sm-4 col-xs-4"><a class="thumbnail" id="thumb_20" data-number="20" data-selected="0">20</a></div>
</div>
<div class="container row">
<button type="button" class="btn btn-primary" id="save_gallery">SAVE</button>
</div>
</div>
</body>
.selected{
border-color:#428bca !important;
}
#gallery_thumb div a{
text-align: center;
background-color: #ddd;
border: 4px #fff solid;
}