Hi IL,

Do the following:

In response options, add span tag as:

<span class='zoom' id='ex1'><img src=\"[%GraphicsPath()%]image1.jpg\" alt=\"\" width='270' height='290' border=\"0\"></span>

<span class='zoom' id='ex2'><img src=\"[%GraphicsPath()%]image2.jpg\" alt=\"\" width='270' height='290' border=\"0\"></span>

In footer, paste this code:

<style type=\"text/css\">
\t
\t\t* { border:0; margin:0; padding:5; }
\t\tp { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

\t\t
\t\t.zoom {
\t\t\tdisplay:inline-block;
\t\t\tposition: relative;
\t\t}
\t\t
\t\t
\t\t.zoom:after {
\t\t\tcontent:'';
\t\t\tdisplay:block;
\t\t\twidth:33px;
\t\t\theight:33px;
\t\t\tposition:absolute;
\t\t\ttop:0;
\t\t\tright:0;
\t\t\t
\t\t}

\t\t.zoom img {
\t\t\tdisplay: block;
\t\t}

\t\t.zoom img::selection { background-color: transparent; }

\t\t
\t</style>
\t<script type=\"text/javascript\">
\t\t
(function(o){var t={url:!1,callback:!1,target:!1,duration:120,on:\"mouseover\",onZoomIn:!1,onZoomOut:!1};o.zoom=function(t,n,e){var i,u,c,m,a,r=o(t).css(\"position\");return o(t).css({position:/(absolute|fixed)/.test(r)?r:\"relative\",overflow:\"hidden\"}),e.style.width=e.style.height=\"\",o(e).addClass(\"zoomImg\").css({position:\"absolute\",top:0,left:0,opacity:0,width:e.width,height:e.height,border:\"none\",maxWidth:\"none\"}).appendTo(t),{init:function(){i=o(t).outerWidth(),u=o(t).outerHeight(),c=(e.width-i)/o(n).outerWidth(),m=(e.height-u)/o(n).outerHeight(),a=o(n).offset()},move:function(o){var t=o.pageX-a.left,n=o.pageY-a.top;n=Math.max(Math.min(n,u),0),t=Math.max(Math.min(t,i),0),e.style.left=t*-c+\"px\",e.style.top=n*-m+\"px\"}}},o.fn.zoom=function(n){return this.each(function(){var e,i=o.extend({},t,n||{}),u=i.target||this,c=this,m=document.createElement(\"img\"),a=o(m),r=\"mousemove.zoom\",l=!1;(i.url||(e=o(c).find(\"img\"),e[0]&&(i.url=e.data(\"src\")||e.attr(\"src\")),i.url))&&(m.onload=function(){function t(t){e.init(),e.move(t),a.stop().fadeTo(o.support.opacity?i.duration:0,1,o.isFunction(i.onZoomIn)?i.onZoomIn.call(m):!1)}function n(){a.stop().fadeTo(i.duration,0,o.isFunction(i.onZoomOut)?i.onZoomOut.call(m):!1)}var e=o.zoom(u,c,m);\"grab\"===i.on?o(c).on(\"mousedown.zoom\",function(i){1===i.which&&(o(document).one(\"mouseup.zoom\",function(){n(),o(document).off(r,e.move)}),t(i),o(document).on(r,e.move),i.preventDefault())}):\"click\"===i.on?o(c).on(\"click.zoom\",function(i){return l?void 0:(l=!0,t(i),o(document).on(r,e.move),o(document).one(\"click.zoom\",function(){n(),l=!1,o(document).off(r,e.move)}),!1)}):\"toggle\"===i.on?o(c).on(\"click.zoom\",function(o){l?n():t(o),l=!l}):(e.init(),o(c).on(\"mouseenter.zoom\",t).on(\"mouseleave.zoom\",n).on(r,e.move)),o.isFunction(i.callback)&&i.callback.call(m)},m.src=i.url,o(c).one(\"zoom.destroy\",function(){o(c).off(\".zoom\"),a.remove()}))})},o.fn.zoom.defaults=t})(window.jQuery);
\t</script>
\t<script type=\"text/javascript\">
\t$(document).ready(function(){
\t\t\t$('#ex1').zoom();
\t\t
\t\t$('#ex2').zoom();
\t\t
\t\t
\t\t
\t\t});
\t</script>

____________

If you want further help, inbox me @ saurabh.15283@gmail.com

Image zoom on mouseover