O desenvolvimento moderno da web se concentra cada vez mais na interação do usuário, e hoje vamos ver um tutorial simples de como realizarmos o efeito de “comparação” entre duas imagens. Twenty Twenty é um desses plugins que fornece visualização de comparação de imagem interativa. Este plugin baseado em JQuery pode ser utilizado para mostrar a comparação de produtos de forma mais interativa.
A primeira coisa a ser necessária, é possuir um projeto de MVC já criado para que possamos utilizar e adicionar as referências do plugin. Faça o download do plugin aqui. Após o download, eu criei uma pasta chamada plugin e adicionei a referência do mesmo em uma view com a estrutura básica necessária, no caso eu adicionei na view Shared->_Layout.cshtml que é a view compartilhada do nosso projeto, sendo o mais recomendado adicionarmos referências por lá:
<!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 © @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>
Agora na sua controller (se não existir, crie uma), você precisará adicionar o seguinte código:
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
}
}
Agora na sua view (se não existir, crie uma), adicione as imagens e o trecho do plugin para comparação das imagens:
@{
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>
<script>$(document).ready(function ()
{
$(".twentytwenty-container").twentytwenty({ default_offset_pct: 0.5 });
});
</script>
No trecho de código acima, eu adicionei o plugin “Twenty Twenty” JQuery para mostrar minha diferença/comparação de imagens. Também configurei a posição do controle deslizante de comparação padrão para ser centrada, ela pode ser definida entre o intervalo de 0 a 1.
Um grande abraço a todos!
Referências: https://gallery.technet.microsoft.com/ASPNET-MVC5-JQuery-Image-1001a821
