بسته

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

5 سال پیش
#1776 نقل قول
سلام و وقت بخیر عرض میکنم خدمت شما عزیزان
من از ناپ کامرس 3.90 با تم پیش فرض که همون DefaultClean هست کار میکنم. یه مشکلی که وجود داره، این هست که ما برای هر محصولمون بین 5 تا 10 عکس داریم. اما وقتی که روی یک عکس کلیک میشه و با پاپ آپ ذره بین بزرگ نمایش داده میشه، هیچ دکمه ای برای رفتن به عکس قبلی و بعدی وجود نداره. در نتیجه برای دیدن هر عکس، مشتری ها باید عکس فعلی رو ببندن و روز عکس کوچک بعدی کلیک کنن تا بزرگ بشه و ببیننش.
چطور میشه این مشکل رو حل کرد؟
قبلا در ناپ کامرس 3.50 عالی کار میکرد اما در ناپ کامرس 3.90 کار نمیکنه.
چطور درستش کنم؟
ممنون
0
5 سال پیش
#1777 نقل قول
سلام عرض میکنم جناب
می تونید ویو 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")'
    });

});

0
5 سال پیش
#1778 نقل قول
در نهایت کد شما باید به شکل زیر باشه:

  @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>
0
7 ماه پیش
#4431 نقل قول
عکس های گوگل فوتوازتاریخ29/اوت/2023 هم رسانی وبازیابی شود. وایجادشود
0
دسته بندی ها