"Selectable thumbnail list"
Bootstrap 3.2.0 Snippet by ggondim

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
// 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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 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);
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: