Display a collection of images within a page

Display a collection of images within a page

I have an app that calls the realtor.com API.  I am successfully grabbing a collection of images and uploading them via a subform of image fields.  I would like to display the images from the most recent API call somewhere on a page in the app.  I have made a few attempts at this with zml, but I am having some trouble doing this.  Ideally I would like to have this displayed like a carousel of images where a button click will browse through the available images.  Any suggestions on how to get started with this? Below I have a snippet of my code that shows how this subform is populated.  

  2. photos = home.getJSON("photos").toList();
  3. // Grab the images
  4. img0 = photos.get(0).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
  5. img1 = photos.get(1).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
  6. img2 = photos.get(2).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
  7. img3 = photos.get(3).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
  8. img4 = photos.get(4).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
  9. img5 = photos.get(5).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
  10. img6 = photos.get(6).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
  11. img7 = photos.get(7).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
  12. img8 = photos.get(8).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
  13. img9 = photos.get(9).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
  14. //input.Image0 = "<img src=\"" + img0 + "\"></img>";
  15. // Create rows in the subform
  16. row0 = Search_by_Address.Property_Images();
  17. row1 = Search_by_Address.Property_Images();
  18. row2 = Search_by_Address.Property_Images();
  19. row3 = Search_by_Address.Property_Images();
  20. row4 = Search_by_Address.Property_Images();
  21. row5 =Search_by_Address.Property_Images();
  22. row6 =Search_by_Address.Property_Images();
  23. row7= Search_by_Address.Property_Images();
  24. row8= Search_by_Address.Property_Images();
  25. row9= Search_by_Address.Property_Images();
  26. // Insert images into rows
  27. row0.Image = "<img src=\"" + img0 + "\"></img>";
  28. row1.Image = "<img src=\"" + img1 + "\"></img>";
  29. row2.Image = "<img src=\"" + img2 + "\"></img>";
  30. row3.Image = "<img src=\"" + img3 + "\"></img>";
  31. row4.Image = "<img src=\"" + img4 + "\"></img>";
  32. row5.Image = "<img src=\"" + img5 + "\"></img>";
  33. row6.Image = "<img src=\"" + img6 + "\"></img>";
  34. row7.Image = "<img src=\"" + img7 + "\"></img>";
  35. row8.Image = "<img src=\"" + img8 + "\"></img>";
  36. row9.Image = "<img src=\"" + img9 + "\"></img>";
  37. rows = Collection();
  38. rows.insert(row0, row1, row2, row3, row4, row5, row6, row7, row8, row9);
  39. input.Property_Images.insert(rows);