Robert,
Here is that sample updated to use the popups media infos, so that multiple images are supported and the images are more manageable size:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Sample Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html,
body,
#mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script src="http://js.arcgis.com/3.20/"></script>
<script>
var map, popup, featureLayer;
require([
"esri/map", "esri/layers/FeatureLayer", "esri/dijit/Popup",
"esri/dijit/PopupTemplate", "dojo/dom-construct", "dojo/on",
"dojo/_base/array", "dojo/domReady!"
], function(
Map, FeatureLayer, Popup,
PopupTemplate, domConstruct, on, arrayUtils
) {
popup = new Popup(null, domConstruct.create('div'));
map = new Map('mapDiv', {
basemap: 'streets',
center: [-74.0499, 40.0403],
zoom: 17,
infoWindow: popup
});
on(map, 'load', function(_map_) {
featureLayer = new FeatureLayer('some url', {
mode: FeatureLayer.MODE_ONDEMAND
});
on(featureLayer, 'click', function(e) {
var objectId, el;
var pminfos = [];
var popUpMediaInfo;
objectId = e.graphic.attributes[featureLayer.objectIdField];
featureLayer.queryAttachmentInfos(objectId, function(infos) {
var popUpInfo = {
title: "Attachment images",
description: "",
showAttachments: false
};
arrayUtils.map(infos, function(info){
if (!!info.url) {
popUpMediaInfo = {};
popUpMediaInfo.type = 'image';
popUpMediaInfo.value = {};
popUpMediaInfo.value.sourceURL = info.url;
popUpMediaInfo.value.linkURL = info.url;
popUpMediaInfo.caption = info.name;
pminfos.push(popUpMediaInfo);
}
});
popUpInfo.mediaInfos = pminfos;
var pt = new PopupTemplate(popUpInfo);
e.graphic.setInfoTemplate(pt);
map.infoWindow.setFeatures([e.graphic]);
map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
});
});
map.addLayer(featureLayer);
});
});
</script>
</head>
<body class="claro">
<div id="mapDiv"></div>
</body>
</html>
