Show attachements (images) in Dialogbox on graphich layer click

[AurelijusDeksnys]

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();
       



      });

[AurelijusDeksnys]

don forget to enable mouse events on graphic layer

your_graphiclayer.enableMouseEvents();