<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="container">
<div class="picker" hidden>
<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>
<div class="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
</div><!--.row-->
</div><!--.item-->
<div class="item">
<select class="row kittens">
<div class="col-md-3"><option data-img-src="http://placekitten.com/300/200" value="1">Cute Kitten 1</option></div>
<div class="col-md-3"><option data-img-src="http://placekitten.com/150/200" value="2">Cute Kitten 2</option></div>
<div class="col-md-3"><option data-img-src="http://placekitten.com/400/200" value="3">Cute Kitten 3</option></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
</select><!--.row-->
</div><!--.item-->
<div class="item">
<div class="row">
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
</div><!--.row-->
</div><!--.item-->
</div><!--.carousel-inner-->
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
</div><!--.Carousel-->
</div>
</div>
</div><!--.container-->
body{padding-top:20px;}
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
/* The controlsy */
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
/* The indicators */
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
/* The colour of the indicators */
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
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; }
$(document).ready(function() {
$('#Carousel').carousel({
interval: 5000
})
});
// 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,
changed: void 0,
clicked: void 0,
selected: void 0,
limit: void 0,
limit_reached: void 0
};
return jQuery.extend(default_options, opts);
};
both_array_are_equal = function(a, b) {
return jQuery(a).not(b).length === 0 && jQuery(b).not(a).length === 0;
};
ImagePicker = (function() {
function ImagePicker(select_element, opts) {
this.opts = opts != null ? opts : {};
this.sync_picker_with_select = __bind(this.sync_picker_with_select, this);
this.select = jQuery(select_element);
this.multiple = this.select.attr("multiple") === "multiple";
if (this.select.data("limit") != null) {
this.opts.limit = parseInt(this.select.data("limit"));
}
this.build_and_append_picker();
}
ImagePicker.prototype.destroy = function() {
var option, _i, _len, _ref;
_ref = this.picker_options;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
option = _ref[_i];
option.destroy();
}
this.picker.remove();
this.select.unbind("change");
this.select.removeData("picker");
return this.select.show();
};
ImagePicker.prototype.build_and_append_picker = function() {
var _this = this;
if (this.opts.hide_select) {
this.select.hide();
}
this.select.change(function() {
return _this.sync_picker_with_select();
});
if (this.picker != null) {
this.picker.remove();
}
this.create_picker();
this.select.after(this.picker);
return this.sync_picker_with_select();
};
ImagePicker.prototype.sync_picker_with_select = function() {
var option, _i, _len, _ref, _results;
_ref = this.picker_options;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
option = _ref[_i];
if (option.is_selected()) {
_results.push(option.mark_as_selected());
} else {
_results.push(option.unmark_as_selected());
}
}
return _results;
};
ImagePicker.prototype.create_picker = function() {
this.picker = jQuery("<ul class='thumbnails image_picker_selector'></ul>");
this.picker_options = [];
this.recursively_parse_option_groups(this.select, this.picker);
return this.picker;
};
ImagePicker.prototype.recursively_parse_option_groups = function(scoped_dom, target_container) {
var container, option, option_group, _i, _j, _len, _len1, _ref, _ref1, _results;
_ref = scoped_dom.children("optgroup");
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
option_group = _ref[_i];
option_group = jQuery(option_group);
container = jQuery("<ul></ul>");
container.append(jQuery("<li class='group_title'>" + (option_group.attr("label")) + "</li>"));
target_container.append(jQuery("<li>").append(container));
this.recursively_parse_option_groups(option_group, container);
}
_ref1 = (function() {
var _k, _len1, _ref1, _results1;
_ref1 = scoped_dom.children("option");
_results1 = [];
for (_k = 0, _len1 = _ref1.length; _k < _len1; _k++) {
option = _ref1[_k];
_results1.push(new ImagePickerOption(option, this, this.opts));
}
return _results1;
}).call(this);
_results = [];
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
option = _ref1[_j];
this.picker_options.push(option);
if (!option.has_image()) {
continue;
}
_results.push(target_container.append(option.node));
}
return _results;
};
ImagePicker.prototype.has_implicit_blanks = function() {
var option;
return ((function() {
var _i, _len, _ref, _results;
_ref = this.picker_options;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
option = _ref[_i];
if (option.is_blank() && !option.has_image()) {
_results.push(option);
}
}
return _results;
}).call(this)).length > 0;
};
ImagePicker.prototype.selected_values = function() {
if (this.multiple) {
return this.select.val() || [];
} else {
return [this.select.val()];
}
};
ImagePicker.prototype.toggle = function(imagepicker_option) {
var new_values, old_values, selected_value;
old_values = this.selected_values();
selected_value = imagepicker_option.value().toString();
if (this.multiple) {
if (__indexOf.call(this.selected_values(), selected_value) >= 0) {
new_values = this.selected_values();
new_values.splice(jQuery.inArray(selected_value, old_values), 1);
this.select.val([]);
this.select.val(new_values);
} else {
if ((this.opts.limit != null) && this.selected_values().length >= this.opts.limit) {
if (this.opts.limit_reached != null) {
this.opts.limit_reached.call(this.select);
}
} else {
this.select.val(this.selected_values().concat(selected_value));
}
}
} else {
if (this.has_implicit_blanks() && imagepicker_option.is_selected()) {
this.select.val("");
} else {
this.select.val(selected_value);
}
}
if (!both_array_are_equal(old_values, this.selected_values())) {
this.select.change();
if (this.opts.changed != null) {
return this.opts.changed.call(this.select, old_values, this.selected_values());
}
}
};
return ImagePicker;
})();
ImagePickerOption = (function() {
function ImagePickerOption(option_element, picker, opts) {
this.picker = picker;
this.opts = opts != null ? opts : {};
this.clicked = __bind(this.clicked, this);
this.option = jQuery(option_element);
this.create_node();
}
ImagePickerOption.prototype.destroy = function() {
return this.node.find(".thumbnail").unbind();
};
ImagePickerOption.prototype.has_image = function() {
return this.option.data("img-src") != null;
};
ImagePickerOption.prototype.is_blank = function() {
return !((this.value() != null) && this.value() !== "");
};
ImagePickerOption.prototype.is_selected = function() {
var select_value;
select_value = this.picker.select.val();
if (this.picker.multiple) {
return jQuery.inArray(this.value(), select_value) >= 0;
} else {
return this.value() === select_value;
}
};
ImagePickerOption.prototype.mark_as_selected = function() {
return this.node.find(".thumbnail").addClass("selected");
};
ImagePickerOption.prototype.unmark_as_selected = function() {
return this.node.find(".thumbnail").removeClass("selected");
};
ImagePickerOption.prototype.value = function() {
return this.option.val();
};
ImagePickerOption.prototype.label = function() {
if (this.option.data("img-label")) {
return this.option.data("img-label");
} else {
return this.option.text();
}
};
ImagePickerOption.prototype.clicked = function() {
this.picker.toggle(this);
if (this.opts.clicked != null) {
this.opts.clicked.call(this.picker.select, this);
}
if ((this.opts.selected != null) && this.is_selected()) {
return this.opts.selected.call(this.picker.select, this);
}
};
ImagePickerOption.prototype.create_node = function() {
var image, thumbnail;
this.node = jQuery("<li/>");
image = jQuery("<img class='image_picker_image'/>");
image.attr("src", this.option.data("img-src"));
thumbnail = jQuery("<div class='thumbnail'>");
thumbnail.click({
option: this
}, function(event) {
return event.data.option.clicked();
});
thumbnail.append(image);
if (this.opts.show_label) {
thumbnail.append(jQuery("<p/>").html(this.label()));
}
this.node.append(thumbnail);
return this.node;
};
return ImagePickerOption;
})();
}).call(this);
$(function(){
$( document ).ready(function() {
$("select").imagepicker({
show_label : true
})
$(".kittens").imagepicker({
show_label : true
})
});
});
