Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @model ProductDetailsModel
- @using Nop.Web.Models.Catalog;
- @{
- Html.AddScriptParts("~/Scripts/jquery.magnific-popup.min.js");
- Html.AddCssFileParts("~/Content/magnific-popup/magnific-popup.css");
- }
- <div class="gallery">
- <div class="picture">
- @if (Model.DefaultPictureZoomEnabled)
- {
- <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" itemprop="image" id="main-product-img-@Model.Id" />
- </a>
- <script type="text/javascript">
- $(document).ready(function () {
- $('#main-product-img-lightbox-anchor-@Model.Id').magnificPopup(
- {
- type: 'image',
- removalDelay: 300,
- gallery: {
- enabled: true
- },
- tClose: '@T("Media.MagnificPopup.Close")',
- tLoading: '@T("Media.MagnificPopup.Loading")'
- });
- });
- </script>
- }
- else
- {
- <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
- }
- </div>
- @if (Model.PictureModels.Count > 1)
- {
- <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>
- <script type="text/javascript">
- $(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")'
- });
- });
- </script>
- }
- </div>
Add Comment
Please, Sign In to add comment