Cannot loop jQuery dialogbox in array

Question

I'm having problems to setup a jQuery dialogbox in a specific array using the following div ID code in my index file:

<div id="dialog"></div>

And now to generate a dialogbox from an array that is placed in a javascript file from a subfolder with the following code:

"pins": [{
    "name": "A",
    "status": "Lorem Ipsum",
    "src": "http://test/images/pins/up.png"
  },
  {
    "name": "B",
    "status": "Lorem Ipsum",
    "src": "http://test/images/pins/up.png"
  },
  {
    "name": "C",
    "status": "Lorem Ipsum",
    "src": "http://test/images/pins/down.png"
  }
];


var pins = "<div id=dialog ></div>";
$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });

  $("src").on("click", function() {
    $("#dialog").dialog("open");
  });
});

I want to initialize 3 dialogs with an onclick function on the image-pin url, load the name-value as the title of the box and the status-value as text within the box.

I have already tried a hundred ways which did not lead to success.

Answer 1

The logic is, generate img for each item in the array, bind click event on it. When the user will click on it, you will replace the img's src in the #dialog to the src of the image who clicked. Finally, open the dialog.

If I understand you correctly, it should be something like this:

var pins = [{
    "name": "A",
    "status": "Lorem Ipsum",
    "src": "https://images.pexels.com/photos/633276/pexels-photo-633276.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb"
  },
  {
    "name": "B",
    "status": "Lorem Ipsum",
    "src": "https://images.pexels.com/photos/633501/pexels-photo-633501.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb"
  },
  {
    "name": "C",
    "status": "Lorem Ipsum",
    "src": "https://images.pexels.com/photos/633548/pexels-photo-633548.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb"
  }
];

$.each(pins, function(i, pin) {
  $('body').append('<img src="' + pin.src + '" class="src" />');
});

$(function() {
  var dialog = $("#dialog").dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });

  $("img").on("click", function() {
    dialog.find('img').attr('src', $(this).attr('src'));
    dialog.dialog("open");
  });
});

.src {
  width: 50px;
  height: 50px;
  border: 1px solid;
  margin: 10px;
}

#dialog img {
  max-width: 100%;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="dialog">
  <img />
</div>