"ImagePicker Example"
Bootstrap 3.3.0 Snippet by XhamirM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="picker">
<select class="image-picker show-html">
<option value=""></option>
<option data-img-src="http://placekitten.com/300/200" value="1">Cute Kitten 1</option>
<option data-img-src="http://placekitten.com/150/200" value="2">Cute Kitten 2</option>
<option data-img-src="http://placekitten.com/400/200" value="3">Cute Kitten 3</option>
</select>
</div>
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
ul.thumbnails.image_picker_selector {
overflow: auto;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 0px;
margin: 0px; }
ul.thumbnails.image_picker_selector ul {
overflow: auto;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 0px;
margin: 0px; }
ul.thumbnails.image_picker_selector li.group_title {
float: none; }
ul.thumbnails.image_picker_selector li {
margin: 0px 12px 12px 0px;
float: left; }
ul.thumbnails.image_picker_selector li .thumbnail {
padding: 6px;
border: 1px solid #dddddd;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none; }
ul.thumbnails.image_picker_selector li .thumbnail img {
-webkit-user-drag: none; }
ul.thumbnails.image_picker_selector li .thumbnail.selected {
background: #0088cc; }
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
// Image Picker
// by Rodrigo Vera
//
// Version 0.2.4
// Full source at https://github.com/rvera/image-picker
// MIT License, https://github.com/rvera/image-picker/blob/master/LICENSE
// Generated by CoffeeScript 1.4.0
(function() {
var ImagePicker, ImagePickerOption, both_array_are_equal, sanitized_options,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
jQuery.fn.extend({
imagepicker: function(opts) {
if (opts == null) {
opts = {};
}
return this.each(function() {
var select;
select = jQuery(this);
if (select.data("picker")) {
select.data("picker").destroy();
}
select.data("picker", new ImagePicker(this, sanitized_options(opts)));
if (opts.initialized != null) {
return opts.initialized.call(select.data("picker"));
}
});
}
});
sanitized_options = function(opts) {
var default_options;
default_options = {
hide_select: true,
show_label: false,
initialized: void 0,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: