Guest User

Untitled

a guest
Feb 11th, 2018
354
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.36 KB | None | 0 0
  1. @model ProductDetailsModel
  2. @using Nop.Web.Models.Catalog;
  3. @{
  4. Html.AddScriptParts("~/Scripts/jquery.magnific-popup.min.js");
  5. Html.AddCssFileParts("~/Content/magnific-popup/magnific-popup.css");
  6. }
  7. <div class="gallery">
  8. <div class="picture">
  9. @if (Model.DefaultPictureZoomEnabled)
  10. {
  11. <a href="@Model.DefaultPictureModel.FullSizeImageUrl" title="@Model.DefaultPictureModel.Title" id="main-product-img-lightbox-anchor-@Model.Id">
  12. <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
  13. </a>
  14. <script type="text/javascript">
  15. $(document).ready(function () {
  16. $('#main-product-img-lightbox-anchor-@Model.Id').magnificPopup(
  17. {
  18. type: 'image',
  19. removalDelay: 300,
  20. gallery: {
  21. enabled: true
  22. },
  23. tClose: '@T("Media.MagnificPopup.Close")',
  24. tLoading: '@T("Media.MagnificPopup.Loading")'
  25. });
  26. });
  27. </script>
  28. }
  29. else
  30. {
  31. <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
  32. }
  33. </div>
  34. @if (Model.PictureModels.Count > 1)
  35. {
  36. <div class="picture-thumbs">
  37. @foreach (var picture in Model.PictureModels)
  38. {
  39. <div class="thumb-item">
  40. <a href="@picture.FullSizeImageUrl" title="@picture.Title" class="thumb-item-link">
  41. <img src="@picture.ThumbImageUrl" alt="@picture.AlternateText" title="@picture.Title" data-defaultsize="@picture.ImageUrl" data-fullsize="@picture.FullSizeImageUrl"/>
  42. </a>
  43. </div>
  44. }
  45. </div>
  46. <script type="text/javascript">
  47. $(document).ready(function () {
  48. $('.thumb-item img').on('click', function () {
  49. $('#main-product-img-@Model.Id').attr('src', $(this).attr('data-defaultsize'));
  50. $('#main-product-img-@Model.Id').attr('title', $(this).attr('title'));
  51. $('#main-product-img-@Model.Id').attr('alt', $(this).attr('alt'));
  52. $('#main-product-img-lightbox-anchor-@Model.Id').attr('href', $(this).attr('data-fullsize'));
  53. $('#main-product-img-lightbox-anchor-@Model.Id').attr('title', $(this).attr('title'));
  54. });
  55. $('.thumb-item-link').magnificPopup(
  56. {
  57. type: 'image',
  58. removalDelay: 300,
  59. gallery: {
  60. enabled: true,
  61. tPrev: '@T("Media.MagnificPopup.Previous")',
  62. tNext: '@T("Media.MagnificPopup.Next")',
  63. tCounter: '@T("Media.MagnificPopup.Counter")'
  64. },
  65. tClose: '@T("Media.MagnificPopup.Close")',
  66. tLoading: '@T("Media.MagnificPopup.Loading")'
  67. });
  68. });
  69. </script>
  70. }
  71. </div>
Add Comment
Please, Sign In to add comment