Thursday, December 22

Zoom image onmousover using jquery

In  this article we will explore how to leverage animate feature of jquery to zoom an image on mouseover. Download jquery from http://jquery.com/


JQuery Zoom Image

Lets see how we can do this.

Step 1: Dowload jquery from the above mentioned url and add it in the head section of the page.

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

Step 2: Add below style in the head section of the page

<style type="text/css">
      
.imgThNail
      
{
            height: 150px
;
            width: 150px
;
      }
</style>


Step 3: Add below jquery in the page.

<script type="text/javascript">
      
$(function
() {
            $("img.imgThNail").mouseover(function
(e) {
                  var newImg = '<img src=' + $(this).attr("src") + '></img>'
;
                  $('#sourceDiv'
)
                        .html($(newImg)
                        .animate({ height: $(this).width() + 40, width: ($(this
).width() + 40) }, 10));
            var left = ($(this).position().left - 20) + "px"
;
            var top = ($(this).position().top - 20) + "px"
;
            $("#sourceDiv"
).css({
                  position: 'absolute'
,
                  zIndex: 2,
                  left: left,
                  top: top,
                  display:
'block'
            
});
      });
      $("#sourceDiv").mouseout(function
(e) {
            $("#sourceDiv"
).css({
                  display:
'none'
                  
});
            });
      });
      document.onclick = check;
      function
check(e) {
            $("#sourceDiv"
).css({
                  display:
'none'
            
});
      }
</script>


Step 4: Add below images on the page

<div style="padding:40px">
      
<asp:Image ID="imgA" class="imgThNail" runat="server" ImageUrl="images/Aston_Martin-V12_Vantage_2010.jpg"
/>
      
<asp:Image ID="imgB" class="imgThNail" runat="server" ImageUrl="images/Hummer-H3_Alpha_2008.jpg"
/>
      
<asp:Image ID="imgC" class="imgThNail" runat="server" ImageUrl="images/Mercedes-Benz-SL63_AMG_2009.jpg"
/>
      
<asp:Image ID="Image1" class="imgThNail" runat="server" ImageUrl="images/Suzuki-Swift.jpg"
/>
      
<div id="sourceDiv" style="display: none; border: Solid 1px White;
">
      
</div
></div>


Live Demo

This ends the article of zooming image on mouse over using jquery
Like us if you find this post useful. Thanks!
Shibashish mohanty

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty