i am trying to show images in lightbox (popup).
after file upload change i have to set source for img tag
below is my js for fileupload change event.
how can i set img tag for slider
(further slider is working).
<!-- for file upload -->
<div class="file-field input-field">
<div class="btn c-btn3Outline">
<span>Upload</span>
<asp:FileUpload ID="fuUpload" runat="server" multiple="multiple" />
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload one or more files" />
</div>
</div>
<!-- image preview before upload -->
<div class="c-inspPhotos c-lightboxPhotos">
<div id="dvPreview" ></div>
</div>
<!-- for slider(lightbox) -->
<div id="myModal" class="modal c-lightbox">
<span class="close cursor" onclick="closeModal();">×</span>
<div class="modal-content" id="img1">
<div class="mySlides">
<img src="">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ContentPlaceHolder1_fuUpload").change(function () {
if (typeof (FileReader) != "undefined") {
var dvPreview = $("#dvPreview");
dvPreview.html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
$($(this)[0].files).each(function () {
var file = $(this);
if (regex.test(file[0].name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
var img = $("<img />");
img.attr("style", "height:75px;width: 75px");
img.attr("src", e.target.result);
img.attr("class", "c-inspPhoto");
img.attr("onclick", "openModal();currentSlide(1);");
dvPreview.append(img);
}
reader.readAsDataURL(file[0]);
} else {
alert(file[0].name + " is not a valid image file.");
dvPreview.html("");
return false;
}
});
} else {
alert("This browser does not support HTML5 FileReader.");
}
forSlider();
});
});
function forSlider()
{
//for slider
var img1 = "";
var uploadFile = document.getElementsByClassName("c-inspPhoto");
for (var j = 1; j < uploadFile.length; j++) {
if (uploadFile[j] != "") {
img1 += '<div class="mySlides"><img src="' + PathRoot + "Incedent\\" + uploadFile[j] + '" style="width:100%"></div>';
}
}
img1 += '<a class="prev" onclick="plusSlides(-1)">❮</a><a class="next" onclick="plusSlides(1)">❯</a>';
$("#img1").html(img1);
}
</script>