Show attachements (images) in Dialogbox on graphich layer click

AurelijusDeksnys — Tue, 31 Jul 2012 10:32:37 GMT

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


      });

Re: Show attachements (images) in Dialogbox on graphich layer click

AurelijusDeksnys — Tue, 31 Jul 2012 10:44:28 GMT

don forget to enable mouse events on graphic layer

your_graphiclayer.enableMouseEvents();

topic Show attachements (images) in Dialogbox on graphich layer click in ArcGIS JavaScript Maps SDK Questions

Show attachements (images) in Dialogbox on graphich layer click

Re: Show attachements (images) in Dialogbox on graphich layer click