proekton.com/work_sell/templates/worksell_detail.html

{% extends 'partials/base.html' %}
{% load staticfiles %}
{% load thumbnail %}
{% block content %}
  {% include 'partials/header.html' %}
  <div class="container mainScore">
    <div class="row">
      <div class="col-lg-12 allProjects">
        <p class="titleScore">{{ object }}</p>

        {% if object.get_prev %}
          <div class="all all1">
            <p><a href="{% url 'work_sell:detail' object.get_prev.pk %}"> предыдущий</a></p>
          </div>
        {% endif %}

        {% if object.get_next %}
          <div class="all all2">
            <p><a href="{% url 'work_sell:detail' object.get_next.pk %}">следующий</a></p>
          </div>
        {% endif %}
      </div>
      
      {% if object.contractor %}
        <div class="btnReadyBlock disTab">
          <div class="triangle1"></div>
          <div class="col-lg-3">
            <p class="cenaReady">{{ object.budget }} <i class="{% fa_currency_classes object.currency %}"></i></p>
          </div>
          {% if request.user.is_authenticated %}
            <div class="col-lg-3">
              <a href="{% url 'users:contractor-profile' object.contractor.pk %}" class="linkReady LR1">
                купить
              </a>
            </div>
            
            <div class="col-lg-3">
              <a href="{% url 'chat:chat-user' %}?user_id={{ object.contractor.pk }}" class="linkReady LR2">
                Написать сообщение
              </a>
            </div>
          {% endif %}
          <div class="col-lg-3">
            <a href="{% url 'users:contractor-profile' object.contractor.pk %}#open-contact" class="linkReady LR3">
              посмотреть контакты
            </a>
          </div>
        </div>
      {% endif %}


      <div class="desReadyBlock">
        {% if object.description %}
          <div class="col-lg-10 col-lg-offset-1">
            <p class="titleReady">Описание:</p>
          </div>
          <div class="col-lg-10 col-lg-offset-1">
            <p class="textReady">
              {{ object.description }}
            </p>
          </div>
        {% endif %}
        <div class="col-lg-12 sliderReady">
          {% if object.photos.all|length > 1 %}
            <div class="arroww prev3"></div>
            <div class="arroww next3"></div>
          {% endif %}
          <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
              {% for photo in object.photos.all %}
                <div class="swiper-slide" style="background-image:url('{% static photo.img.url %}')"></div>
              {% endfor %}
            </div>
          </div>
          {% if object.photos.all|length > 1 %}
            <div class="swiper-container gallery-thumbs">
              <div class="swiper-wrapper">
                {% for photo in object.photos.all %}
                  <div class="swiper-slide" style="background-image:url('{% static photo.img.url %}')"></div>
                {% endfor %}
              </div>
            </div>
          {% endif %}
        </div>
      </div>
      <div class="col-lg-12 sibl">
        <p>Похожие работы</p>
      </div>

      <div class="gallMini disTab">
        {% for worksell in worksell_related %}
          <div class="col-lg-3">
            <div class="insetCol box-sizing disTab">
              {% thumbnail worksell.get_cover "265x265" crop="center" as im %}
                <a href="{% url 'work_sell:detail' worksell.pk %}">
                  <div class="imgGal" style="background: url('{{ im.url }}') no-repeat center;">
                    <div class="imgFigure"></div>
                  </div>
                </a>
              {% endthumbnail %}
            </div>
          </div>
        {% endfor %}
      </div>

      {% include 'partials/footer.html' %}

    </div>
  </div>

{% endblock %}
{% block js_block %}
  <script src="{% static 'js/swiper.min.js' %}"></script>
  <script>
    var galleryTop = new Swiper('.gallery-top', {
      nextButton: '.next3',
      prevButton: '.prev3',
      spaceBetween: 10,
    });
    var galleryTop = new Swiper('.gallery-top', {
      nextButton: '.next3',
      prevButton: '.prev3',
      spaceBetween: 15,
      onSlideChangeEnd: function (swiper) {
        var activeIndex = swiper.activeIndex;
        $(galleryThumbs.slides).removeClass('is-selected');
        $(galleryThumbs.slides).eq(activeIndex).addClass('is-selected');
        galleryThumbs.slideTo(activeIndex, 300, false);

      }

    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 15,
      freeMode: true,
      centeredSlides: false,
      slidesPerView: 6,
      touchRatio: 0.2,
      nextButton: '.arr2',
      prevButton: '.arr1',
      onClick: function (swiper, event) {
        var clicked = swiper.clickedIndex
        swiper.activeIndex = clicked;
        swiper.updateClasses()
        $(swiper.slides).removeClass('is-selected');
        $(swiper.clickedSlide).addClass('is-selected');
        galleryTop.slideTo(clicked, 300, false);

      }
    });
  </script>
{% endblock %}