Hi AliYilmaz,
For working with xzoom plugin a main image, on which xzoom will be applied and for thumbnails url required.
To apply this plugin you need to inherit the xzoom js and css.
And for magnificPopup you need to inherit the jquery.magnific-popup js and css.
For more details and documentation refer below links.
https://payalord.github.io/xZoom/docs/index.html
https://github.com/payalord/xZoom
Refer below example.
Model
public class ImageModel
{
public int Id { get; set; }
public string ImgUrl { get; set; }
public string ImgUrl_Thumb { get; set; }
public string Articel_Oid { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<ImageModel> images = new List<ImageModel>();
images.Add(new ImageModel { Id = 9388, ImgUrl = "https://ltbimg.mncdn.com/1009-60487-15149-53630_front.jpg", ImgUrl_Thumb = "https://ltbimg.mncdn.com/B2BThumbs/1009-60487-15149-53630_front_thumb.jpg", Articel_Oid = "030DAD59-EFFD-43BB-9C29-5D39D3E7CB0E" });
images.Add(new ImageModel { Id = 9417, ImgUrl = "https://ltbimg.mncdn.com/1009-60487-15149-53630_back.jpg", ImgUrl_Thumb = "https://ltbimg.mncdn.com/B2BThumbs/1009-60487-15149-53630_back_thumb.jpg", Articel_Oid = "030DAD59-EFFD-43BB-9C29-5D39D3E7CB0E" });
return View(images);
}
}
View
@model IEnumerable<XZoom_MVC.Models.ImageModel>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/xzoom/dist/xzoom.css" />
<script type="text/javascript" src="https://unpkg.com/xzoom/dist/xzoom.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script type="text/javascript">
$(function () {
// Applying xzoom plugin.
$('.xzoom, .xzoom-gallery').xzoom();
// Applying magnific popup plugin.
$('#xzoom-magnific').bind('click', function () {
var xzoom = $(this).data('xzoom');
xzoom.closezoom();
var gallery = xzoom.gallery().cgallery;
var images = [];
for (var i = 0; i < gallery.length; i++) {
images[i] = { src: gallery[i] };
}
$.magnificPopup.open({ items: images, type: 'image', gallery: { enabled: true } });
});
});
</script>
</head>
<body>
@if (Model != null)
{
<div class="xzoom-container">
<img class="xzoom" id="xzoom-magnific" width="200"
src="@Model.FirstOrDefault().ImgUrl"
xoriginal="@Model.FirstOrDefault().ImgUrl">
<br />
@foreach (var item in Model)
{
<a href="@item.ImgUrl">
<img class="xzoom-gallery" width="80"
src="@item.ImgUrl_Thumb"
xpreview="@item.ImgUrl">
</a>
}
</div>
}
</body>
</html>
Screenshot
