96 lines
4.9 KiB
Plaintext
96 lines
4.9 KiB
Plaintext
@model ProductDetailsModel
|
|
|
|
<link rel="stylesheet" href="~/lib_npm/magnific-popup/magnific-popup.css" />
|
|
<script asp-exclude-from-bundle="true" src="~/lib_npm/magnific-popup/jquery.magnific-popup.min.js" asp-location="Footer"></script>
|
|
|
|
<div class="picture-gallery">
|
|
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductDetailsBeforePictures, additionalData = Model })
|
|
<div class="picture">
|
|
@if (Model.DefaultPictureZoomEnabled && Model.PictureModels.Count == 1)
|
|
{
|
|
<a href="@Model.DefaultPictureModel.FullSizeImageUrl" title="@Model.DefaultPictureModel.Title" id="main-product-img-lightbox-anchor-@Model.Id">
|
|
<img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" id="main-product-img-@Model.Id" />
|
|
</a>
|
|
<script asp-location="Footer">
|
|
$(function() {
|
|
$('#main-product-img-lightbox-anchor-@Model.Id').magnificPopup({ type: 'image' });
|
|
});
|
|
</script>
|
|
}
|
|
else
|
|
{
|
|
<img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" id="main-product-img-@Model.Id" />
|
|
}
|
|
</div>
|
|
@if (Model.PictureModels.Count > 1 && Model.DefaultPictureZoomEnabled)
|
|
{
|
|
<div class="picture-thumbs">
|
|
@foreach (var picture in Model.PictureModels)
|
|
{
|
|
<a class="thumb-item" data-pictureid="@picture.Id" href="@picture.FullSizeImageUrl" alt="@picture.AlternateText" title="@picture.Title">
|
|
<img src="@picture.ThumbImageUrl" alt="@picture.AlternateText" title="@picture.Title" data-defaultsize="@picture.ImageUrl" data-fullsize="@picture.FullSizeImageUrl" />
|
|
</a>
|
|
}
|
|
</div>
|
|
<script asp-location="Footer">
|
|
$(function() {
|
|
$('.picture-thumbs').magnificPopup(
|
|
{
|
|
type: 'image',
|
|
delegate: 'a',
|
|
removalDelay: 300,
|
|
gallery: {
|
|
enabled: true,
|
|
navigateByImgClick: true,
|
|
preload: [0, 1],
|
|
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")'
|
|
});
|
|
});
|
|
</script>
|
|
<script asp-location="Footer">
|
|
$(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'));
|
|
});
|
|
});
|
|
</script>
|
|
}
|
|
else
|
|
{
|
|
if (Model.PictureModels.Count > 1)
|
|
{
|
|
<div class="picture-thumbs">
|
|
@foreach (var picture in Model.PictureModels)
|
|
{
|
|
<div class="thumb-item" data-pictureid="@picture.Id">
|
|
<img src="@picture.ThumbImageUrl" alt="@picture.AlternateText" title="@picture.Title" data-defaultsize="@picture.ImageUrl" data-fullsize="@picture.FullSizeImageUrl" />
|
|
</div>
|
|
}
|
|
</div>
|
|
<script asp-location="Footer">
|
|
$(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'));
|
|
});
|
|
});
|
|
</script>
|
|
}
|
|
}
|
|
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductDetailsAfterPictures, additionalData = Model })
|
|
</div> |