Magnify image inside popup.

11-20-2014 03:21 PM
MVP Regular Contributor

So I have a popup with an image linked in it. Is there any way to add a magnifier to the image? I want to be able to maginify the image in the popup if I hover over it. Right now the function I want to use does not change the url location based on the image location or name.

Example of what I am looking for:


I am looking at the code in these examples:

Magnifier.js demo or the demo from dojox.image.MagnifierLite — The Dojo Toolkit - Reference Guide

This is where I call out the location of the image that displays in the popup (i have cut out useless nonsense in an attempt to shorten this code so it might not be 100% working) right now it uses a <a href="url" ></a>

            function executeIdentifyTask(evt) {   

                identifyParams.geometry = evt.mapPoint;   

                identifyParams.mapExtent = map.extent;   


                if (map.getScale() < 1000) {   

                    identifyParams.layerIds = [3,1,0];  // Identify all 

                } else {   

                    identifyParams.layerIds = [3];  // Identify photos only 



                var deferred = identifyTask.execute(identifyParams);   


                deferred.addCallback(function(response) {   


                    return, function(result) {   

                        var feature = result.feature; 

                        feature.attributes.layerName = result.layerName;

                        if (result.layerName === 'Cemetery_Plots') {


                            var template = new esri.InfoTemplate("${First_Name} ${Last_Name} ", "<a href=${Photo_loc} target='_blank'> <img src=${Photo_loc} WIDTH=150 HEIGHT=150></a> ");




         return feature;




Thank you

0 Kudos
1 Reply
Esri Frequent Contributor


Attached is a zip with some sample code that shows how you can get started with adding the magnifier to the popup image. The attached code needs some work but might be a place for you to start.