This article will show you how you can perform magnifying
glass effect of image using jquery in mvc. In this article I have used jZoom
jQuery plugin.
Some of my previous articles as follows: Blink
Title or Multiple Browser Title Using jQuery in Asp.Net, MVC, Social
Share Buttons of Facebook, Twitter, Google Plus and Pinterest Using jQuery in
Asp.Net MVC, Bootstrap
3 and jQuery Form Validation Plugin in Asp.Net MVC, MultiSelect
DropdownList Using jQuery in Asp.Net MVC and C#.Net, Three
Level Menus With Disable Menu Item Using jQuery In Asp.Net, jQuery
Dialog Box Open with Blind and Close With Explode Effect in Asp.Net.
So for this article first we will create a new mvc application and add the blow controller code.
So for this article first we will create a new mvc application and add the blow 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.ImageURL = "../../Images/p.jpg";
return
View();
}
}
}
|
In above code I have used viewbag to store the image url. Now create the view and add the below library reference.
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="../../Content/jzoom.min.js" type="text/javascript"></script>
|
Now we will add the below jquery code. This code will perform the zoom effect.
<script>
$('.jzoom').jzoom({
bgColor: "#222" });
</script>
|
Now check the complete code.
@{
ViewBag.Title = "Magnifying
Glass Effect Of Image Using jQuery in MVC";
}
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="../../Content/jzoom.min.js" type="text/javascript"></script>
<script>
$('.jzoom').jzoom({
bgColor: "#222" });
</script>
<style>
img
{
border:
3px solid #fff;
}
.jzoom
{
position:
absolute;
top: 10px;
left: 5px;
width:
350px;
height:
350px;
}
</style>
<div class="jzoom">
<img src="@ViewBag.ImageURL" height="350"
width="350">
</div>
|
Here we need to pass only the small image name, and big image name will be the prefix with _big.
Now we have done run the application and check the output.
About the Author
could put the example in asp.net with vb.net. thank you
ReplyDeleteHi Please use C# to VB converter to convert the code in VB.Net
Deletehttps://converter.telerik.com/
OR check the converted code.
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.Mvc
Namespace MvcApplication1.Controllers
Public Class HomeController
Inherits Controller
Public Function Index() As ActionResult
ViewBag.ImageURL = "../../Images/p.jpg"
Return View()
End Function
End Class
End Namespace