Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Image zoom on mouseover

Hi,

Is there any way to get image roll over zoom? I have bigger images which i am showing in small size on maxdiff exercise. I want rollover image zoom.
asked Sep 27, 2013 by IL Bronze (1,580 points)
retagged Sep 1, 2016 by Walter Williams

2 Answers

+2 votes
 
Best answer
HI,

Please use below code in image tag.
<code>
<span class='zoom' id='ex1'><img class='img4' src="/studyname/graphics/images/image1.png"></span>
</code>

You need to create separate id for each image (ex1, ex2 etc.)
and Paste this code in header.

<code>
<style>
        /* styles unrelated to zoom */
        * { border:0; margin:0; padding:0; }
        p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

        /* these styles are for the demo, but are not required for the plugin */
        .zoom {
            display:inline-block;
            position: relative;
        }
       
        /* magnifying glass icon */
        .zoom:after {
            content:'';
            display:block;
            width:33px;
            height:33px;
            position:absolute;
            top:0;
            right:0;
            background:url(icon.png);
        }

        .zoom img {
            display: block;
        }

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

        #ex2 img:hover { cursor: url(grab.cur), default; }
        #ex2 img:active { cursor: url(grabbed.cur), default; }
    </style>
<script src='/studyname/graphics/jquery.min.js'></script>
    <script src='/studyname/graphics/jquery.zoom.js'></script>
    <script>
jQuery.noConflict();
jQuery(document).ready(function($){
            $('#ex1').zoom();
                        $('#ex2').zoom();
        });
    </script>
</code>

You need to zoom each id in the code ( $('#ex2').zoom();). Also you need to download jquery.min.js and jquery.zoom.js using google.

Thanks,
Rajesh
answered Sep 27, 2013 by Rajesh Rana Gold (23,530 points)
selected Sep 27, 2013 by IL
Thanks ranarajesh85 for quick reply. I will take a look and will get back to you.
0 votes
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">
   
        * { border:0; margin:0; padding:5; }
        p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

       
        .zoom {
            display:inline-block;
            position: relative;
        }
       
       
        .zoom:after {
            content:'';
            display:block;
            width:33px;
            height:33px;
            position:absolute;
            top:0;
            right:0;
           
        }

        .zoom img {
            display: block;
        }

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

       
    </style>
    <script type="text/javascript">
       
(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);
    </script>
    <script type="text/javascript">
    $(document).ready(function(){
            $('#ex1').zoom();
       
        $('#ex2').zoom();
       
       
       
        });
    </script>

____________

If you want further help, inbox me @ saurabh.15283@gmail.com
answered Sep 27, 2013 by Saurabh
Thanks Saurabh, but above code shared by ranarajesh85 works for me. Thanks again for sharing your own as well.
...