How to display Image dynamically on UI?
Solution 1:
Try like this.
I have introduced a new function to format image in HTML. and then got its length and loop introduced a cnt(count) variable and made it to increment. and used modulo to find the number and repeated the images.
var imgLen = 0;
var cnt = 0;
var tableValue = [{
"Item Name": "MANCHOW V SOUP",
"SellingPrice": 100
}, {
"Item Name": "SMIRNOFF GREEN APPLE 60",
"SellingPrice": 202
}, {
"Item Name": "SMIRNOFF GREEN APPLE30",
"SellingPrice": 101
}, {
"Item Name": "BOMBAY SAPHIRE 750",
"SellingPrice": 472
}, {
"Item Name": "BOMBAY SAPHIRE 30",
"SellingPrice": 191
}, {
"Item Name": "BLUE RIBBAND 750",
"SellingPrice": 877
}, {
"Item Name": "BLUE RIBBAND 60",
"SellingPrice": 78
}, {
"Item Name": "BACCARDI WHITE 750",
"SellingPrice": 248
}, {
"Item Name": "BACCARDI WHITE 180",
"SellingPrice": 585
}, {
"Item Name": "BACCARDI WHITE 60",
"SellingPrice": 202
}, {
"Item Name": "OLD MONK 180",
"SellingPrice": 225
}, {
"Item Name": "OLD MONK 90",
"SellingPrice": 168
}, {
"Item Name": "OLD MONK 60",
"SellingPrice": 90
}, {
"Item Name": "OLD MONK 30 ",
"SellingPrice": 45
}, {
"Item Name": "DON ANGEL 750",
"SellingPrice": 466
}, {
"Item Name": "DON ANGEL 30",
"SellingPrice": 191
}, {
"Item Name": "SAUZA SILVER 700",
"SellingPrice": 615
}, {
"Item Name": "SAUZA SILVER 30",
"SellingPrice": 270
}, {
"Item Name": "LIME WATER",
"SellingPrice": 45
}, {
"Item Name": "PACKEGED WATER 1L",
"SellingPrice": 39
}, {
"Item Name": "MANSION HOUSE 650",
"SellingPrice": 900
}, {
"Item Name": "Chole Kulche",
"SellingPrice": 80
}, {
"Item Name": "Butter Nan",
"SellingPrice": 65
}, {
"Item Name": "Dhai",
"SellingPrice": 20
}, {
"Item Name": "Rice",
"SellingPrice": 55
}, {
"Item Name": "Plain rice",
"SellingPrice": 30
}, {
"Item Name": "MANSION HOUSE 650",
"SellingPrice": 900
}, {
"Item Name": "Chole Kulche",
"SellingPrice": 80
}, {
"Item Name": "Butter Nan",
"SellingPrice": 65
}, {
"Item Name": "Dhai",
"SellingPrice": 20
}, {
"Item Name": "Rice",
"SellingPrice": 55
}, {
"Item Name": "Plain rice",
"SellingPrice": 30
}]
interval = '';
var images = {
CounterA: ["CounterA1.jpg", "CounterA2.jpg"]
} // Images to be load on UI
initTable(tableValue);
function initTable(tableValue) {
addTable(tableValue)
showRows();
interval = window.setInterval(showRows, 1000); // seting interval to show table in parts
}
function hideImage() {
var imgno = (cnt%imgLen)+1;
$("#displayImage img").css("display","none");
$("#displayImage img:nth-child("+imgno+")").css("display","block")
$("#displayImage").show(); //show Image and hide table
$("#DisplayTable").hide();
setTimeout(function () {
initTable(tableValue);
}, 1000);
cnt++;
}
function showRows() {
// Any TRs that are not hidden and not already shown get "already-shown" applies
if ($(".hidden:lt(3)").length > 0) { //checking is it is the last page or not
$("#displayImage").hide(); //showing table hiding image
$("#DisplayTable").show();
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
} else {
$("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
hideImage();
clearInterval(interval); //if last then clearing time interval and calling the function again
}
$(".hidden:lt(3)").removeClass("hidden"); // this one is to hide previous rows and show next
}
function addTable(tableValue) {
var $tbl = $("<table />", {
"class": "table fixed"
}),
$tb = $("<tbody/>"),
$trh = $("<tr/>");
var split = Math.round(tableValue.length / 4);
for (i = 0; i < split; i++) {
$tr = $("<tr/>", {
class: "hidden "
});
for (j = 0; j < 4; j++) {
$.each(tableValue[split * j + i], function (key, value) {
if (typeof (value) === "number") {
$("<td/>", {
"class": "text-right color" + (j + 1)
}).html(value).appendTo($tr);
} else {
$("<td/>", {
"class": "text-left color" + (j + 1)
}).html(value).appendTo($tr);
}
});
}
$tr.appendTo($tb);
}
$tbl.append($tb);
$("#DisplayTable").html($tbl);
}
imageFormatter();
function imageFormatter() {
var images = {
"Counter A": ["CounterA1.jpg", "CounterA2.jpg"],
"Counter B": ["CounterB1.jpg", "CounterB2.jpg"]
} // Images to be load on UI
for (var key in images) {
var imageList = images[key];
for (i = 0; i < imageList.length; i++) {
var img = $('<img />').attr({
'src': 'Image/' + key + '/' + imageList[i], // this one is displaying Image one below other
'alt': key + '/' + imageList[i],
'width': 90 + "%",
'height': 680
}).appendTo('#displayImage');
}
}
imgLen = $("#displayImage img").length;
}tbody>tr>td {
white-space: normal;
border-collapse: collapse;
font-family: Verdana;
font-weight: bold;
font-size: .9em;
}
td:nth-child(2),
td:nth-child(4),
td:nth-child(6),
td:nth-child(8) {
width: 85px;
max-width: 85px;
height: 63px
}
.fixed {
table-layout: fixed;
}
.color1 {
background: #4AD184;
}
.color2 {
background: #EA69EF;
}
.color3 {
background: #E1A558;
}
.color4 {
background: #F4F065;
}
.hidden,
.already-shown {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>
<div id="displayImage" style="display:none">
</div>