jQuery Magnifying Glass Zoom Plugin Effect Css in Asp.net MVC

This article will show you how you can create jQuery Magnifying Glass Zoom Plugin Effect Css in Asp.net MVC.

Some of my previous articles are as follows: jQuery Ajax Duplicate UserId Validation in Asp.Net Without Page Refresh Using C#.Net, Ajax Login Form Validation Without Page Refresh Using jQuery In Asp.Net and C#.Net, Validate DropDownlist Selected Value Using jQuery In Asp.net ,C#.Net, Dynamically Load Asp.net MVC Layout Page On DropDownList Value Using C#.Net, Dynamic Vertical Css Menu Using jQuery, Css and C#.net In Asp.net MVC, Responsive Grid Design Example Using Css in Asp.Net MVC,HTML, jQuery Ajax Cascaded DropdownList in Asp.net MVC Using C#.Net.

So for this article first we will create a new mvc application. Here is the controller code.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcApplication1.Controllers {     public class HomeController : Controller     {         //         // GET: /Home/         public ActionResult Index()         {             ViewBag.SmallImage = "../../Images/Tulips_small.jpg";             ViewBag.BigImage = "../../Images/Tulips.jpg";             return View();         }     } }

In above code I have stored image path in view bag. Add the below code into you view after creating it.

@{     ViewBag.Title = "jQuery Magnifying Glass Zoom Plugin Effect Css in Asp.net Mvc"; } <link href="../../css/magnificent.css" rel="stylesheet" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="../../js/magnificent.js" type="text/javascript"></script> <script>     $(document).ready(function () {         $('img').magnify();     }); </script> <img src="@ViewBag.SmallImage" alt="" data-magnify-src="@ViewBag.BigImage">

In above code I have used two type of images one small and other is for large image which will be shown in magnification glass.

Now we have done. Run the application to check the output.

Now put the mouse cursor for viewing magnification effect.

DOWNLOAD