Как я могу удалить миниатюры?
Я пытаюсь сделать слайд-шоу с изображениями, которые я вставляю. Я уже могу сделать вставку, но я не могу исправить проблему устранения.
Проблема в том, что когда я удаляю изображение, выбранное изображение удаляется, но когда я собираюсь удалить другое, я удаляю 2 изображения, а затем 3 изображения и 4 изображения...
$(document).ready(function() {
var p = 0;
//Check File API support
if (window.File && window.FileList && window.FileReader) {
$('#filePhoto').change(function(event) {
var files = event.target.files; //FileList object
var output = document.getElementById("result");
var slides = document.getElementsByClassName("teste");
var column = document.getElementById("column");
var _i = 1;
var x = 0;
if (slides.length == 0) {
_i = 1;
} else {
_i = slides.length + 1;
}
for (var i = 0; i < files.length; i++) {
var file = files[i];
//Only pics
// if(!file.type.match('image'))
if (file.type.match('image.*')) {
if (this.files[0].size < 2097152) {
// continue;
var picReader = new FileReader();
picReader.addEventListener("load", function(event) {
var picFile = event.target;
var divs = document.createElement("div");
divs.className = "teste";
$(divs).attr('id', _i);
if (slides.length == 0) {
divs.style.cssText = 'display:block;';
} else {
divs.style.cssText = 'display:none;';
}
divs.innerHTML = "<img class='thumbnail' id=" + (_i + 1) + "_img src='" + picFile.result + "'" +
"title='' />" + "<button class='eli' id='eliminar'><i class='remove icon'></i>x</button>"
output.insertBefore(divs, null);
plusSlides(+1);
var divs2 = document.createElement("div");
for (x = 1; x <= slides.length; x++) {
console.log(slides);
divs2.className = "column2";
$(divs2).attr('id', x + "_");
divs2.innerHTML = "<img class='demo' src='" + picFile.result + "'" +
"title='' onclick='currentSlide(" + x + ")'/>"
column.insertBefore(divs2, null);
}
_i++;
});
//Read the image
$('#clear, #result').show();
picReader.readAsDataURL(file);
} else {
alert("Image Size is too big. Minimum size is 2MB.");
$(this).val("");
}
} else {
alert("You can only upload image file.");
$(this).val("");
}
}
});
$('#eliminar').click(function() {
var a = $(this).parent().attr('id');
// alert(a);
$("#" + a).remove();
console.log($("#" + a));
$("#" + a + "_").remove();
plusSlides(-1);
var elms = $("#column");
var sd = $(".teste");
//console.log($(elms.children()).attr("id"));
$.each(elms.children(), function(k, v) {
$(v).attr("id", (k + 1) + "_");
$(v).attr("onclick", "currentSlide(" + (k + 1) + ")");
});
$.each(sd, function(k1, v1) {
$(v1).attr("id", k1 + 1);
});
});
} else {
console.log("Your browser does not support File API");
}
});
var slides = document.getElementsByClassName("teste");
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("teste");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
if(slides.length!=''){
slides[slideIndex-1].style.display = "block";
}
if(slides.length>1){
$("#next").css("display", "block");
$("#prev").css("display", "block");
}else {
$("#next").css("display", "none");
$("#prev").css("display", "none");
}
}.thumbnail{
width: 100%;
margin:0 auto !important;
float: left;
height:400px !important;
}
#clear{
display:none;
}
.result {
margin:0 auto;
float: left;
width: 100% !important;
position:relative;
overflow:hidden;
width:auto;
height:400px !important;
background:transparent;
border:2px dashed #e8e8e8;
cursor:pointer;
padding:5px;
color:#555;
z-index:3;
font-family:'Segoe UI';
font-weight:bold;
}
.eli{
color: black;
border:1px solid black;
background: none;
position: absolute;
top:30px;
right:5px;
outline: inherit;
margin-bottom: -10px !important;
z-index: 2000000;
}
.column2 {
float: left;
width: 25%;
}
.column {
left:0;
width:1200px;
}
.bstimeslider {
width:500px;
height:40px;
background:#ccc;
position:relative;
}
#leftArrow {
width:40px;
height:40px;
background:#ff0000;
position:absolute;
left:0px;
}
#rightArrow {
width:40px;
height:40px;
background:#ff0000;
position:absolute;
right:0px;
}
/* Next & previous buttons */
.prev,
.next {
display: none;
cursor: pointer;
position: absolute;
width: auto;
padding: 16px;
top:42%;
color: black;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select:none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev {
left: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.demo {
opacity: 0.6;
float: left;
width: 100% !important;
}
.active,
.demo:hover {
opacity: 1;
}
.blok{
display: block !important;
}
.nonee{
display: none!important;
}
.uploader {
position:relative;
overflow:hidden;
width:auto;
height:400px;
background:transparent;
border:2px dashed #e8e8e8;
cursor:pointer;
padding:5px;
color:#555;
z-index:3;
font-family:'Segoe UI';
font-weight:bold;
}
#filePhoto{
display:none;
}
.lol{
position:absolute;
width:100%;
height:402px;
top:-1px;
left:-1px;
border:none;
background-color: #eee;
}
.uploadd {
padding:10px !important;
margin-top:90px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="uploadd">
<div id="uploader" class="uploader ">
<output id="result" class=" lol" />
<label for="filePhoto">
<span id="butao" class="circular ui icon button file-button"
style="position:absolute;top:43%;left:47%;margin-left:3.500
!important;border-radius:100%;background:#2185d0;">
<i style="margin:0 auto;text-align:center;font-size:24px;color:white;"
class="plus icon xa">Add</i>
</span>
</label>
<input class="file" type="file" name="filePhoto" id="filePhoto" multiple/>
<a class="prev" name="prev" id="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" name="next" id="next" onclick="plusSlides(1)">❯</a>
</div>
<output class="column" id="column" name="column" />
</div>