Re: Opening attached images via html popups.

MarkBockenhauer — Sat, 08 Aug 2015 00:17:29 GMT

I have a layer package example here: http://www.arcgis.com/home/item.html?id=3ebe2a5107de48da89133c07acfb602f

It has layer properties HTML popup configures with and XSL that allows for panning and zooming image attachments in the popup window.

It is the default popup window configured to look like this:

Using the mouse wheel or click you can zoom and pan on the picture.

Additional image attachments are shown as buttons, so you can click on them and view them in the window.

Click "VIEW1.JPG"

You can also click on the "Numbered buttons" to rotate the image... for situations where the attached picture does not have desired orientation.

button 90

Button 180

Same popup also works nicely in Explorer Desktop.

The XSL makes use of HTML5 and Javascript. I did not specifically check, but I believe this will work on computers that have IE9 and higher. I tested on a Windows 8.1 computer with IE11 .

For the HTML Popup properties you also need to have "download Attachment data" checked, for this XSL to work.

You can get the layer from ArcGIS online to get the XSL or you can copy it from this post (I tried using syntax highlight, but geonet didn't "like" the number of lines)

I stayed pretty much with the default html popup xsl, you will likely want to size the canvas (set to 300 x 300 in XSL) to meet your needs. Make sure to make the matching change everywhere it has a value of 300 for canvas.width and height as well as ctx.drawimage

Also, I freely admit that I hacked this together... with some attention to detail and a flair for style it could be made much better!

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt">

<xsl:variable name="headerRowColor" select="'#9CBCE2'"/>

<xsl:variable name="alternateRowColor" select="'#D4E4F3'"/>

<xsl:template match="/">

<html>

<head>

</head>

<style>

button

{

// display: block;

font-size: 1.1em;

// font-weight: bold;

text-transform: uppercase;

// padding: 10px 15px;

// margin: 20px auto;

color: #233DA7;

background-color: #C7D9E0;

// background: -webkit-linear-gradient(#888, #9CBCE2);

// background: linear-gradient(#888, #9CBCE2);

border: 0 none;

// border-radius: 3px;

// text-shadow: 0 -1px 0 #000;

box-shadow: 0 1px 0 #666, 0 1.7px 0 #444, 0 2px 2px rgba(0,0,0,0.6);

cursor: pointer;

-webkit-transition: all 150ms ease;

transition: all 150ms ease;

}

button:hover, button:focus

{

// -webkit-animation: pulsate 1.2s linear infinite;

// animation: pulsate 200.2s linear infinite;

}

@-webkit-keyframes pulsate

{

// 0% { color: #ddd; text-shadow: 0 -1px 0 #000; }

// 50% { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }

// 100% { color: #ddd; text-shadow: 0 -1px 0 #000; }

}

@keyframes pulsate

{

// 0% { color: #ddd; text-shadow: 0 -1px 0 #000; }

// 50% { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }

// 100% { color: #ddd; text-shadow: 0 -1px 0 #000; }

}

button:active

{

color: #49A1FF;

// text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;

box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);

-webkit-transform: translateY(3px);

transform: translateY(3px);

-webkit-animation: none;

animation: none;

}

</style>

<td>

<xsl:value-of select="FieldsDoc/Title" />

</td>

</tr>

<xsl:apply-templates select="FieldsDoc/Attachments" />

<tr>

<td>

<xsl:choose>

<xsl:when test="FieldsDoc/Fields/Field/FieldName">

<xsl:apply-templates select="FieldsDoc/Fields/Field/FieldName[not(contains($ignoreFieldNames, concat(concat('|', text()), '|')))]/.." />

</xsl:when>

<xsl:otherwise>

<xsl:apply-templates select="FieldsDoc/Fields/Field" />

</xsl:otherwise>

</xsl:choose>

</table>

</td>

</tr>

</table>

</body>

</html>

</xsl:template>

<xsl:template match="Attachments">

<xsl:variable name="imageCount" select="count(Attachment/ContentType[contains(., 'image')])"/>

<xsl:variable name="attachmentCount" select="count(Attachment)"/>

<td>

<xsl:variable name="imageSrc" select="Attachment/ContentType[contains(., 'image')]/../FilePath"/>

<xsl:if test="$imageSrc">

<td>

<xsl:variable name="newtext" select="translate($imageSrc,'\','/')"/>

<xsl:text disable-output-escaping="yes" >

<![CDATA[

var canvas = document.getElementsByTagName('canvas')[0];

canvas.width = 300; canvas.height = 300;

var imgAttach = new Image;

var origAttach = new Image;

var imgRotate = 0;

redraw = function() {}

imgAttach.onload = function(){

//This section is for showing initial picture. Origin positions were picked for Photo Attachments created by Collector for ArcGIS on an Iphone. Modify to meet your desires.

var ctx = canvas.getContext('2d');

var imgh = imgAttach.height

var imgw = imgAttach.width

if (imgw > imgh && imgRotate == 0){

ctx.drawImage(imgAttach,0,35,300,300 * imgAttach.height / imgAttach.width);}

else if (imgw > imgh && imgRotate == 90){

ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

else if (imgw > imgh && imgRotate == 180){

ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

else if (imgw > imgh && imgRotate == 270){

ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

else if (imgw == imgh && imgRotate == 0) {

ctx.drawImage(imgAttach,0,0,300,300);}

else if (imgw == imgh && imgRotate == 90) {

ctx.drawImage(imgAttach,-150,-150,300,300);}

else if (imgw == imgh && imgRotate == 180) {

ctx.drawImage(imgAttach,-150,-150,300,300);}

else if (imgw == imgh && imgRotate == 270) {

ctx.drawImage(imgAttach,-150,-150,300,300);}

else if (imgw < imgh && imgRotate == 0) {

ctx.drawImage(imgAttach,35,0,300 * imgAttach.width / imgAttach.height,300);}

else if (imgw < imgh && imgRotate == 90) {

ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);}

else if (imgw < imgh && imgRotate == 180) {

ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);}

else if (imgw < imgh && imgRotate == 270) {

ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);}

redraw();

}

window.onload = function(){

//This section if for mouse pan and zooming on the shown picture.

TO_RADIANS = Math.PI/180;

var ctx = canvas.getContext('2d');

trackTransforms(ctx);

function redraw(){

// Clear the entire canvas

var p1 = ctx.transformedPoint(0,0);

var p2 = ctx.transformedPoint(canvas.width,canvas.height);

ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);

var imgh = imgAttach.height

var imgw = imgAttach.width

if (imgw > imgh && imgRotate == 0){

ctx.drawImage(imgAttach,0,35,300,300 * imgAttach.height / imgAttach.width);}

//Analyze and position all images according to width height. Values used were for Collector for ArcGIS Iphone photo attachment size dimension.

else if (imgw > imgh && imgRotate == 90){

ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

else if (imgw > imgh && imgRotate == 180){

ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

else if (imgw > imgh && imgRotate == 270){

ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

else if (imgw == imgh && imgRotate == 0) {

ctx.drawImage(imgAttach,0,0,300,300);}

else if (imgw == imgh && imgRotate == 90) {

ctx.drawImage(imgAttach,-150,-150,300,300);}

else if (imgw == imgh && imgRotate == 180) {

ctx.drawImage(imgAttach,-150,-150,300,300);}

else if (imgw == imgh && imgRotate == 270) {

ctx.drawImage(imgAttach,-150,-150,300,300);}

else if (imgw < imgh && imgRotate == 0) {

ctx.drawImage(imgAttach,35,0,300 * imgAttach.width / imgAttach.height,300);}

else if (imgw < imgh && imgRotate == 90) {

ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);}

else if (imgw < imgh && imgRotate == 180) {

ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);}

else if (imgw < imgh && imgRotate == 270) {

ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);

}

redraw();

var lastX=canvas.width/2, lastY=canvas.height/2;

var dragStart,dragged;

canvas.addEventListener('mousedown',function(evt){

document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';

lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);

lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);

dragStart = ctx.transformedPoint(lastX,lastY);

dragged = false;

},false);

canvas.addEventListener('mousemove',function(evt){

lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);

lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);

dragged = true;

if (dragStart){

var pt = ctx.transformedPoint(lastX,lastY);

ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);

redraw();

}

},false);

canvas.addEventListener('mouseup',function(evt){

dragStart = null;

if (!dragged) zoom(evt.shiftKey ? -1 : 1 );

},false);

var scaleFactor = 1.1;

var zoom = function(clicks){

var pt = ctx.transformedPoint(lastX,lastY);

ctx.translate(pt.x,pt.y);

var factor = Math.pow(scaleFactor,clicks);

ctx.scale(factor,factor);

ctx.translate(-pt.x,-pt.y);

redraw();

}

var handleScroll = function(evt){

var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;

if (delta) zoom(delta);

return evt.preventDefault() && false;

};

canvas.addEventListener('DOMMouseScroll',handleScroll,false);

canvas.addEventListener('mousewheel',handleScroll,false);

}; ]]></xsl:text>

imgAttach.src = '<xsl:text disable-output-escaping="yes" >File:///</xsl:text><xsl:value-of select="$newtext"/>';

origAttach.src = '<xsl:text disable-output-escaping="yes" >File:///</xsl:text><xsl:value-of select="$newtext"/>';

<xsl:text disable-output-escaping="yes" >

<![CDATA[

// Adds ctx.getTransform() - returns an SVGMatrix

// Adds ctx.transformedPoint(x,y) - returns an SVGPoint

function trackTransforms(ctx){

var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');

var xform = svg.createSVGMatrix();

ctx.getTransform = function(){ return xform; };

var savedTransforms = [];

var save = ctx.save;

ctx.save = function(){

savedTransforms.push(xform.translate(0,0));

return save.call(ctx);

};

var restore = ctx.restore;

ctx.restore = function(){

xform = savedTransforms.pop();

return restore.call(ctx);

};

var scale = ctx.scale;

ctx.scale = function(sx,sy){

xform = xform.scaleNonUniform(sx,sy);

return scale.call(ctx,sx,sy);

};

var rotate = ctx.rotate;

ctx.rotate = function(radians){

xform = xform.rotate(radians*180/Math.PI);

return rotate.call(ctx,radians);

};

var translate = ctx.translate;

ctx.translate = function(dx,dy){

xform = xform.translate(dx,dy);

return translate.call(ctx,dx,dy);

};

var transform = ctx.transform;

ctx.transform = function(a,b,c,d,e,f){

var m2 = svg.createSVGMatrix();

m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;

xform = xform.multiply(m2);

return transform.call(ctx,a,b,c,d,e,f);

};

var setTransform = ctx.setTransform;

ctx.setTransform = function(a,b,c,d,e,f){

xform.a = a;

xform.b = b;

xform.c = c;

xform.d = d;

xform.e = e;

xform.f = f;

return setTransform.call(ctx,a,b,c,d,e,f);

};

var pt = svg.createSVGPoint();

ctx.transformedPoint = function(x,y){

pt.x=x; pt.y=y;

return pt.matrixTransform(xform.inverse());

}

]]>

</xsl:text>

</script>

<xsl:text disable-output-escaping="yes" >

<![CDATA[

function myCanvas1() {

TO_RADIANS = Math.PI/180;

var canvas = document.getElementsByTagName('canvas')[0];

canvas.width = canvas.width;

canvas.width = 300; canvas.height = 300;

imgRotate = 0;

var ctx = canvas.getContext('2d');

trackTransforms(ctx);

ctx.rotate(0 * TO_RADIANS);

var imgh = imgAttach.height

var imgw = imgAttach.width

if (imgw > imgh){

ctx.drawImage(imgAttach,0,35,300,300 * imgAttach.height / imgAttach.width);}

else if (imgw == imgh) {

ctx.drawImage(imgAttach,0,0,300,300);}

else {

ctx.drawImage(imgAttach,35,0,300 * imgAttach.width / imgAttach.height,300);

}

redraw();

}

]]>

</xsl:text>

</script>

<xsl:text disable-output-escaping="yes" >

<![CDATA[

function myCanvas2() {

TO_RADIANS = Math.PI/180;

var canvas = document.getElementsByTagName('canvas')[0];

canvas.width = canvas.width;

canvas.width = 300; canvas.height = 300;

imgRotate = 90;

var ctx = canvas.getContext('2d');

trackTransforms(ctx);

ctx.translate(canvas.width / 2, canvas.height / 2);

ctx.rotate(90 * TO_RADIANS);

var imgh = imgAttach.height

var imgw = imgAttach.width

if (imgw > imgh){

ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

else if (imgw == imgh) {

ctx.drawImage(imgAttach,-150,-150,300,300);}

else {

ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);

}

redraw();

}

]]>

</xsl:text>

</script>

<xsl:text disable-output-escaping="yes" >

<![CDATA[

function myCanvas3() {

TO_RADIANS = Math.PI/180;

var canvas = document.getElementsByTagName('canvas')[0];

canvas.width = canvas.width;

canvas.width = 300; canvas.height = 300;

imgRotate = 180;

var ctx = canvas.getContext('2d');

trackTransforms(ctx);

ctx.translate(canvas.width / 2, canvas.height / 2);

ctx.rotate(180 * TO_RADIANS);

var imgh = imgAttach.height

var imgw = imgAttach.width

if (imgw > imgh){

ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

else if (imgw == imgh) {

ctx.drawImage(imgAttach,-150,-150,300,300);}

else {

ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);

}

redraw();

}

]]>

</xsl:text>

</script>

<xsl:text disable-output-escaping="yes" >

<![CDATA[

function myCanvas4() {

TO_RADIANS = Math.PI/180;

var canvas = document.getElementsByTagName('canvas')[0];

canvas.width = canvas.width;

canvas.width = 300; canvas.height = 300;

imgRotate = 270;

var ctx = canvas.getContext('2d');

trackTransforms(ctx);

ctx.translate(canvas.width / 2, canvas.height / 2);

ctx.rotate(270 * TO_RADIANS);

var imgh = imgAttach.height

var imgw = imgAttach.width

if (imgw > imgh){

ctx.drawImage(imgAttach,-150,-115,300,300 * imgAttach.height / imgAttach.width);}

else if (imgw == imgh) {

ctx.drawImage(imgAttach,-150,-150,300,300);}

else {

ctx.drawImage(imgAttach,-115,-150,300 * imgAttach.width / imgAttach.height,300);

}

redraw();

}

]]>

</xsl:text>

</script>

</td><tr></tr><td></td>

</tr>

<td>

<xsl:text disable-output-escaping="yes" >

<![CDATA[

function myCanvasorig() { TO_RADIANS = Math.PI/180;

var canvas = document.getElementsByTagName('canvas')[0];

canvas.width = canvas.width;

canvas.width = 300; canvas.height = 300;

imgRotate = 0;

var ctx = canvas.getContext('2d');

trackTransforms(ctx);

ctx.rotate(0 * TO_RADIANS);

]]></xsl:text>

imgAttach.src = origAttach.src;

<xsl:text disable-output-escaping="yes" >

<![CDATA[var imgh = imgAttach.height

var imgw = imgAttach.width

if (imgw > imgh){

ctx.drawImage(imgAttach,0,35,300,300 * imgAttach.height / imgAttach.width);}

else if (imgw == imgh) {

ctx.drawImage(imgAttach,0,0,300,300);}

else {

ctx.drawImage(imgAttach,35,0,300 * imgAttach.width / imgAttach.height,300);

}

redraw();

}

]]>

</xsl:text>

</script>

</td><tr></tr><td></td>

</tr>

</xsl:if>

<xsl:if test="($attachmentCount > $imageCount) or not($imageCount = 1)">

<td>

<xsl:for-each select="Attachment[position() mod 2 = 1]">

<xsl:variable name="i" select="position()" />

<xsl:if test="(position() +1) mod 2">

<xsl:attribute name="bgcolor">

<xsl:value-of select="$alternateRowColor"/>

</xsl:attribute>

</xsl:if>

<xsl:when test="ContentType[starts-with(., 'image')]">

<xsl:text disable-output-escaping="yes" >

<![CDATA[ <button onclick="myCanvasa]]></xsl:text>

<xsl:value-of select="$i" /> <xsl:text disable-output-escaping="yes" >

<![CDATA[()">]]></xsl:text> <xsl:value-of select="Name" /> <xsl:text disable-output-escaping="yes" >

<![CDATA[</button>]]></xsl:text>

<xsl:variable name="imageSrc2" select="FilePath"/>

<xsl:variable name="newtext2" select="translate($imageSrc2,'\','/')"/>

<xsl:text disable-output-escaping="yes" >

<![CDATA[

function myCanvasa]]></xsl:text>

<xsl:value-of select="$i" /> <xsl:text disable-output-escaping="yes" >

<![CDATA[() { TO_RADIANS = Math.PI/180;

var canvas = document.getElementsByTagName('canvas')[0];

canvas.width = canvas.width;

canvas.width = 300; canvas.height = 300;

imgRotate = 0;

var ctx = canvas.getContext('2d');

trackTransforms(ctx);

ctx.rotate(0 * TO_RADIANS);

]]></xsl:text>

//set the picture to display

imgAttach.src = '<xsl:text disable-output-escaping="yes" >File:///</xsl:text><xsl:value-of select="$newtext2"/>';

<xsl:text disable-output-escaping="yes" >

<![CDATA[

var imgh = imgAttach.height

var imgw = imgAttach.width

//based on proportion set desired origin on canvas for display.

if (imgw > imgh){

ctx.drawImage(imgAttach,0,35,300,300 * imgAttach.height / imgAttach.width);}

else if (imgw == imgh) {

ctx.drawImage(imgAttach,0,0,300,300);}

else {

ctx.drawImage(imgAttach,35,0,300 * imgAttach.width / imgAttach.height,300);

}

redraw();

}

]]>

</xsl:text>

</script> </xsl:when>

<xsl:otherwise>

<xsl:attribute name="href">

<xsl:value-of select="FilePath"/>

</xsl:attribute>

<xsl:value-of select="Name" />

</a>

</xsl:otherwise>

</xsl:choose>

</td>

<xsl:when test="ContentType[starts-with(., 'image')]">

<xsl:text disable-output-escaping="yes" >

<![CDATA[ <button onclick="myCanvasb]]></xsl:text>

<xsl:value-of select="$i" /> <xsl:text disable-output-escaping="yes" >

<![CDATA[()">]]></xsl:text> <xsl:value-of select="following-sibling::Attachment/Name" />

<xsl:text disable-output-escaping="yes" >

<![CDATA[</button>]]></xsl:text>

<xsl:variable name="imageSrc3" select="following-sibling::Attachment/FilePath"/>

<xsl:variable name="newtext3" select="translate($imageSrc3,'\','/')"/>

<xsl:text disable-output-escaping="yes" >

<![CDATA[

function myCanvasb]]></xsl:text>

<xsl:value-of select="$i" /> <xsl:text disable-output-escaping="yes" >

<![CDATA[() {

TO_RADIANS = Math.PI/180;

var canvas = document.getElementsByTagName('canvas')[0];

canvas.width = canvas.width;

canvas.width = 300; canvas.height = 300;

imgRotate = 0;

var ctx = canvas.getContext('2d');

trackTransforms(ctx);

ctx.rotate(0 * TO_RADIANS);

]]></xsl:text>

//set the image that displays when button is pressed.

imgAttach.src = '<xsl:text disable-output-escaping="yes" >File:///</xsl:text><xsl:value-of select="$newtext3"/>';

<xsl:text disable-output-escaping="yes" >

<![CDATA[ var imgh = imgAttach.height

var imgw = imgAttach.width

//Set Canvas picture origin based on photo proportion. origins used were for photos attached to feature with collector for ArcGIS on Iphone

if (imgw > imgh){

ctx.drawImage(imgAttach,0,35,300,300 * imgAttach.height / imgAttach.width);}

else if (imgw == imgh) {

ctx.drawImage(imgAttach,0,0,300,300);}

else {

ctx.drawImage(imgAttach,35,0,300 * imgAttach.width / imgAttach.height,300);

}

redraw();

}

]]>

</xsl:text>

</script>

</xsl:when>

<xsl:otherwise>

<xsl:attribute name="href">

<xsl:value-of select="following-sibling::Attachment/FilePath"/>

</xsl:attribute>

<xsl:value-of select="following-sibling::Attachment/Name" />

</a>

</xsl:otherwise>

</xsl:choose>

</td>

</tr>

</xsl:for-each>

</table>

</td>

</tr>

</xsl:if>

</table>

</td>

</tr>

</xsl:template>

<xsl:template match="Field">

<tr>

<xsl:if test="(position() +1) mod 2">

<xsl:attribute name="bgcolor">

<xsl:value-of select="$alternateRowColor"/>

</xsl:attribute>

</xsl:if>

<xsl:if test="FieldName">

<td>

<xsl:value-of select="FieldName"/>

</td>

</xsl:if>

<td>

<xsl:choose>

<xsl:when test="FieldValue[starts-with(., 'www.')]">

<xsl:attribute name="href">http://<xsl:value-of select="FieldValue"/>

</xsl:attribute>

<xsl:value-of select="FieldValue"/>

</a>

</xsl:when>

<xsl:when test="FieldValue[starts-with(., 'http:')]">

<xsl:attribute name="href">

<xsl:value-of select="FieldValue"/>

</xsl:attribute>

<xsl:value-of select="FieldValue"/>

</a>

</xsl:when>

<xsl:when test="FieldValue[starts-with(., 'https:')]">

<xsl:attribute name="href">

<xsl:value-of select="FieldValue"/>

</xsl:attribute>

<xsl:value-of select="FieldValue"/>

</a>

</xsl:when>

<xsl:when test="FieldValue[starts-with(., '\\')]">

<xsl:attribute name="href">

<xsl:value-of select="FieldValue"/>

</xsl:attribute>

<xsl:value-of select="FieldValue"/>

</a>

</xsl:when>

<xsl:when test="FieldValue[starts-with(., '<img ')]">

<xsl:value-of select="FieldValue" disable-output-escaping="yes" />

</xsl:when>

<xsl:otherwise>

<xsl:value-of select="FieldValue"/>

</xsl:otherwise>

</xsl:choose>

</td>

</tr>

</xsl:template>

</xsl:stylesheet>

topic Re: Opening attached images via html popups. in Mapping Questions

Opening attached images via html popups.

Re: Opening attached images via html popups.

Re: Opening attached images via html popups.