Option #1 - Use CORE plugin
Please refer this blog post
Option #2 - Modify _ProductDetailsPictures.cshtml view
Open the \Views\Product\_ProductDetailsPictures.cshtml file to edit.
[Optional] Remove redundant code (the text in line-through style)
$(document).ready(function () {
$('#main-product-img-lightbox-anchor-@Model.Id').magnificPopup(
{
type: 'image',
removalDelay: 300,
gallery: {
enabled: true,
tPrev: '@T("Media.MagnificPopup.Previous")',
tNext: '@T("Media.MagnificPopup.Next")',
tCounter: '@T("Media.MagnificPopup.Counter")'
},
tClose: '@T("Media.MagnificPopup.Close")',
tLoading: '@T("Media.MagnificPopup.Loading")'
});
});
In the picture-thumbs block, wraps a new anchor tag outside of image tag (the text in bold style)
<div class="picture-thumbs">
@foreach (var picture in Model.PictureModels)
{
<div class="thumb-item">
<a href="@picture.FullSizeImageUrl" title="@picture.Title" class="thumb-item-link">
<img src="@picture.ThumbImageUrl" alt="@picture.AlternateText" title="@picture.Title" data-defaultsize="@picture.ImageUrl" data-fullsize="@picture.FullSizeImageUrl"/>
</a>
</div>
}
</div>
In the script block
$(document).ready(function () {
$('.thumb-item img').on('click', function () {
$('#main-product-img-@Model.Id').attr('src', $(this).attr('data-defaultsize'));
$('#main-product-img-@Model.Id').attr('title', $(this).attr('title'));
$('#main-product-img-@Model.Id').attr('alt', $(this).attr('alt'));
$('#main-product-img-lightbox-anchor-@Model.Id').attr('href', $(this).attr('data-fullsize'));
$('#main-product-img-lightbox-anchor-@Model.Id').attr('title', $(this).attr('title'));
});
});
add a new script (text in the bold style), in order to open "Magnific Popup" with the "Next" and "Previous" buttons
$(document).ready(function () {
$('.thumb-item img').on('click', function () {
$('#main-product-img-@Model.Id').attr('src', $(this).attr('data-defaultsize'));
$('#main-product-img-@Model.Id').attr('title', $(this).attr('title'));
$('#main-product-img-@Model.Id').attr('alt', $(this).attr('alt'));
$('#main-product-img-lightbox-anchor-@Model.Id').attr('href', $(this).attr('data-fullsize'));
$('#main-product-img-lightbox-anchor-@Model.Id').attr('title', $(this).attr('title'));
});
$('.thumb-item-link').magnificPopup({
type: 'image',
removalDelay: 300,
gallery: {
enabled: true,
tPrev: '@T("Media.MagnificPopup.Previous")',
tNext: '@T("Media.MagnificPopup.Next")',
tCounter: '@T("Media.MagnificPopup.Counter")'
},
tClose: '@T("Media.MagnificPopup.Close")',
tLoading: '@T("Media.MagnificPopup.Loading")'
});
});
Finally, it should look like following:
