Urgent: How to put dojox thumbnailpicker into infowindow?

cutexxbaby · April 19, 2011, 6:46am

hi
recently doing a map app using the dojox.image. thumbnail picker and i was wondering how to put the thumbnailpicker in the tab container of an infowindow…when u click on the icon the map it will pop up a infowindow which i want to put the thumbnail picker into the tab container …bt i try le cant work out…really need help in this!!!
this are my code

<html >
<head >
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”/>
<meta http-equiv=“X-UA-Compatible” content=“IE=7” />
<title>Peranankan @ SG</title>
<link href=“StyleSheet.css” rel=“stylesheet” type=“text/css” />
<script type=‘text/JavaScript’ src=‘http://www.onemap.sg/API/JS?accessKEY=xkg8VRu6Ol+gMH+SUamkRIEB7fKzhwMvfMo/2U8UJcFhdvR4yN1GutmUIA3A6r3LDhot215OVVkZvNRzjl28TNUZgYFSswOi’></script>
<script type=“text/javascript” src=“http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2”></script>
<link rel=“stylesheet” type=“text/css” href=“http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css”/>
<link rel=“stylesheet” type=“text/css” href=“http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dojox/image/resources/image.css”>

#map_infowindow.simpleInfoWindow {
border: 2px solid #455268;
background-color: #dfe5d7;
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead));
}

#thumbPicker4{
border:solid 1px #79663b;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

</style>
<script type=“text/javascript”>
var djConfig = {
parseOnLoad: true
};
</script>
<script language=“JavaScript” type=“text/JavaScript”>
dojo.require(“dijit.layout.BorderContainer”);
dojo.require(“dijit.layout.ContentPane”);
dojo.require(“dijit.layout.TabContainer”);
dojo.require(“esri.dijit.InfoWindowLite”);
dojo.require(“dojox.image.ThumbnailPicker”);
dojo.require(“dojo.data.ItemFileReadStore”);
var centerPoint = “28968.103,33560.969”
var levelNumber = 1;
var omap = new GetOneMap(‘map’, ‘SM’, { level: levelNumber });
var gLayer = new esri.layers.GraphicsLayer();
gLayer.id = “symbolLayer”;

function addSymbol() {
if (omap.map.getLayer(“symbolLayer”) == null) {
omap.map.addLayer(gLayer);
//dojo.connect(omap.map.infoWindow, “onShow”, setInfoContent);
omap.map.infoWindow.resize(523, 252);
}
gLayer.clear();
var stX = “23319.3347409758”;
var stY = “28825.7191286444”;
var pt = new esri.geometry.Point(stX, stY, omap.map.spatialReference);
var attr = { “PlaceName”: “Peranakan musem of Singapore”, “PlaceAddr”: “addr” };
var strImage = “http://www.rw-designer.com/i/download48b.png”;
var symbol = new esri.symbol.PictureMarkerSymbol(strImage, 25, 25);
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setTitle(“Info”);
infoTemplate.setContent(getInfoContent);
//infoTemplate.setContent(“<table bgcolor=‘#ffffff’><tr><td>Name: ${PlaceName} <br/>Address: ${PlaceAddr}<br/><input type=‘button’ value=‘close’ onClick=‘omap.map.infoWindow.hide()’/></td></tr></table>”);
var graphic = new esri.Graphic(pt, symbol, attr, infoTemplate);
gLayer.add(graphic);
var itemRequest = {
query: {},
count: 20
};
var itemNameMap = {
imageThumbAttr: “thumb”,
imageLargeAttr: “large”
};

dijit.byId(‘thumbPicker4’).setDataStore(imageItemStore, itemRequest, itemNameMap);

}

function setInfoContent() {
omap.map.infoWindow.setContent(getInfoContent());
}
function getInfoContent(graphic) {

//make a tab container
var tc = new dijit.layout.TabContainer({
region: “center”,
style: "height: 65%; width: 100%; "
}, dojo.create(“div”));
//display attribute information
var cp1 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1900 - 1930</font> ",
content: “<div id=\“thumbPicker4\” dojoType=\“dojox.image.ThumbnailPicker\” size=\“300\” isClickable=\“false\” ></div><div jsId=\“imageItemStore\” dojoType=\“dojo.data.ItemFileReadStore\” url=\“images.json\”></div>”
});
tc.addChild(cp1);
return tc.domNode;
}
dojo.addOnLoad(addSymbol);
</script>
<body = “claro”>
<div id=“thumbPicker4” dojoType=“dojox.image.ThumbnailPicker” size=“300” isClickable=“false” ></div><div jsId=“imageItemStore” dojoType=“dojo.data.ItemFileReadStore” url=“images.json”></div>

</body></html>