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:
- Download Twenty Twenty JQuery plugin.
- Knowledge of ASP.NET MVC5.
- Knowledge of HTML.
- Knowledge of Bootstrap.
- Knowledge of Jquery.
- 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.
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.
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.
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.
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.
7) Create an “custom-img-diff.js” file within “Scripts” folder and replace following code in it i.e.
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.
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.