Blame view
custom.js
3.18 KB
53b83aa9e
first commit
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
(function ( $ ) {
$.fn.imagePicker = function( options ) {
// Define plugin options
var settings = $.extend({
// Input name attribute
name: "",
// Classes for styling the input
class: "form-control btn btn-default btn-block",
// Icon which displays in center of input
icon: "glyphicon glyphicon-plus"
}, options );
// Create an input inside each matched element
return this.each(function() {
$(this).html(create_btn(this, settings));
});
};
// Private function for creating the input element
function create_btn(that, settings) {
// The input icon element
//var picker_btn_icon = $('<i class="'+settings.icon+'"></i>');
var picker_btn_icon = $('<img src="img/12.jpg" width="100%" />');
// The actual file input which stays hidden
var picker_btn_input = $('<input type="file" name="'+settings.name+'" />');
// The actual element displayed
var picker_btn = $('<div class="'+settings.class+' img-upload-btn" style="border-radius: 0 0 4px 4px;"></div>')
.append(picker_btn_icon)
.append(picker_btn_input);
// File load listener
picker_btn_input.change(function() {
if ($(this).prop('files')[0]) {
// Use FileReader to get file
var reader = new FileReader();
// Create a preview once image has loaded
reader.onload = function(e) {
var preview = create_preview(that, e.target.result, settings);
$(that).html(preview);
}
// Load image
reader.readAsDataURL(picker_btn_input.prop('files')[0]);
}
});
return picker_btn
};
// Private function for creating a preview element
function create_preview(that, src, settings) {
// The preview image
var picker_preview_image = $('<img src="'+src+'" class="img-responsive img-rounded" />');
// The remove image button
var picker_preview_remove = $('<button class="btn btn-link"><small>Remove</small></button>');
// The preview element
var picker_preview = $('<div class="text-center"></div>')
.append(picker_preview_image)
.append(picker_preview_remove);
// Remove image listener
picker_preview_remove.click(function() {
var btn = create_btn(that, settings);
$(that).html(btn);
});
return picker_preview;
};
}( jQuery ));
$(document).ready(function() {
$('.img-picker').imagePicker({name: 'images'});
})
function move() {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
};
|