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 provides interactive image comparison visualization. This JQuery based plugin can be utilized to showcase product comparison in a more interactive way.



So, today, I shall be demonstrating Twenty Twenty JQuery based 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.

Let's begin now.

Step 1

Create a new MVC project and name it "ImgDiff".

Step 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.

Step 3

Open "Views->Shared->_Layout.cshtml"file and replace following code in it

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>@ViewBag.Title</title>
  7. @Styles.Render("~/Content/css")
  8. @Scripts.Render("~/bundles/modernizr")
  10. <!-- Font Awesome -->
  11. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
  13. <!-- Img Diff -->
  14. @Styles.Render("~/Plugin/Twenty-Twenty/css")
  15. </head>
  16. <body>
  17. <div class="navbar navbar-inverse navbar-fixed-top">
  18. <div class="container">
  19. <div class="navbar-header">
  20. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  21. <span class="icon-bar"></span>
  22. <span class="icon-bar"></span>
  23. <span class="icon-bar"></span>
  24. </button>
  25. </div>
  26. </div>
  27. </div>
  28. <div class="container body-content">
  29. @RenderBody()
  30. <hr />
  31. <footer>
  32. <center>
  33. <p><strong>Copyright © @DateTime.Now.Year - <a href="http://wwww.asmak9.com/">Asma's Blog</a>.</strong> All rights reserved.</p>
  34. </center>
  35. </footer>
  36. </div>
  38. @*Scripts*@
  39. @Scripts.Render("~/bundles/jquery")
  40. @Scripts.Render("~/bundles/bootstrap")
  42. <!-- Img Diff -->
  43. @Scripts.Render("~/Plugin/Twenty-Twenty")
  45. @RenderSection("scripts", required: false)
  46. </body>
  47. </html>
In the above code, we have simply set up our basic layout structure and we have also included required CCS & Java Script files references.

Step 4

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

Step 5

Open "Controllers->ImgDiffController.cs" file and replace following code in it

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  7. namespace ImgDiff.Controllers
  8. {
  9. public class ImgDiffController : Controller
  10. {
  11. #region Index view method.
  13. #region Get: /ImgDiff/Index.
  15. /// <summary>
  16. /// Get: /ImgDiff/Index.
  17. /// </summary>
  18. /// <returns>Return index view</returns>
  19. public ActionResult Index()
  20. {
  21. try
  22. {
  23. }
  24. catch (Exception ex)
  25. {
  26. // Info
  27. Console.Write(ex);
  28. }
  30. // Info.
  31. return this.View();
  32. }
  34. #endregion
  36. #endregion
  37. }
  38. }
The above piece of code simply returns a basic view without any specific processing.

Step 6

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

  1. @{
  2. ViewBag.Title = "ASP.NET MVC5: Jquery Image Diff";
  3. }
  6. <div class="row">
  7. <div class="panel-heading">
  8. <div class="col-md-8">
  9. <h3>
  10. <i class="fa fa-file-text-o"></i>
  11. <span>ASP.NET MVC5: Jquery Image Diff</span>
  12. </h3>
  13. </div>
  14. </div>
  15. </div>
  17. <div class="row">
  18. <section class="col-md-7 col-md-push-3">
  19. <div class="large-8 columns">
  20. <div class="twentytwenty-container">
  21. <img src="~/Content/img/ori.jpg" />
  22. <img src="~/Content/img/bright.jpg" />
  23. </div>
  24. </div>
  25. </section>
  26. </div>
In the above piece of code, I have placed my two images, whose differences I want to showcase within the "Twenty Twenty" JQuery plugin container i.e.
  1. <div class="twentytwenty-container">
  2. <img src="~/Content/img/ori.jpg" />
  3. <img src="~/Content/img/bright.jpg" />
  4. </div>
Step 7

Create an "custom-img-diff.js" file within "Scripts" folder and replace the following code in it
  1. $(document).ready(function ()
  2. {
  3. $(".twentytwenty-container").twentytwenty({ default_offset_pct: 0.5 });
  4. });
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 centered, it can be set between the range of 0 to 1.

Step 8

Let's execute the project, you will be able to see the following




Conclusion

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