Bootstrap Snippet Selectable thumbnail list using HTML CSS jQuery

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

"Selectable thumbnail list"
Bootstrap 3.2.0 Snippet by ggondim

Related: See More

Questions / Comments:

"Selectable thumbnail list" Bootstrap 3.2.0 Snippet by ggondim

Related: See More

Questions / Comments:

"Selectable thumbnail list"
Bootstrap 3.2.0 Snippet by ggondim