get_datalist_scenes with thumbnails

example for creating a room list

by veeuze

HTML

<div id="step1"></div>
<br />
<div id="step2"></div>
<br />
<div id="step3" style="width:100%;"></div>

CSS

.element {
  display: inline-block;
  width: auto;
  height: 110px;
  margin: 10px 20px;
  float: left;
  font-family: Verdana;
  font-size: 50%;
  color: #000;
  text-align: center;
}

#step3 {
  min-height: 400px;
}

JavaScript

$(document).ready(function() {
  // Work with ROOMLIST of the customer
  var s_string = "https://integrate.materialo.com/v2.1/get_datalist_scenes.php?cnf=integrate-demo";
  var demo_link = "https://integrate.materialo.com/v2.1/get_img_scene.php?cnf=integrate-demo&sid=";
  var thumnail_W = 140,
    thumnail_H = 140;

  // STEP1: Getting a complete ROOMLIST of the customer in JSON-format ______________________________

  $.ajax({
    url: s_string,
    type: "GET",
    data: {},
    error: function() {
      $("#step1").html('ERROR');
    },
    success: function(data) {
      var JSON_data, i, j, list = '';

      // STEP2: Decode JSON-response
      JSON_data = JSON.parse(data);

      if (JSON_data.status == 1) {
        var j = JSON_data.scenes.length;
        for (i = 0; i < j; i++) {
          // date of the Room from ROOMLIST ____________________________________________________________
          list += '<div id="room_' + i + '" class="element">' + '<img src="' + demo_link + JSON_data.scenes[i].id + '&w=' + thumnail_W + '&h=' + thumnail_H + '" /><br /><span id="name_' + i + '" style="display:none;">' + JSON_data.scenes[i].name + '</span>' + '</div>';
        }

        // STEP3: DEMO ___________________________________________________________________________________
        $("#step3").html(list);
        $('.element').unbind('mouseover');
        $('.element').unbind('mouseout');
        $('.element').mouseover(function() {
          var n = $(this).attr('id').replace('room_', '');
          $('#name_' + n).css('display', 'block');
          $('.element').mouseout(function() {
            $('#name_' + n).css('display', 'none');
          });
        });
      }
    },
    dataType: "text"
  });
});