.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Sandeep Singh

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

How to magnify a part of an image within a webpage of ASP.Net

Posted By:ASPEvil       Posted Date: July 25, 2014    Points: 200    Category: ASP.NET    URL: http://www.dotnetspark.com  

How you can magnify a part of an image by hovering the mouse cursor on it, on your asp.net page.

With some of the shopping cart websites, we can see when we hover the mouse cursors on product images, the part of the image on which the mouse cursor is, gets enlarged instead of the total page enlarge. It definitely looks good and also increase its visibility.

Now lets see how we can make such a product image with our website. This article guides you on that.

First we need to refer the JQuery files which makes the actual enlarge work, as follow:-

<script type="text/javascript" src="image magnifying glass/js/jquery-2.0.3.min.js"></script>
	<script type="text/javascript" src="image magnifying glass/js/jquery.mlens-1.2.min.js"></script>

Then we need to put a JavaScript code which will point out which image on the webpage, to be enlarged. This JavaScript code is as follow:-

<script type="text/javascript">
    $(document).ready(function () {
        $("#content .img_wrapper img").each(function () {
            $(this).load(function () {
					    "imgSrc": $(this).attr("data-big"),
					    "lensSize": 120,
					    "lensShape": "circle"

Now, we will move forward to the process of specifying the image which will be enlarged. But before we go to that process of enlarging the image, we need to know what actually happens in this process.

To make the enlarge process, we need to have two images of same. One image is the image which will be put/displayed on the webpage and another one is the same image but its a large one in size, as compared with the image which has been put on the webpage. So when we keep the mouse cursor on a particular part of the image of webpage, then exactly that part of large image is shown on mouse cursor; so much big your large image will be, that much enlarged part will be shown with the mouse cursor, though, it is a bit depended on the code: "lensSize": 120, of the above mentioned JavaScript code which tells how much big the magnifying lens will be.

So, lets have two same image/picture, one is normal or small sized which will be put on the webpage and another will be the same image/picture but its size will be larger than the image/picture put on the webpage.

Now, put that webpage picture with webpage, using the following code:-

<section id="content">
                                                      <div id="img_wrapper" style='width:960px'>
                                                          <div class='img_wrapper'>
                                                              <img id="gm1" src="mypic.jpg" width="180px" height="580px" data-big="mypic_big.jpg" />

With this above code, I have used two images/pictures as the webpage picture of normal/small sized which is named as: "mypic.jpg" and the same image/picture but with a larger size, which is named as: "mypic_big.jpg".


 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend