javascript UI पर छवि को गतिशील रूप से कैसे प्रदर्शित करें?



jquery html (1)

ऐसे में कोशिश करें।

मैंने HTML में फॉर्मेट इमेज के लिए एक नया फंक्शन पेश किया है। और फिर इसकी लंबाई और लूप को एक cnt (काउंट) वेरिएबल पेश किया और इसे इंक्रीमेंट के लिए बनाया। और संख्या का पता लगाने और छवियों को दोहराने के लिए मोडुलो का उपयोग किया।

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>

मैं एक स्क्रीन प्रदर्शित करने पर काम कर रहा हूं जिसमें HTML तालिका और छवि शामिल है, एक HTML तालिका पूरी तरह से गतिशील है।

कोड काम करने की प्रक्रिया

जब उपयोगकर्ता एक पृष्ठ लोड कर रहा है (URL के साथ) तो मैं विभिन्न भागों में एक HTML तालिका प्रदान कर रहा हूं जिसका अर्थ है कि पृष्ठ लोड है। मैं एक बार में 'JSON' प्रारूप में सभी तालिका डेटा प्राप्त कर रहा हूं और फिर 3 seconds के अंतर (अंतराल) में UI पर एक बार में 3-3 पंक्तियों को दिखा रहा हूं जब पूर्ण तालिका लोड होती है तो मैं कुछ समय के लिए छवि दिखा रहा हूं और उसके बाद फिर से लोडिंग टेबल और एक बार टेबल लोड होने के बाद छवि दिखा रहा है, इसलिए यह ठीक काम कर रहा है, अब मैं जो करने की कोशिश कर रहा हूं वह छवि को सुविधाजनक रूप से दिखाएं

मैं क्या करने की कोशिश कर रहा हूं

वर्तमान में मैं इसे <img src="Image/Counter A/CounterA1.jpg" alt="Some Image" width="460" height="345"> कर रहा हूं क्योंकि फ़ोल्डर में दिखाने के लिए केवल एक ही छवि थी, लेकिन अब Counter A में दो छवियां हैं या 3 या जो कुछ भी हो सकता है इसलिए जब पृष्ठ लोड हो रहा है तो मुझे इस छवि के रूप में ऑब्जेक्ट में लोड करना पड़ रहा है var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]} काउंटर ए के लिए अन्य काउंटरों के समान ही दो छवियां भी हैं, इसलिए मैं जो करने की कोशिश कर रहा हूं वह पहले लोड टेबल है, फिर जब लोडिंग टेबल शो इमेज 2 की तुलना में फिर से लोड टेबल की तुलना में पहले छवि दिखाने की कोशिश कर रहा है यही कारण है कि मैं किसी सरणी के अंदर छवियाँ लिंक हों, मेरा एकमात्र मुद्दा एक समय में एक छवि दिखाने के लिए है

कार्य करने की प्रक्रिया

तालिका लोड हो रही है -> 3 सेकंड के बाद -> तालिका के अंतिम पृष्ठ तक तालिका की अगली 3 पंक्तियाँ -> दिखाएँ Image1 (CounterA1.jpg) -> लोड तालिका फिर से -> शो Image2 (CounterA2.jpg) -> फिर तालिका -> दिखाएं फिर से Image1 क्योंकि केवल दो छवियाँ हैं

मैंने पहले से ही HTML तालिका दिखा रहा है और केवल एक छवि के साथ छवि दिखा रहा है और अब मैं गतिशील रूप से यह करना चाहता हूं

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)
  interval = window.setInterval(showRows, 3000); // seting interval to show table in parts
}




function hideImage() {
  $("#displayImage").show(); //show Image and hide table
  $("#DisplayTable").hide();

  setTimeout(function() {
    initTable(tableValue);
  }, 3000);
}





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);
  var images = {
    "Counter A": ["CounterA1.jpg", "CounterA2.jpg"]
  } // Images to be load on UI

  for (var key in images) {

    var imageList = images[key];
    console.log(imageList.length)
    for (i = 0; i < imageList.length; i++) {
      console.log(imageList[i])
      var img = $('<img />').attr({
        'src': 'Image/' + key + '/' + imageList[i], // this one is displaying Image one below other
        'alt': 'Some Image',
        'width': 90 + "%",
        'height': 680
      }).appendTo('#displayImage');
    }

  }
}
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>

मैंने अपने JS कोड में सभी लाइनों को बेहतर अंडरस्टैंडिंग के लिए कमेंट किया है, जैसा कि आप मेरी अपलोड की गई पिक्चर image में देख सकते हैं, यह आम फोल्डर है इसलिए मैं इसे मैन्युअल रूप से src और काउंटर पर सेट कर सकता हूं और उनकी इमेज मुझे इस var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]} तरह मिल रही है var images = {"Counter A":["CounterA1.jpg", "CounterA2.jpg"]}

संपादित करें

मैंने नीचे कोड जोड़ा है

        var images = {"Counter A":["CounterA1.jpg","CounterA2.jpg"]} // Images to be load on UI

            for (var key in images) {

            var imageList = images[key];
             console.log(imageList.length)
             for (i = 0; i < imageList.length; i++) 
                 {
                 console.log(imageList[i])
                 var img = $('<img />').attr({
                        'src': 'Image/'+key+'/'+imageList[i] , // this one is displaying Image one below other
                        'alt': 'Some Image',
                        'width': 90+"%",
                        'height':680
                    }).appendTo('#displayImage'); 
                 }

            }

मैंने थोड़ा और किया है मुझे लगता है कि मैं अपेक्षित परिणाम प्राप्त करने के लिए निकट हूं, मुद्दा यह है कि छवि को एक दूसरे के नीचे दिखाया जा रहा है जो सच नहीं है कि मैं क्या करने की कोशिश कर रहा हूं जब दो छवियां होती हैं तो तालिका -> छवि 1, तालिका -> Image2 लेकिन यहाँ तालिका के बाद दोनों छवि एक दूसरे के नीचे प्रदान कर रहे हैं कृपया मेरे स्निपेट की जांच करें

यह मेरी छवि कैसे प्रस्तुत कर रहा है

तथा





html-table