Header Ads

ASP.NET MVC5: JQuery Image Difference/Comparison Plugin

June 28, 2017 , , , ,
Modern web development focuses more and more on user interaction due to which there are tons of cool interactive plugins available to be integrated in any web platform.
Twenty Twenty is one such plugin which provide interactive image comparison visualization. This JQuery base plugin can be utilized to showcase product comparison in a more interactive way.



So, today, I shall be demonstrating Twenty Twenty JQuery base plugin with ASP.NET MVC5 platform.

Following are some prerequisites before you proceed further in this tutorial:
  1. Download Twenty Twenty JQuery plugin.
  2. Knowledge of ASP.NET MVC5.
  3. Knowledge of HTML.
  4. Knowledge of JavaScript.
  5. Knowledge of Bootstrap.
  6. Knowledge of Jquery.
  7. Knowledge of C# Programming.
You can download the complete source code for this tutorial or you can follow the step by step discussion below. The sample code is being developed in Microsoft Visual Studio 2015 Enterprise.

Download Now!

Let's begin now.  

1) Create a new MVC project and name it "ImgDiff".  
2) Make sure to download "Twenty Twenty" JQuery plugin, then create new folder "Plugin" under project root and copy "CSS" & "JS" folders of the plugin into this new folder.  
3) Open "Views->Shared->_Layout.cshtml"file and replace following code in it i.e.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

    <!-- Img Diff -->
    @Styles.Render("~/Plugin/Twenty-Twenty/css")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <center>
                <p><strong>Copyright &copy; @DateTime.Now.Year - <a href="http://wwww.asmak9.com/">Asma's Blog</a>.</strong> All rights reserved.</p>
            </center>
        </footer>
    </div>

    @*Scripts*@
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

    <!-- Img Diff -->
    @Scripts.Render("~/Plugin/Twenty-Twenty")

    @RenderSection("scripts", required: false)
</body>
</html>

In the above code, we have simply setup our basic layout structure and we have also included require CCS & Java Script files references.

4) Now, create new controller under "Controllers" folder and name it "ImgDiffController.cs".

5) Open "Controllers->ImgDiffController.cs" file and replace following code in it i.e.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ImgDiff.Controllers
{
    public class ImgDiffController : Controller
    {
        #region Index view method.

        #region Get: /ImgDiff/Index.

        /// <summary>
        /// Get: /ImgDiff/Index.
        /// </summary>        
        /// <returns>Return index view</returns>
        public ActionResult Index()
        {
            try
            {
            }
            catch (Exception ex)
            {
                // Info
                Console.Write(ex);
            }

            // Info.
            return this.View();
        }

        #endregion

        #endregion
    }
}

The above piece of code simply returns a basic view without any specific processing.  

6) Create "Index.cshtml" file under "Views->ImgDiff" folder and replace following code in it i.e.


@{
    ViewBag.Title = "ASP.NET MVC5: Jquery Image Diff";
}


<div class="row">
    <div class="panel-heading">
        <div class="col-md-8">
            <h3>
                <i class="fa fa-file-text-o"></i>
                <span>ASP.NET MVC5: Jquery Image Diff</span>
            </h3>
        </div>
    </div>
</div>

<div class="row">
    <section class="col-md-7 col-md-push-3">
        <div class="large-8 columns">
            <div class="twentytwenty-container">
                <img src="~/Content/img/ori.jpg" />
                <img src="~/Content/img/bright.jpg" />
            </div>
        </div>
    </section>
</div>

 In the above piece of code, I have placed my two images, whose difference I want to showcase within the "Twenty Twenty" JQuery plugin container i.e.


            <div class="twentytwenty-container">
                <img src="~/Content/img/ori.jpg" />
                <img src="~/Content/img/bright.jpg" />
            </div>

 7) Create an "custom-img-diff.js" file within "Scripts" folder and replace following code in it i.e.


$(document).ready(function ()
{
    $(".twentytwenty-container").twentytwenty({ default_offset_pct: 0.5 });
});

In the above, I have called the "Twenty Twenty" JQuery plugin to showcase my images difference/comparison. I have also set the default compare slider position to be center, it can be set between the range 0 to 1.

8) Let's execute the project, you will be able to see following i.e.
 

Conclusion

In this article, you will learn about interactive visual image comparison JQuery base plugin Twenty Twenty. You will also learn about the integration of Twenty Twenty JQuery plugin with ASP.NET MVC5 platform along with the utilization of Twenty Twenty JQuery plugin.

Post a Comment

No comments

Subscribe to: Post Comments ( Atom )