AurelijusD

Show attachements (images) in Dialogbox on graphich layer click

Discussion created by AurelijusD on Jul 31, 2012
Latest reply on Jul 31, 2012 by AurelijusD
Short example how to extract images from attachements on graphic layer click and populate them in the Dialogbox and browse through Lightbox

CSS

@import "http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/image/resources/Lightbox.css";

.claro  #dojoxLightboxDialog_underlay {background-color:black}
   
  .imageNode { display: inline-block; width:100px;  text-align:center; margin: 0 0.5em 0.5em 0; vertical-align:middle; }
  .dj_ie7 .imageNode { display: inline; zoom:1; vertical-align:middle; height:100px; }
  .imageNode img { max-height: 100px; max-width: 100px; width:auto; height:auto; border: none; vertical-align:middle; }



CODE
 
dojo.require("dijit.Dialog");
dojo.require("dojox.image.Lightbox");




      var dialog, featureLayer;
   
      dojo.connect(your_graphiclayer, "onClick", function (ev) {
       
       
        

        if (!dialog){
          dialog = new dijit.Dialog({
            id: "parku_info_dialog",
            title: "",
            style: "width: 950px; height :none",
            autofocus: !dojo.isIE,
            // NOTE: turning focus ON in IE causes errors when reopening the dialog
            refocus: !dojo.isIE


          });
        }



        var gr = ev.graphic;
       
     
         

       

        if (!featureLayer){
          featureLayer = new esri.layers.FeatureLayer("http://195.182.82.71/ArcGIS/rest/services/parkai/FeatureServer/0", {
            mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"]
          });
        }


        var attachements = featureLayer.queryAttachmentInfos(gr.attributes.OBJECTID).then(function (info) {
         
         
         
         

          var template = "<h1>${Pavadinimas}</h1><p>${Papildoma_info}</p><div id='imagesNode'></div>";
          var html = dojo.string.substitute(template, gr.attributes);
          dialog.setContent(html);
         
       

          var imagesNode = dojo.byId("imagesNode");
          dojo.forEach(info, function (img) {var div = dojo.create("div", {"class": "imageNode"}, imagesNode);
            var a = dojo.create("a", {href: img.url,target: "_blank"}, div);
            var i = dojo.create("img", {src: img.url}, a);
            var lb = new dojox.image.Lightbox({href: img.url,title:img.name,group: gr.attributes.OBJECTID}, a);
            lb.startup();

          }, this);
         
         
        

        });
       
       



        dialog.show();
       



      });

Outcomes