رفتن به عکس بعدی و قبلی

سلام و وقت بخیر عرض میکنم خدمت شما عزیزان
من از ناپ کامرس 3.90 با تم پیش فرض که همون DefaultClean هست کار میکنم. یه مشکلی که وجود داره، این هست که ما برای هر محصولمون بین 5 تا 10 عکس داریم. اما وقتی که روی یک عکس کلیک میشه و با پاپ آپ ذره بین بزرگ نمایش داده میشه، هیچ دکمه ای برای رفتن به عکس قبلی و بعدی وجود نداره. در نتیجه برای دیدن هر عکس، مشتری ها باید عکس فعلی رو ببندن و روز عکس کوچک بعدی کلیک کنن تا بزرگ بشه و ببیننش.
چطور میشه این مشکل رو حل کرد؟
قبلا در ناپ کامرس 3.50 عالی کار میکرد اما در ناپ کامرس 3.90 کار نمیکنه.
چطور درستش کنم؟
ممنون

سلام عرض میکنم جناب
می تونید ویو ProductDetailsPictures.cshtml رو ویرایش بفرمایید. \Views\Product\_ProductDetailsPictures.cshtml رو باز کنید و طبق چیزی که عرض می کنم خدمتتون، ویرایشش کنید.

$(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")'
    });
}); 

در بلاک picture-thumbs یک تگ اینک ایجاد کنید.(خارج از تگ image. قسمتی که بولد شده در کد زیر):

<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> 

در بلاک اسکریپت:

$(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'));
    });
}); 

یک اسکریپت جدید ایجاد کنید تا پاپ آپ بزرگ نمایی رو با دکمه های "قبلی" و "بعدی" باز کنه.( قسمتی که بولد شده در کد زیر):

$(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")'
    });
}); 

در نهایت کد شما باید به شکل زیر باشه:

  @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>

عکس های گوگل فوتوازتاریخ29/اوت/2023 هم رسانی وبازیابی شود. وایجادشود